dev: update sort order calculation

* chore: issue and project details in activity

* dev: update capture log

.env.example

@@ -19,6 +19,8 @@ NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
 NEXT_PUBLIC_TRACK_EVENTS=0
 # Slack for Slack Integration
 NEXT_PUBLIC_SLACK_CLIENT_ID=""
+# For Telemetry, set it to "app.plane.so"
+NEXT_PUBLIC_PLAUSIBLE_DOMAIN=""
 
 # Backend
 # Debug value for api server use it as 0 for production use

README.md

@@ -2,7 +2,7 @@
 
 <p align="center">
 <a href="https://plane.so">
-  <img src="https://res.cloudinary.com/toolspacedev/image/upload/v1680596414/Plane/Plane_Icon_Blue_on_White_150x150_muysa3.jpg" alt="Plane Logo" width="70">
+  <img src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_logo_.webp" alt="Plane Logo" width="70">
 </a>
 </p>
 
@@ -11,22 +11,22 @@
 
 <p align="center">
 <a href="https://discord.com/invite/A92xrEGCge">
-<img alt="Discord" src="https://img.shields.io/discord/1031547764020084846?color=5865F2&label=Discord&style=for-the-badge" />
+<img alt="Discord online members" src="https://img.shields.io/discord/1031547764020084846?color=5865F2&label=Discord&style=for-the-badge" />
 </a>
-<img alt="Discord" src="https://img.shields.io/github/commit-activity/m/makeplane/plane?style=for-the-badge" />
+<img alt="Commit activity per month" src="https://img.shields.io/github/commit-activity/m/makeplane/plane?style=for-the-badge" />
 </p>
 
 <p>
     <a href="https://app.plane.so/#gh-light-mode-only" target="_blank">
       <img
-        src="https://ik.imagekit.io/killbluedog/Plane_Screen.png?updatedAt=1684942001069"
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_screen.webp"
         alt="Plane Screens"
         width="100%"
       />
     </a>
     <a href="https://app.plane.so/#gh-dark-mode-only" target="_blank">
       <img
-        src="https://ik.imagekit.io/killbluedog/Plane_Screens_Dark_Mode.png?updatedAt=1684942388044"
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_screens_dark_mode.webp"
         alt="Plane Screens"
         width="100%"
       />
@@ -86,7 +86,7 @@ docker compose up -d
 <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/killbluedog/Plane_Views_Dark_Mode.png?updatedAt=1684943050275"
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_views_dark_mode.webp"
         alt="Plane Views"
         width="100%"
       />
@@ -95,7 +95,7 @@ docker compose up -d
 <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/killbluedog/Plane_Issue_Detail_Dark_Mode.png?updatedAt=1684943050202"
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_issue_detail_dark_mode.webp"
         alt="Plane Issue Details"
         width="100%"
       />
@@ -104,7 +104,7 @@ docker compose up -d
   <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/killbluedog/Plane_Cycles___Modules_Dark_Mode.png?updatedAt=1684943050281"
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_cycles_modules_dark_mode.webp"
         alt="Plane Cycles and Modules"
         width="100%"
       />
@@ -113,7 +113,7 @@ docker compose up -d
   <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/killbluedog/Plane_Analytics_Dark_Mode.png?updatedAt=1684944596824"
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_analytics_dark_mode.webp"
         alt="Plane Analytics"
         width="100%"
       />
@@ -122,7 +122,7 @@ docker compose up -d
    <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/killbluedog/Plane_Pages_Dark_Mode.png?updatedAt=1684943050202"
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_pages_dark_mode.webp"
         alt="Plane Pages"
         width="100%"
       />
@@ -132,7 +132,7 @@ docker compose up -d
    <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/killbluedog/Plane_Commad_K_Dark_Mode.png?updatedAt=1684943050312"
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_commad_k_dark_mode.webp"
         alt="Plane Command Menu"
         width="100%"
       />

apiserver/Dockerfile.api

@@ -49,7 +49,7 @@ USER root
 RUN apk --no-cache add "bash~=5.2"
 COPY ./bin ./bin/
 
-RUN chmod +x ./bin/takeoff ./bin/worker
+RUN chmod +x ./bin/takeoff ./bin/worker ./bin/beat
 RUN chmod -R 777 /code
 
 USER captain

apiserver/bin/beat

@@ -0,0 +1,5 @@
+#!/bin/bash
+set -e
+
+python manage.py wait_for_db
+celery -A plane beat -l info

apiserver/bin/takeoff

@@ -6,4 +6,4 @@ python manage.py migrate
 # Create a Default User
 python bin/user_script.py
 
-exec gunicorn -w 8 -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:8000 --config gunicorn.config.py --max-requests 1200 --max-requests-jitter 1000 --access-logfile -
+exec gunicorn -w 8 -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:8000 --max-requests 1200 --max-requests-jitter 1000 --access-logfile -

apiserver/plane/api/permissions/__init__.py

@@ -1,2 +1,2 @@
-from .workspace import WorkSpaceBasePermission, WorkSpaceAdminPermission, WorkspaceEntityPermission
+from .workspace import WorkSpaceBasePermission, WorkSpaceAdminPermission, WorkspaceEntityPermission, WorkspaceViewerPermission
 from .project import ProjectBasePermission, ProjectEntityPermission, ProjectMemberPermission, ProjectLitePermission

apiserver/plane/api/permissions/workspace.py

@@ -61,3 +61,13 @@ class WorkspaceEntityPermission(BasePermission):
         return WorkspaceMember.objects.filter(
             member=request.user, workspace__slug=view.workspace_slug
         ).exists()
+
+
+class WorkspaceViewerPermission(BasePermission):
+    def has_permission(self, request, view):
+        if request.user.is_anonymous:
+            return False
+
+        return WorkspaceMember.objects.filter(
+            member=request.user, workspace__slug=view.workspace_slug, role__gte=10
+        ).exists()

apiserver/plane/api/serializers/__init__.py

@@ -25,7 +25,7 @@ from .project import (
 )
 from .state import StateSerializer, StateLiteSerializer
 from .view import IssueViewSerializer, IssueViewFavoriteSerializer
-from .cycle import CycleSerializer, CycleIssueSerializer, CycleFavoriteSerializer
+from .cycle import CycleSerializer, CycleIssueSerializer, CycleFavoriteSerializer, CycleWriteSerializer
 from .asset import FileAssetSerializer
 from .issue import (
     IssueCreateSerializer,
@@ -43,6 +43,8 @@ from .issue import (
     IssueLiteSerializer,
     IssueAttachmentSerializer,
     IssueSubscriberSerializer,
+    IssueReactionSerializer,
+    CommentReactionSerializer,
 )
 
 from .module import (

apiserver/plane/api/serializers/cycle.py

@@ -12,6 +12,12 @@ from .workspace import WorkspaceLiteSerializer
 from .project import ProjectLiteSerializer
 from plane.db.models import Cycle, CycleIssue, CycleFavorite
 
+class CycleWriteSerializer(BaseSerializer):
+
+    class Meta:
+        model = Cycle
+        fields = "__all__"
+
 
 class CycleSerializer(BaseSerializer):
     owned_by = UserLiteSerializer(read_only=True)

apiserver/plane/api/serializers/issue.py

@@ -29,6 +29,8 @@ from plane.db.models import (
     ModuleIssue,
     IssueLink,
     IssueAttachment,
+    IssueReaction,
+    CommentReaction,
 )
 
 
@@ -50,6 +52,20 @@ class IssueFlatSerializer(BaseSerializer):
         ]
 
 
+class IssueProjectLiteSerializer(BaseSerializer):
+    project_detail = ProjectLiteSerializer(source="project", read_only=True)
+
+    class Meta:
+        model = Issue
+        fields = [
+            "id",
+            "project_detail",
+            "name",
+            "sequence_id",
+        ]
+        read_only_fields = fields
+
+
 ##TODO: Find a better way to write this serializer
 ## Find a better approach to save manytomany?
 class IssueCreateSerializer(BaseSerializer):
@@ -101,8 +117,15 @@ class IssueCreateSerializer(BaseSerializer):
         labels = validated_data.pop("labels_list", None)
         blocks = validated_data.pop("blocks_list", None)
 
-        project = self.context["project"]
-        issue = Issue.objects.create(**validated_data, project=project)
+        project_id = self.context["project_id"]
+        workspace_id = self.context["workspace_id"]
+        default_assignee_id = self.context["default_assignee_id"]
+
+        issue = Issue.objects.create(**validated_data, project_id=project_id)
+
+        # Issue Audit Users
+        created_by_id = issue.created_by_id
+        updated_by_id = issue.updated_by_id
 
         if blockers is not None and len(blockers):
             IssueBlocker.objects.bulk_create(
@@ -110,10 +133,10 @@ class IssueCreateSerializer(BaseSerializer):
                     IssueBlocker(
                         block=issue,
                         blocked_by=blocker,
-                        project=project,
-                        workspace=project.workspace,
-                        created_by=issue.created_by,
-                        updated_by=issue.updated_by,
+                        project_id=project_id,
+                        workspace_id=workspace_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
                     )
                     for blocker in blockers
                 ],
@@ -126,10 +149,10 @@ class IssueCreateSerializer(BaseSerializer):
                     IssueAssignee(
                         assignee=user,
                         issue=issue,
-                        project=project,
-                        workspace=project.workspace,
-                        created_by=issue.created_by,
-                        updated_by=issue.updated_by,
+                        project_id=project_id,
+                        workspace_id=workspace_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
                     )
                     for user in assignees
                 ],
@@ -137,14 +160,14 @@ class IssueCreateSerializer(BaseSerializer):
             )
         else:
             # Then assign it to default assignee
-            if project.default_assignee is not None:
+            if default_assignee_id is not None:
                 IssueAssignee.objects.create(
-                    assignee=project.default_assignee,
+                    assignee_id=default_assignee_id,
                     issue=issue,
-                    project=project,
-                    workspace=project.workspace,
-                    created_by=issue.created_by,
-                    updated_by=issue.updated_by,
+                    project_id=project_id,
+                    workspace_id=workspace_id,
+                    created_by_id=created_by_id,
+                    updated_by_id=updated_by_id,
                 )
 
         if labels is not None and len(labels):
@@ -153,10 +176,10 @@ class IssueCreateSerializer(BaseSerializer):
                     IssueLabel(
                         label=label,
                         issue=issue,
-                        project=project,
-                        workspace=project.workspace,
-                        created_by=issue.created_by,
-                        updated_by=issue.updated_by,
+                        project_id=project_id,
+                        workspace_id=workspace_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
                     )
                     for label in labels
                 ],
@@ -169,10 +192,10 @@ class IssueCreateSerializer(BaseSerializer):
                     IssueBlocker(
                         block=block,
                         blocked_by=issue,
-                        project=project,
-                        workspace=project.workspace,
-                        created_by=issue.created_by,
-                        updated_by=issue.updated_by,
+                        project_id=project_id,
+                        workspace_id=workspace_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
                     )
                     for block in blocks
                 ],
@@ -187,6 +210,12 @@ class IssueCreateSerializer(BaseSerializer):
         labels = validated_data.pop("labels_list", None)
         blocks = validated_data.pop("blocks_list", None)
 
+        # Related models
+        project_id = instance.project_id
+        workspace_id = instance.workspace_id
+        created_by_id = instance.created_by_id
+        updated_by_id = instance.updated_by_id
+
         if blockers is not None:
             IssueBlocker.objects.filter(block=instance).delete()
             IssueBlocker.objects.bulk_create(
@@ -194,10 +223,10 @@ class IssueCreateSerializer(BaseSerializer):
                     IssueBlocker(
                         block=instance,
                         blocked_by=blocker,
-                        project=instance.project,
-                        workspace=instance.project.workspace,
-                        created_by=instance.created_by,
-                        updated_by=instance.updated_by,
+                        project_id=project_id,
+                        workspace_id=workspace_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
                     )
                     for blocker in blockers
                 ],
@@ -211,10 +240,10 @@ class IssueCreateSerializer(BaseSerializer):
                     IssueAssignee(
                         assignee=user,
                         issue=instance,
-                        project=instance.project,
-                        workspace=instance.project.workspace,
-                        created_by=instance.created_by,
-                        updated_by=instance.updated_by,
+                        project_id=project_id,
+                        workspace_id=workspace_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
                     )
                     for user in assignees
                 ],
@@ -228,10 +257,10 @@ class IssueCreateSerializer(BaseSerializer):
                     IssueLabel(
                         label=label,
                         issue=instance,
-                        project=instance.project,
-                        workspace=instance.project.workspace,
-                        created_by=instance.created_by,
-                        updated_by=instance.updated_by,
+                        project_id=project_id,
+                        workspace_id=workspace_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
                     )
                     for label in labels
                 ],
@@ -245,23 +274,25 @@ class IssueCreateSerializer(BaseSerializer):
                     IssueBlocker(
                         block=block,
                         blocked_by=instance,
-                        project=instance.project,
-                        workspace=instance.project.workspace,
-                        created_by=instance.created_by,
-                        updated_by=instance.updated_by,
+                        project_id=project_id,
+                        workspace_id=workspace_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
                     )
                     for block in blocks
                 ],
                 batch_size=10,
             )
 
+        # Time updation occues even when other related models are updated
         instance.updated_at = timezone.now()
         return super().update(instance, validated_data)
 
 
 class IssueActivitySerializer(BaseSerializer):
     actor_detail = UserLiteSerializer(read_only=True, source="actor")
-    workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
+    issue_detail = IssueFlatSerializer(read_only=True, source="issue")
+    project_detail = ProjectLiteSerializer(read_only=True, source="project")
 
     class Meta:
         model = IssueActivity
@@ -335,19 +366,31 @@ class IssueLabelSerializer(BaseSerializer):
 
 
 class BlockedIssueSerializer(BaseSerializer):
-    blocked_issue_detail = IssueFlatSerializer(source="block", read_only=True)
+    blocked_issue_detail = IssueProjectLiteSerializer(source="block", read_only=True)
 
     class Meta:
         model = IssueBlocker
-        fields = "__all__"
+        fields = [
+            "blocked_issue_detail",
+            "blocked_by",
+            "block",
+        ]
+        read_only_fields = fields
 
 
 class BlockerIssueSerializer(BaseSerializer):
-    blocker_issue_detail = IssueFlatSerializer(source="blocked_by", read_only=True)
+    blocker_issue_detail = IssueProjectLiteSerializer(
+        source="blocked_by", read_only=True
+    )
 
     class Meta:
         model = IssueBlocker
-        fields = "__all__"
+        fields = [
+            "blocker_issue_detail",
+            "blocked_by",
+            "block",
+        ]
+        read_only_fields = fields
 
 
 class IssueAssigneeSerializer(BaseSerializer):
@@ -460,11 +503,94 @@ class IssueAttachmentSerializer(BaseSerializer):
         ]
 
 
+class IssueReactionSerializer(BaseSerializer):
+    class Meta:
+        model = IssueReaction
+        fields = "__all__"
+        read_only_fields = [
+            "workspace",
+            "project",
+            "issue",
+            "actor",
+        ]
+
+
+class IssueReactionLiteSerializer(BaseSerializer):
+    actor_detail = UserLiteSerializer(read_only=True, source="actor")
+
+    class Meta:
+        model = IssueReaction
+        fields = [
+            "id",
+            "reaction",
+            "issue",
+            "actor_detail",
+        ]
+
+
+class CommentReactionLiteSerializer(BaseSerializer):
+    actor_detail = UserLiteSerializer(read_only=True, source="actor")
+
+    class Meta:
+        model = CommentReaction
+        fields = [
+            "id",
+            "reaction",
+            "comment",
+            "actor_detail",
+        ]
+
+
+class CommentReactionSerializer(BaseSerializer):
+    class Meta:
+        model = CommentReaction
+        fields = "__all__"
+        read_only_fields = ["workspace", "project", "comment", "actor"]
+
+
+
+class IssueCommentSerializer(BaseSerializer):
+    actor_detail = UserLiteSerializer(read_only=True, source="actor")
+    issue_detail = IssueFlatSerializer(read_only=True, source="issue")
+    project_detail = ProjectLiteSerializer(read_only=True, source="project")
+    workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
+    comment_reactions = CommentReactionLiteSerializer(read_only=True, many=True)
+
+
+    class Meta:
+        model = IssueComment
+        fields = "__all__"
+        read_only_fields = [
+            "workspace",
+            "project",
+            "issue",
+            "created_by",
+            "updated_by",
+            "created_at",
+            "updated_at",
+        ]
+
+
+class IssueStateFlatSerializer(BaseSerializer):
+    state_detail = StateLiteSerializer(read_only=True, source="state")
+    project_detail = ProjectLiteSerializer(read_only=True, source="project")
+
+    class Meta:
+        model = Issue
+        fields = [
+            "id",
+            "sequence_id",
+            "name",
+            "state_detail",
+            "project_detail",
+        ]
+
+
 # Issue Serializer with state details
 class IssueStateSerializer(BaseSerializer):
-    state_detail = StateSerializer(read_only=True, source="state")
-    project_detail = ProjectSerializer(read_only=True, source="project")
-    label_details = LabelSerializer(read_only=True, source="labels", many=True)
+    label_details = LabelLiteSerializer(read_only=True, source="labels", many=True)
+    state_detail = StateLiteSerializer(read_only=True, source="state")
+    project_detail = ProjectLiteSerializer(read_only=True, source="project")
     assignee_details = UserLiteSerializer(read_only=True, source="assignees", many=True)
     sub_issues_count = serializers.IntegerField(read_only=True)
     bridge_id = serializers.UUIDField(read_only=True)
@@ -477,9 +603,9 @@ class IssueStateSerializer(BaseSerializer):
 
 
 class IssueSerializer(BaseSerializer):
-    project_detail = ProjectSerializer(read_only=True, source="project")
+    project_detail = ProjectLiteSerializer(read_only=True, source="project")
     state_detail = StateSerializer(read_only=True, source="state")
-    parent_detail = IssueFlatSerializer(read_only=True, source="parent")
+    parent_detail = IssueStateFlatSerializer(read_only=True, source="parent")
     label_details = LabelSerializer(read_only=True, source="labels", many=True)
     assignee_details = UserLiteSerializer(read_only=True, source="assignees", many=True)
     # List of issues blocked by this issue
@@ -491,6 +617,7 @@ class IssueSerializer(BaseSerializer):
     issue_link = IssueLinkSerializer(read_only=True, many=True)
     issue_attachment = IssueAttachmentSerializer(read_only=True, many=True)
     sub_issues_count = serializers.IntegerField(read_only=True)
+    issue_reactions = IssueReactionLiteSerializer(read_only=True, many=True)
 
     class Meta:
         model = Issue
@@ -516,6 +643,7 @@ class IssueLiteSerializer(BaseSerializer):
     module_id = serializers.UUIDField(read_only=True)
     attachment_count = serializers.IntegerField(read_only=True)
     link_count = serializers.IntegerField(read_only=True)
+    issue_reactions = IssueReactionLiteSerializer(read_only=True, many=True)
 
     class Meta:
         model = Issue

apiserver/plane/api/serializers/module.py

@@ -106,7 +106,7 @@ class ModuleFlatSerializer(BaseSerializer):
 
 class ModuleIssueSerializer(BaseSerializer):
     module_detail = ModuleFlatSerializer(read_only=True, source="module")
-    issue_detail = IssueStateSerializer(read_only=True, source="issue")
+    issue_detail = ProjectLiteSerializer(read_only=True, source="issue")
     sub_issues_count = serializers.IntegerField(read_only=True)
 
     class Meta:
@@ -151,7 +151,7 @@ class ModuleLinkSerializer(BaseSerializer):
 
 
 class ModuleSerializer(BaseSerializer):
-    project_detail = ProjectSerializer(read_only=True, source="project")
+    project_detail = ProjectLiteSerializer(read_only=True, source="project")
     lead_detail = UserLiteSerializer(read_only=True, source="lead")
     members_detail = UserLiteSerializer(read_only=True, many=True, source="members")
     link_module = ModuleLinkSerializer(read_only=True, many=True)

apiserver/plane/api/serializers/notification.py

@@ -1,8 +1,10 @@
 # Module imports
 from .base import BaseSerializer
+from .user import UserLiteSerializer
 from plane.db.models import Notification
 
 class NotificationSerializer(BaseSerializer):
+    triggered_by_details = UserLiteSerializer(read_only=True, source="triggered_by")
 
     class Meta:
         model = Notification

apiserver/plane/api/serializers/page.py

@@ -3,7 +3,7 @@ from rest_framework import serializers
 
 # Module imports
 from .base import BaseSerializer
-from .issue import IssueFlatSerializer, LabelSerializer
+from .issue import IssueFlatSerializer, LabelLiteSerializer
 from .workspace import WorkspaceLiteSerializer
 from .project import ProjectLiteSerializer
 from plane.db.models import Page, PageBlock, PageFavorite, PageLabel, Label
@@ -23,16 +23,22 @@ class PageBlockSerializer(BaseSerializer):
             "page",
         ]
 
+class PageBlockLiteSerializer(BaseSerializer):
+
+    class Meta:
+        model = PageBlock
+        fields = "__all__"
+
 
 class PageSerializer(BaseSerializer):
     is_favorite = serializers.BooleanField(read_only=True)
-    label_details = LabelSerializer(read_only=True, source="labels", many=True)
+    label_details = LabelLiteSerializer(read_only=True, source="labels", many=True)
     labels_list = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=Label.objects.all()),
         write_only=True,
         required=False,
     )
-    blocks = PageBlockSerializer(read_only=True, many=True)
+    blocks = PageBlockLiteSerializer(read_only=True, many=True)
     project_detail = ProjectLiteSerializer(source="project", read_only=True)
     workspace_detail = WorkspaceLiteSerializer(source="workspace", read_only=True)
 

apiserver/plane/api/serializers/project.py

@@ -93,6 +93,7 @@ class ProjectDetailSerializer(BaseSerializer):
     total_cycles = serializers.IntegerField(read_only=True)
     total_modules = serializers.IntegerField(read_only=True)
     is_member = serializers.BooleanField(read_only=True)
+    sort_order = serializers.FloatField(read_only=True)
 
     class Meta:
         model = Project
@@ -110,8 +111,8 @@ class ProjectMemberSerializer(BaseSerializer):
 
 
 class ProjectMemberInviteSerializer(BaseSerializer):
-    project = ProjectSerializer(read_only=True)
-    workspace = WorkSpaceSerializer(read_only=True)
+    project = ProjectLiteSerializer(read_only=True)
+    workspace = WorkspaceLiteSerializer(read_only=True)
 
     class Meta:
         model = ProjectMemberInvite
@@ -125,7 +126,7 @@ class ProjectIdentifierSerializer(BaseSerializer):
 
 
 class ProjectFavoriteSerializer(BaseSerializer):
-    project_detail = ProjectSerializer(source="project", read_only=True)
+    project_detail = ProjectLiteSerializer(source="project", read_only=True)
 
     class Meta:
         model = ProjectFavorite
@@ -136,11 +137,6 @@ class ProjectFavoriteSerializer(BaseSerializer):
         ]
 
 
-class ProjectLiteSerializer(BaseSerializer):
-    class Meta:
-        model = Project
-        fields = ["id", "identifier", "name"]
-        read_only_fields = fields
 
 
 class ProjectMemberLiteSerializer(BaseSerializer):

apiserver/plane/api/urls.py

@@ -22,6 +22,7 @@ from plane.api.views import (
     # User
     UserEndpoint,
     UpdateUserOnBoardedEndpoint,
+    UpdateUserTourCompletedEndpoint,
     UserActivityEndpoint,
     ## End User
     # Workspaces
@@ -44,6 +45,11 @@ from plane.api.views import (
     UserIssueCompletedGraphEndpoint,
     UserWorkspaceDashboardEndpoint,
     WorkspaceThemeViewSet,
+    WorkspaceUserProfileStatsEndpoint,
+    WorkspaceUserActivityEndpoint,
+    WorkspaceUserProfileEndpoint,
+    WorkspaceUserProfileIssuesEndpoint,
+    WorkspaceLabelsEndpoint,
     ## End Workspaces
     # File Assets
     FileAssetEndpoint,
@@ -78,6 +84,8 @@ from plane.api.views import (
     IssueAttachmentEndpoint,
     IssueArchiveViewSet,
     IssueSubscriberViewSet,
+    IssueReactionViewSet,
+    CommentReactionViewSet,
     ## End Issues
     # States
     StateViewSet,
@@ -152,6 +160,7 @@ from plane.api.views import (
     ## End Analytics
     # Notification
     NotificationViewSet,
+    UnreadNotificationEndpoint,
     ## End Notification
 )
 
@@ -202,7 +211,12 @@ urlpatterns = [
     path(
         "users/me/onboard/",
         UpdateUserOnBoardedEndpoint.as_view(),
-        name="change-password",
+        name="user-onboard",
+    ),
+    path(
+        "users/me/tour-completed/",
+        UpdateUserTourCompletedEndpoint.as_view(),
+        name="user-tour",
     ),
     path("users/activities/", UserActivityEndpoint.as_view(), name="user-activities"),
     # user workspaces
@@ -378,6 +392,31 @@ urlpatterns = [
         ),
         name="workspace-themes",
     ),
+    path(
+        "workspaces/<str:slug>/user-stats/<uuid:user_id>/",
+        WorkspaceUserProfileStatsEndpoint.as_view(),
+        name="workspace-user-stats",
+    ),
+    path(
+        "workspaces/<str:slug>/user-activity/<uuid:user_id>/",
+        WorkspaceUserActivityEndpoint.as_view(),
+        name="workspace-user-activity",
+    ),
+    path(
+        "workspaces/<str:slug>/user-profile/<uuid:user_id>/",
+        WorkspaceUserProfileEndpoint.as_view(),
+        name="workspace-user-profile-page",
+    ),
+    path(
+        "workspaces/<str:slug>/user-issues/<uuid:user_id>/",
+        WorkspaceUserProfileIssuesEndpoint.as_view(),
+        name="workspace-user-profile-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/labels/",
+        WorkspaceLabelsEndpoint.as_view(),
+        name="workspace-labels",
+    ),
     ## End Workspaces ##
     # Projects
     path(
@@ -472,7 +511,6 @@ urlpatterns = [
         "workspaces/<str:slug>/user-favorite-projects/",
         ProjectFavoritesViewSet.as_view(
             {
-                "get": "list",
                 "post": "create",
             }
         ),
@@ -830,6 +868,48 @@ urlpatterns = [
         name="project-issue-subscribers",
     ),
     ## End Issue Subscribers
+    # Issue Reactions
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/reactions/",
+        IssueReactionViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-reactions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/reactions/<str:reaction_code>/",
+        IssueReactionViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-reactions",
+    ),
+    ## End Issue Reactions
+    # Comment Reactions
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/comments/<uuid:comment_id>/reactions/",
+        CommentReactionViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="project-issue-comment-reactions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/comments/<uuid:comment_id>/reactions/<str:reaction_code>/",
+        CommentReactionViewSet.as_view(
+            {
+                "delete": "destroy",
+            }
+        ),
+        name="project-issue-comment-reactions",
+    ),
+    ## End Comment Reactions
     ## IssueProperty
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/",
@@ -1234,7 +1314,7 @@ urlpatterns = [
     ##  End Importer
     # Search
     path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/search/",
+        "workspaces/<str:slug>/search/",
         GlobalSearchEndpoint.as_view(),
         name="global-search",
     ),
@@ -1377,5 +1457,10 @@ urlpatterns = [
         ),
         name="notifications",
     ),
+    path(
+        "workspaces/<str:slug>/users/notifications/unread/",
+        UnreadNotificationEndpoint.as_view(),
+        name="unread-notifications",
+    ),
     ## End Notification
 ]

apiserver/plane/api/views/__init__.py

@@ -16,6 +16,7 @@ from .project import (
 from .people import (
     UserEndpoint,
     UpdateUserOnBoardedEndpoint,
+    UpdateUserTourCompletedEndpoint,
     UserActivityEndpoint,
 )
 
@@ -41,6 +42,11 @@ from .workspace import (
     UserIssueCompletedGraphEndpoint,
     UserWorkspaceDashboardEndpoint,
     WorkspaceThemeViewSet,
+    WorkspaceUserProfileStatsEndpoint,
+    WorkspaceUserActivityEndpoint,
+    WorkspaceUserProfileEndpoint,
+    WorkspaceUserProfileIssuesEndpoint,
+    WorkspaceLabelsEndpoint,
 )
 from .state import StateViewSet
 from .view import IssueViewViewSet, ViewIssuesEndpoint, IssueViewFavoriteViewSet
@@ -67,6 +73,8 @@ from .issue import (
     IssueAttachmentEndpoint,
     IssueArchiveViewSet,
     IssueSubscriberViewSet,
+    CommentReactionViewSet,
+    IssueReactionViewSet,
 )
 
 from .auth_extended import (
@@ -144,4 +152,4 @@ from .analytic import (
     DefaultAnalyticsEndpoint,
 )
 
-from .notification import NotificationViewSet
+from .notification import NotificationViewSet, UnreadNotificationEndpoint

apiserver/plane/api/views/authentication.py

@@ -279,6 +279,8 @@ class MagicSignInGenerateEndpoint(BaseAPIView):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
+            # Clean up
+            email = email.strip().lower()
             validate_email(email)
 
             ## Generate a random token
@@ -345,8 +347,8 @@ class MagicSignInEndpoint(BaseAPIView):
 
     def post(self, request):
         try:
-            user_token = request.data.get("token", "").strip().lower()
-            key = request.data.get("key", False)
+            user_token = request.data.get("token", "").strip()
+            key = request.data.get("key", False).strip().lower()
 
             if not key or user_token == "":
                 return Response(

apiserver/plane/api/views/cycle.py

@@ -31,6 +31,7 @@ from plane.api.serializers import (
     CycleIssueSerializer,
     CycleFavoriteSerializer,
     IssueStateSerializer,
+    CycleWriteSerializer,
 )
 from plane.api.permissions import ProjectEntityPermission
 from plane.db.models import (
@@ -338,7 +339,7 @@ class CycleViewSet(BaseViewSet):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            serializer = CycleSerializer(cycle, data=request.data, partial=True)
+            serializer = CycleWriteSerializer(cycle, data=request.data, partial=True)
             if serializer.is_valid():
                 serializer.save()
                 return Response(serializer.data, status=status.HTTP_200_OK)
@@ -691,7 +692,6 @@ class CycleDateCheckEndpoint(BaseAPIView):
                 return Response(
                     {
                         "error": "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
-                        "cycles": CycleSerializer(cycles, many=True).data,
                         "status": False,
                     }
                 )
@@ -706,9 +706,6 @@ class CycleDateCheckEndpoint(BaseAPIView):
 
 
 class CycleFavoriteViewSet(BaseViewSet):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
 
     serializer_class = CycleFavoriteSerializer
     model = CycleFavorite

apiserver/plane/api/views/gpt.py

@@ -30,31 +30,6 @@ class GPTIntegrationEndpoint(BaseAPIView):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            count = 0
-
-            # If logger is enabled check for request limit
-            if settings.LOGGER_BASE_URL:
-                try:
-                    headers = {
-                        "Content-Type": "application/json",
-                    }
-
-                    response = requests.post(
-                        settings.LOGGER_BASE_URL,
-                        json={"user_id": str(request.user.id)},
-                        headers=headers,
-                    )
-                    count = response.json().get("count", 0)
-                    if not response.json().get("success", False):
-                        return Response(
-                            {
-                                "error": "You have surpassed the monthly limit for AI assistance"
-                            },
-                            status=status.HTTP_429_TOO_MANY_REQUESTS,
-                        )
-                except Exception as e:
-                    capture_exception(e)
-
             prompt = request.data.get("prompt", False)
             task = request.data.get("task", False)
 
@@ -82,7 +57,6 @@ class GPTIntegrationEndpoint(BaseAPIView):
                 {
                     "response": text,
                     "response_html": text_html,
-                    "count": count,
                     "project_detail": ProjectLiteSerializer(project).data,
                     "workspace_detail": WorkspaceLiteSerializer(workspace).data,
                 },

apiserver/plane/api/views/issue.py

@@ -45,10 +45,12 @@ from plane.api.serializers import (
     IssueLiteSerializer,
     IssueAttachmentSerializer,
     IssueSubscriberSerializer,
-    ProjectMemberSerializer,
     ProjectMemberLiteSerializer,
+    IssueReactionSerializer,
+    CommentReactionSerializer,
 )
 from plane.api.permissions import (
+    WorkspaceEntityPermission,
     ProjectEntityPermission,
     WorkSpaceAdminPermission,
     ProjectMemberPermission,
@@ -66,6 +68,8 @@ from plane.db.models import (
     State,
     IssueSubscriber,
     ProjectMember,
+    IssueReaction,
+    CommentReaction,
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.grouper import group_results
@@ -152,13 +156,19 @@ class IssueViewSet(BaseViewSet):
             .select_related("parent")
             .prefetch_related("assignees")
             .prefetch_related("labels")
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("actor"),
+                )
+            )
         )
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id):
         try:
             filters = issue_filters(request.query_params, "GET")
-            show_sub_issues = request.GET.get("show_sub_issues", "true")
+            print(filters)
 
             # Custom ordering for priority and state
             priority_order = ["urgent", "high", "medium", "low", None]
@@ -169,8 +179,8 @@ class IssueViewSet(BaseViewSet):
             issue_queryset = (
                 self.get_queryset()
                 .filter(**filters)
-                .annotate(cycle_id=F("issue_cycle__id"))
-                .annotate(module_id=F("issue_module__id"))
+                .annotate(cycle_id=F("issue_cycle__cycle_id"))
+                .annotate(module_id=F("issue_module__module_id"))
                 .annotate(
                     link_count=IssueLink.objects.filter(issue=OuterRef("id"))
                     .order_by()
@@ -245,12 +255,6 @@ class IssueViewSet(BaseViewSet):
             else:
                 issue_queryset = issue_queryset.order_by(order_by_param)
 
-            issue_queryset = (
-                issue_queryset
-                if show_sub_issues == "true"
-                else issue_queryset.filter(parent__isnull=True)
-            )
-
             issues = IssueLiteSerializer(issue_queryset, many=True).data
 
             ## Grouping the results
@@ -263,7 +267,7 @@ class IssueViewSet(BaseViewSet):
             return Response(issues, status=status.HTTP_200_OK)
 
         except Exception as e:
-            print(e)
+            capture_exception(e)
             return Response(
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
@@ -271,9 +275,15 @@ class IssueViewSet(BaseViewSet):
 
     def create(self, request, slug, project_id):
         try:
-            project = Project.objects.get(workspace__slug=slug, pk=project_id)
+            project = Project.objects.get(pk=project_id)
+
             serializer = IssueCreateSerializer(
-                data=request.data, context={"project": project}
+                data=request.data,
+                context={
+                    "project_id": project_id,
+                    "workspace_id": project.workspace_id,
+                    "default_assignee_id": project.default_assignee_id,
+                },
             )
 
             if serializer.is_valid():
@@ -312,9 +322,17 @@ class UserWorkSpaceIssues(BaseAPIView):
     @method_decorator(gzip_page)
     def get(self, request, slug):
         try:
-            issues = (
+            filters = issue_filters(request.query_params, "GET")
+            # Custom ordering for priority and state
+            priority_order = ["urgent", "high", "medium", "low", None]
+            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+
+            order_by_param = request.GET.get("order_by", "-created_at")
+
+            issue_queryset = (
                 Issue.issue_objects.filter(
-                    assignees__in=[request.user], workspace__slug=slug
+                    (Q(assignees__in=[request.user]) | Q(created_by=request.user)),
+                    workspace__slug=slug,
                 )
                 .annotate(
                     sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
@@ -328,7 +346,7 @@ class UserWorkSpaceIssues(BaseAPIView):
                 .select_related("parent")
                 .prefetch_related("assignees")
                 .prefetch_related("labels")
-                .order_by("-created_at")
+                .order_by(order_by_param)
                 .annotate(
                     link_count=IssueLink.objects.filter(issue=OuterRef("id"))
                     .order_by()
@@ -343,9 +361,77 @@ class UserWorkSpaceIssues(BaseAPIView):
                     .annotate(count=Func(F("id"), function="Count"))
                     .values("count")
                 )
+                .filter(**filters)
             )
-            serializer = IssueLiteSerializer(issues, many=True)
-            return Response(serializer.data, status=status.HTTP_200_OK)
+
+            # Priority Ordering
+            if order_by_param == "priority" or order_by_param == "-priority":
+                priority_order = (
+                    priority_order
+                    if order_by_param == "priority"
+                    else priority_order[::-1]
+                )
+                issue_queryset = issue_queryset.annotate(
+                    priority_order=Case(
+                        *[
+                            When(priority=p, then=Value(i))
+                            for i, p in enumerate(priority_order)
+                        ],
+                        output_field=CharField(),
+                    )
+                ).order_by("priority_order")
+
+            # State Ordering
+            elif order_by_param in [
+                "state__name",
+                "state__group",
+                "-state__name",
+                "-state__group",
+            ]:
+                state_order = (
+                    state_order
+                    if order_by_param in ["state__name", "state__group"]
+                    else state_order[::-1]
+                )
+                issue_queryset = issue_queryset.annotate(
+                    state_order=Case(
+                        *[
+                            When(state__group=state_group, then=Value(i))
+                            for i, state_group in enumerate(state_order)
+                        ],
+                        default=Value(len(state_order)),
+                        output_field=CharField(),
+                    )
+                ).order_by("state_order")
+            # assignee and label ordering
+            elif order_by_param in [
+                "labels__name",
+                "-labels__name",
+                "assignees__first_name",
+                "-assignees__first_name",
+            ]:
+                issue_queryset = issue_queryset.annotate(
+                    max_values=Max(
+                        order_by_param[1::]
+                        if order_by_param.startswith("-")
+                        else order_by_param
+                    )
+                ).order_by(
+                    "-max_values" if order_by_param.startswith("-") else "max_values"
+                )
+            else:
+                issue_queryset = issue_queryset.order_by(order_by_param)
+
+            issues = IssueLiteSerializer(issue_queryset, many=True).data
+
+            ## Grouping the results
+            group_by = request.GET.get("group_by", False)
+            if group_by:
+                return Response(
+                    group_results(issues, group_by), status=status.HTTP_200_OK
+                )
+
+            return Response(issues, status=status.HTTP_200_OK)
         except Exception as e:
             capture_exception(e)
             return Response(
@@ -391,12 +477,13 @@ class IssueActivityEndpoint(BaseAPIView):
                     ~Q(field="comment"),
                     project__project_projectmember__member=self.request.user,
                 )
-                .select_related("actor", "workspace")
+                .select_related("actor", "workspace", "issue", "project")
             ).order_by("created_at")
             issue_comments = (
                 IssueComment.objects.filter(issue_id=issue_id)
                 .filter(project__project_projectmember__member=self.request.user)
                 .order_by("created_at")
+                .select_related("actor", "issue", "project", "workspace")
             )
             issue_activities = IssueActivitySerializer(issue_activities, many=True).data
             issue_comments = IssueCommentSerializer(issue_comments, many=True).data
@@ -419,7 +506,7 @@ class IssueCommentViewSet(BaseViewSet):
     serializer_class = IssueCommentSerializer
     model = IssueComment
     permission_classes = [
-        ProjectEntityPermission,
+        ProjectLitePermission,
     ]
 
     filterset_fields = [
@@ -629,9 +716,7 @@ class SubIssuesEndpoint(BaseAPIView):
     def get(self, request, slug, project_id, issue_id):
         try:
             sub_issues = (
-                Issue.issue_objects.filter(
-                    parent_id=issue_id, workspace__slug=slug, project_id=project_id
-                )
+                Issue.issue_objects.filter(parent_id=issue_id, workspace__slug=slug)
                 .select_related("project")
                 .select_related("workspace")
                 .select_related("state")
@@ -661,9 +746,7 @@ class SubIssuesEndpoint(BaseAPIView):
             )
 
             state_distribution = (
-                State.objects.filter(
-                    ~Q(name="Triage"), workspace__slug=slug, project_id=project_id
-                )
+                State.objects.filter(~Q(name="Triage"), workspace__slug=slug)
                 .annotate(
                     state_count=Count(
                         "state_issue",
@@ -955,8 +1038,8 @@ class IssueArchiveViewSet(BaseViewSet):
             issue_queryset = (
                 self.get_queryset()
                 .filter(**filters)
-                .annotate(cycle_id=F("issue_cycle__id"))
-                .annotate(module_id=F("issue_module__id"))
+                .annotate(cycle_id=F("issue_cycle__cycle_id"))
+                .annotate(module_id=F("issue_module__module_id"))
                 .annotate(
                     link_count=IssueLink.objects.filter(issue=OuterRef("id"))
                     .order_by()
@@ -1087,7 +1170,7 @@ class IssueArchiveViewSet(BaseViewSet):
             issue.save()
             issue_activity.delay(
                 type="issue.activity.updated",
-                requested_data=json.dumps({"archived_in": None}),
+                requested_data=json.dumps({"archived_at": None}),
                 actor_id=str(request.user.id),
                 issue_id=str(issue.id),
                 project_id=str(project_id),
@@ -1097,7 +1180,8 @@ class IssueArchiveViewSet(BaseViewSet):
             return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
         except Issue.DoesNotExist:
             return Response(
-                {"error": "Issue Does not exist"}, status=status.HTTP_404_NOT_FOUND)
+                {"error": "Issue Does not exist"}, status=status.HTTP_404_NOT_FOUND
+            )
         except Exception as e:
             capture_exception(e)
             return Response(
@@ -1105,6 +1189,7 @@ class IssueArchiveViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+
 class IssueSubscriberViewSet(BaseViewSet):
     serializer_class = IssueSubscriberSerializer
     model = IssueSubscriber
@@ -1145,18 +1230,22 @@ class IssueSubscriberViewSet(BaseViewSet):
 
     def list(self, request, slug, project_id, issue_id):
         try:
-            members = ProjectMember.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).annotate(
-                is_subscribed=Exists(
-                    IssueSubscriber.objects.filter(
-                        workspace__slug=slug,
-                        project_id=project_id,
-                        issue_id=issue_id,
-                        subscriber=OuterRef("member"),
+            members = (
+                ProjectMember.objects.filter(
+                    workspace__slug=slug, project_id=project_id
+                )
+                .annotate(
+                    is_subscribed=Exists(
+                        IssueSubscriber.objects.filter(
+                            workspace__slug=slug,
+                            project_id=project_id,
+                            issue_id=issue_id,
+                            subscriber=OuterRef("member"),
+                        )
                     )
                 )
-            ).select_related("member")
+                .select_related("member")
+            )
             serializer = ProjectMemberLiteSerializer(members, many=True)
             return Response(serializer.data, status=status.HTTP_200_OK)
         except Exception as e:
@@ -1256,3 +1345,103 @@ class IssueSubscriberViewSet(BaseViewSet):
                 {"error": "Something went wrong, please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+
+class IssueReactionViewSet(BaseViewSet):
+    serializer_class = IssueReactionSerializer
+    model = IssueReaction
+    permission_classes = [
+        ProjectLitePermission,
+    ]
+
+    def get_queryset(self):
+        return (
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(project_id=self.kwargs.get("project_id"))
+            .filter(issue_id=self.kwargs.get("issue_id"))
+            .filter(project__project_projectmember__member=self.request.user)
+            .order_by("-created_at")
+            .distinct()
+        )
+
+    def perform_create(self, serializer):
+        serializer.save(
+            issue_id=self.kwargs.get("issue_id"),
+            project_id=self.kwargs.get("project_id"),
+            actor=self.request.user,
+        )
+
+    def destroy(self, request, slug, project_id, issue_id, reaction_code):
+        try:
+            issue_reaction = IssueReaction.objects.get(
+                workspace__slug=slug,
+                project_id=project_id,
+                issue_id=issue_id,
+                reaction=reaction_code,
+                actor=request.user,
+            )
+            issue_reaction.delete()
+            return Response(status=status.HTTP_204_NO_CONTENT)
+        except IssueReaction.DoesNotExist:
+            return Response(
+                {"error": "Issue reaction does not exist"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
+class CommentReactionViewSet(BaseViewSet):
+    serializer_class = CommentReactionSerializer
+    model = CommentReaction
+    permission_classes = [
+        ProjectLitePermission,
+    ]
+
+    def get_queryset(self):
+        return (
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(project_id=self.kwargs.get("project_id"))
+            .filter(comment_id=self.kwargs.get("comment_id"))
+            .filter(project__project_projectmember__member=self.request.user)
+            .order_by("-created_at")
+            .distinct()
+        )
+
+    def perform_create(self, serializer):
+        serializer.save(
+            actor=self.request.user,
+            comment_id=self.kwargs.get("comment_id"),
+            project_id=self.kwargs.get("project_id"),
+        )
+
+    def destroy(self, request, slug, project_id, comment_id, reaction_code):
+        try:
+            comment_reaction = CommentReaction.objects.get(
+                workspace__slug=slug,
+                project_id=project_id,
+                comment_id=comment_id,
+                reaction=reaction_code,
+                actor=request.user,
+            )
+            comment_reaction.delete()
+            return Response(status=status.HTTP_204_NO_CONTENT)
+        except CommentReaction.DoesNotExist:
+            return Response(
+                {"error": "Comment reaction does not exist"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )

apiserver/plane/api/views/module.py

@@ -480,9 +480,6 @@ class ModuleLinkViewSet(BaseViewSet):
 
 
 class ModuleFavoriteViewSet(BaseViewSet):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
 
     serializer_class = ModuleFavoriteSerializer
     model = ModuleFavorite

apiserver/plane/api/views/notification.py

@@ -6,14 +6,15 @@ from django.utils import timezone
 from rest_framework import status
 from rest_framework.response import Response
 from sentry_sdk import capture_exception
+from plane.utils.paginator import BasePaginator
 
 # Module imports
-from .base import BaseViewSet
-from plane.db.models import Notification, IssueAssignee, IssueSubscriber, Issue
+from .base import BaseViewSet, BaseAPIView
+from plane.db.models import Notification, IssueAssignee, IssueSubscriber, Issue, WorkspaceMember
 from plane.api.serializers import NotificationSerializer
 
 
-class NotificationViewSet(BaseViewSet):
+class NotificationViewSet(BaseViewSet, BasePaginator):
     model = Notification
     serializer_class = NotificationSerializer
 
@@ -25,21 +26,25 @@ class NotificationViewSet(BaseViewSet):
                 workspace__slug=self.kwargs.get("slug"),
                 receiver_id=self.request.user.id,
             )
-            .select_related("workspace")
+            .select_related("workspace", "project," "triggered_by", "receiver")
         )
 
     def list(self, request, slug):
         try:
-            order_by = request.GET.get("order_by", "-created_at")
             snoozed = request.GET.get("snoozed", "false")
             archived = request.GET.get("archived", "false")
+            read = request.GET.get("read", "true")
 
             # Filter type
             type = request.GET.get("type", "all")
 
-            notifications = Notification.objects.filter(
-                workspace__slug=slug, receiver_id=request.user.id
-            ).order_by(order_by)
+            notifications = (
+                Notification.objects.filter(
+                    workspace__slug=slug, receiver_id=request.user.id
+                )
+                .select_related("workspace", "project", "triggered_by", "receiver")
+                .order_by("snoozed_till", "-created_at")
+            )
 
             # Filter for snoozed notifications
             if snoozed == "false":
@@ -49,20 +54,23 @@ class NotificationViewSet(BaseViewSet):
 
             if snoozed == "true":
                 notifications = notifications.filter(
-                    snoozed_till__lt=timezone.now(),
+                    Q(snoozed_till__lt=timezone.now()) | Q(snoozed_till__isnull=False)
                 )
 
+            if read == "false":
+                notifications = notifications.filter(read_at__isnull=True)
+
             # Filter for archived or unarchive
-            if archived == "true":
+            if archived == "false":
                 notifications = notifications.filter(archived_at__isnull=True)
 
-            if archived == "false":
+            if archived == "true":
                 notifications = notifications.filter(archived_at__isnull=False)
 
             # Subscribed issues
             if type == "watching":
                 issue_ids = IssueSubscriber.objects.filter(
-                    workspace__slug=slug, subsriber_id=request.user.id
+                    workspace__slug=slug, subscriber_id=request.user.id
                 ).values_list("issue_id", flat=True)
                 notifications = notifications.filter(entity_identifier__in=issue_ids)
 
@@ -75,10 +83,23 @@ class NotificationViewSet(BaseViewSet):
 
             # Created issues
             if type == "created":
-                issue_ids = Issue.objects.filter(
-                    workspace__slug=slug, created_by=request.user
-                ).values_list("pk", flat=True)
-                notifications = notifications.filter(entity_identifier__in=issue_ids)
+                if WorkspaceMember.objects.filter(workspace__slug=slug, member=request.user, role__lt=15).exists():
+                    notifications = Notification.objects.none()
+                else:
+                    issue_ids = Issue.objects.filter(
+                        workspace__slug=slug, created_by=request.user
+                    ).values_list("pk", flat=True)
+                    notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+            # Pagination
+            if request.GET.get("per_page", False) and request.GET.get("cursor", False):
+                return self.paginate(
+                    request=request,
+                    queryset=(notifications),
+                    on_results=lambda notifications: NotificationSerializer(
+                        notifications, many=True
+                    ).data,
+                )
 
             serializer = NotificationSerializer(notifications, many=True)
             return Response(serializer.data, status=status.HTTP_200_OK)
@@ -117,7 +138,7 @@ class NotificationViewSet(BaseViewSet):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        
+
     def mark_read(self, request, slug, pk):
         try:
             notification = Notification.objects.get(
@@ -160,7 +181,6 @@ class NotificationViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-
     def archive(self, request, slug, pk):
         try:
             notification = Notification.objects.get(
@@ -203,3 +223,54 @@ class NotificationViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+
+class UnreadNotificationEndpoint(BaseAPIView):
+    def get(self, request, slug):
+        try:
+            # Watching Issues Count
+            watching_issues_count = Notification.objects.filter(
+                workspace__slug=slug,
+                receiver_id=request.user.id,
+                read_at__isnull=True,
+                archived_at__isnull=True,
+                entity_identifier__in=IssueSubscriber.objects.filter(
+                    workspace__slug=slug, subscriber_id=request.user.id
+                ).values_list("issue_id", flat=True),
+            ).count()
+
+            # My Issues Count
+            my_issues_count = Notification.objects.filter(
+                workspace__slug=slug,
+                receiver_id=request.user.id,
+                read_at__isnull=True,
+                archived_at__isnull=True,
+                entity_identifier__in=IssueAssignee.objects.filter(
+                    workspace__slug=slug, assignee_id=request.user.id
+                ).values_list("issue_id", flat=True),
+            ).count()
+
+            # Created Issues Count
+            created_issues_count = Notification.objects.filter(
+                workspace__slug=slug,
+                receiver_id=request.user.id,
+                read_at__isnull=True,
+                archived_at__isnull=True,
+                entity_identifier__in=Issue.objects.filter(
+                    workspace__slug=slug, created_by=request.user
+                ).values_list("pk", flat=True),
+            ).count()
+
+            return Response(
+                {
+                    "watching_issues": watching_issues_count,
+                    "my_issues": my_issues_count,
+                    "created_issues": created_issues_count,
+                },
+                status=status.HTTP_200_OK,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )

apiserver/plane/api/views/people.py

@@ -37,7 +37,9 @@ class UserEndpoint(BaseViewSet):
             workspace_invites = WorkspaceMemberInvite.objects.filter(
                 email=request.user.email
             ).count()
-            assigned_issues = Issue.issue_objects.filter(assignees__in=[request.user]).count()
+            assigned_issues = Issue.issue_objects.filter(
+                assignees__in=[request.user]
+            ).count()
 
             serialized_data = UserSerializer(request.user).data
             serialized_data["workspace"] = {
@@ -47,7 +49,9 @@ class UserEndpoint(BaseViewSet):
                 "fallback_workspace_slug": workspace.slug,
                 "invites": workspace_invites,
             }
-            serialized_data.setdefault("issues", {})["assigned_issues"] = assigned_issues
+            serialized_data.setdefault("issues", {})[
+                "assigned_issues"
+            ] = assigned_issues
 
             return Response(
                 serialized_data,
@@ -59,11 +63,15 @@ class UserEndpoint(BaseViewSet):
             workspace_invites = WorkspaceMemberInvite.objects.filter(
                 email=request.user.email
             ).count()
-            assigned_issues = Issue.issue_objects.filter(assignees__in=[request.user]).count()
+            assigned_issues = Issue.issue_objects.filter(
+                assignees__in=[request.user]
+            ).count()
 
-            fallback_workspace = Workspace.objects.filter(
-                workspace_member__member=request.user
-            ).order_by("created_at").first()
+            fallback_workspace = (
+                Workspace.objects.filter(workspace_member__member=request.user)
+                .order_by("created_at")
+                .first()
+            )
 
             serialized_data = UserSerializer(request.user).data
 
@@ -78,7 +86,9 @@ class UserEndpoint(BaseViewSet):
                 else None,
                 "invites": workspace_invites,
             }
-            serialized_data.setdefault("issues", {})["assigned_issues"] = assigned_issues
+            serialized_data.setdefault("issues", {})[
+                "assigned_issues"
+            ] = assigned_issues
 
             return Response(
                 serialized_data,
@@ -109,11 +119,28 @@ class UpdateUserOnBoardedEndpoint(BaseAPIView):
             )
 
 
+class UpdateUserTourCompletedEndpoint(BaseAPIView):
+    def patch(self, request):
+        try:
+            user = User.objects.get(pk=request.user.id)
+            user.is_tour_completed = request.data.get("is_tour_completed", False)
+            user.save()
+            return Response(
+                {"message": "Updated successfully"}, status=status.HTTP_200_OK
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
 class UserActivityEndpoint(BaseAPIView, BasePaginator):
     def get(self, request):
         try:
             queryset = IssueActivity.objects.filter(actor=request.user).select_related(
-                "actor", "workspace"
+                "actor", "workspace", "issue", "project"
             )
 
             return self.paginate(

apiserver/plane/api/views/project.py

@@ -5,7 +5,7 @@ from datetime import datetime
 # Django imports
 from django.core.exceptions import ValidationError
 from django.db import IntegrityError
-from django.db.models import Q, Exists, OuterRef, Func, F
+from django.db.models import Q, Exists, OuterRef, Func, F, Min, Subquery
 from django.core.validators import validate_email
 from django.conf import settings
 
@@ -91,20 +91,45 @@ class ProjectViewSet(BaseViewSet):
                     )
                 )
             )
+            .annotate(
+                total_members=ProjectMember.objects.filter(project_id=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                total_cycles=Cycle.objects.filter(project_id=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                total_modules=Module.objects.filter(project_id=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
             .distinct()
         )
 
     def list(self, request, slug):
         try:
+            is_favorite = request.GET.get("is_favorite", "all")
             subquery = ProjectFavorite.objects.filter(
                 user=self.request.user,
                 project_id=OuterRef("pk"),
                 workspace__slug=self.kwargs.get("slug"),
             )
+            sort_order_query = ProjectMember.objects.filter(
+                member=request.user,
+                project_id=OuterRef("pk"),
+                workspace__slug=self.kwargs.get("slug"),
+            ).values("sort_order")
             projects = (
                 self.get_queryset()
                 .annotate(is_favorite=Exists(subquery))
-                .order_by("-is_favorite", "name")
+                .annotate(sort_order=Subquery(sort_order_query))
+                .order_by("sort_order", "name")
                 .annotate(
                     total_members=ProjectMember.objects.filter(
                         project_id=OuterRef("id")
@@ -126,6 +151,12 @@ class ProjectViewSet(BaseViewSet):
                     .values("count")
                 )
             )
+
+            if is_favorite == "true":
+                projects = projects.filter(is_favorite=True)
+            if is_favorite == "false":
+                projects = projects.filter(is_favorite=False)
+
             return Response(ProjectDetailSerializer(projects, many=True).data)
         except Exception as e:
             capture_exception(e)
@@ -145,40 +176,47 @@ class ProjectViewSet(BaseViewSet):
                 serializer.save()
 
                 # Add the user as Administrator to the project
-                ProjectMember.objects.create(
+                project_member = ProjectMember.objects.create(
                     project_id=serializer.data["id"], member=request.user, role=20
                 )
 
+                if serializer.data["project_lead"] is not None:
+                    ProjectMember.objects.create(
+                        project_id=serializer.data["id"],
+                        member_id=serializer.data["project_lead"],
+                        role=20,
+                    )
+
                 # Default states
                 states = [
                     {
                         "name": "Backlog",
-                        "color": "#5e6ad2",
+                        "color": "#A3A3A3",
                         "sequence": 15000,
                         "group": "backlog",
                         "default": True,
                     },
                     {
                         "name": "Todo",
-                        "color": "#eb5757",
+                        "color": "#3A3A3A",
                         "sequence": 25000,
                         "group": "unstarted",
                     },
                     {
                         "name": "In Progress",
-                        "color": "#26b5ce",
+                        "color": "#F59E0B",
                         "sequence": 35000,
                         "group": "started",
                     },
                     {
                         "name": "Done",
-                        "color": "#f2c94c",
+                        "color": "#16A34A",
                         "sequence": 45000,
                         "group": "completed",
                     },
                     {
                         "name": "Cancelled",
-                        "color": "#4cb782",
+                        "color": "#EF4444",
                         "sequence": 55000,
                         "group": "cancelled",
                     },
@@ -200,9 +238,11 @@ class ProjectViewSet(BaseViewSet):
                     ]
                 )
 
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
+                data = serializer.data
+                data["sort_order"] = project_member.sort_order
+                return Response(data, status=status.HTTP_201_CREATED)
             return Response(
-                [serializer.errors[error][0] for error in serializer.errors],
+                serializer.errors,
                 status=status.HTTP_400_BAD_REQUEST,
             )
         except IntegrityError as e:
@@ -560,17 +600,34 @@ class AddMemberToProjectEndpoint(BaseAPIView):
                     {"error": "Atleast one member is required"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
+            bulk_project_members = []
 
-            project_members = ProjectMember.objects.bulk_create(
-                [
+            project_members = (
+                ProjectMember.objects.filter(
+                    workspace=self.workspace,
+                    member_id__in=[member.get("member_id") for member in members],
+                )
+                .values("member_id")
+                .annotate(sort_order_min=Min("sort_order"))
+            )
+
+            for member in members:
+                sort_order = [
+                    project_member.get("sort_order")
+                    for project_member in project_members
+                ]
+                bulk_project_members.append(
                     ProjectMember(
                         member_id=member.get("member_id"),
                         role=member.get("role", 10),
                         project_id=project_id,
                         workspace_id=project.workspace_id,
+                        sort_order=sort_order[0] - 10000 if len(sort_order) else 65535,
                     )
-                    for member in members
-                ],
+                )
+
+            project_members = ProjectMember.objects.bulk_create(
+                bulk_project_members,
                 batch_size=10,
                 ignore_conflicts=True,
             )
@@ -760,11 +817,26 @@ class ProjectJoinEndpoint(BaseAPIView):
                 member=request.user, workspace__slug=slug
             )
 
+            smallest_sort_order = (
+                ProjectMember.objects.filter(
+                    workspace__slug=slug, member=request.user
+                )
+                .aggregate(smallest=Min("sort_order"))
+                .get("smallest", 65535)
+            )
+
+            if smallest_sort_order is None:
+                smallest_sort_order = 55535
+            else:
+                smallest_sort_order = smallest_sort_order - 10000
+
+
             workspace_role = workspace_member.role
             workspace = workspace_member.workspace
 
-            ProjectMember.objects.bulk_create(
-                [
+            bulk_project_members = []
+            for project_id in project_ids:
+                bulk_project_members.append(
                     ProjectMember(
                         project_id=project_id,
                         member=request.user,
@@ -773,9 +845,14 @@ class ProjectJoinEndpoint(BaseAPIView):
                         else (15 if workspace_role == 10 else workspace_role),
                         workspace=workspace,
                         created_by=request.user,
+                        sort_order=smallest_sort_order,
                     )
-                    for project_id in project_ids
-                ],
+                )
+
+                smallest_sort_order = smallest_sort_order - 10000
+
+            ProjectMember.objects.bulk_create(
+                bulk_project_members,
                 ignore_conflicts=True,
             )
 
@@ -812,11 +889,15 @@ class ProjectUserViewsEndpoint(BaseAPIView):
 
             view_props = project_member.view_props
             default_props = project_member.default_props
+            preferences = project_member.preferences
+            sort_order = project_member.sort_order
 
             project_member.view_props = request.data.get("view_props", view_props)
             project_member.default_props = request.data.get(
                 "default_props", default_props
             )
+            project_member.preferences = request.data.get("preferences", preferences)
+            project_member.sort_order = request.data.get("sort_order", sort_order)
 
             project_member.save()
 

apiserver/plane/api/views/search.py

@@ -20,7 +20,7 @@ class GlobalSearchEndpoint(BaseAPIView):
     also show related workspace if found
     """
 
-    def filter_workspaces(self, query, slug, project_id):
+    def filter_workspaces(self, query, slug, project_id, workspace_search):
         fields = ["name"]
         q = Q()
         for field in fields:
@@ -31,8 +31,8 @@ class GlobalSearchEndpoint(BaseAPIView):
             .values("name", "id", "slug")
         )
 
-    def filter_projects(self, query, slug, project_id):
-        fields = ["name"]
+    def filter_projects(self, query, slug, project_id, workspace_search):
+        fields = ["name", "identifier"]
         q = Q()
         for field in fields:
             q |= Q(**{f"{field}__icontains": query})
@@ -46,8 +46,8 @@ class GlobalSearchEndpoint(BaseAPIView):
             .values("name", "id", "identifier", "workspace__slug")
         )
 
-    def filter_issues(self, query, slug, project_id):
-        fields = ["name", "sequence_id"]
+    def filter_issues(self, query, slug, project_id, workspace_search):
+        fields = ["name", "sequence_id", "project__identifier"]
         q = Q()
         for field in fields:
             if field == "sequence_id":
@@ -56,111 +56,123 @@ class GlobalSearchEndpoint(BaseAPIView):
                     q |= Q(**{"sequence_id": sequence_id})
             else:
                 q |= Q(**{f"{field}__icontains": query})
-        return (
-            Issue.issue_objects.filter(
-                q,
-                project__project_projectmember__member=self.request.user,
-                workspace__slug=slug,
-                project_id=project_id,
-            )
-            .distinct()
-            .values(
-                "name",
-                "id",
-                "sequence_id",
-                "project__identifier",
-                "project_id",
-                "workspace__slug",
-            )
+
+        issues = Issue.issue_objects.filter(
+            q,
+            project__project_projectmember__member=self.request.user,
+            workspace__slug=slug,
         )
 
-    def filter_cycles(self, query, slug, project_id):
+        if workspace_search == "false" and project_id:
+            issues = issues.filter(project_id=project_id)
+
+        return issues.distinct().values(
+            "name",
+            "id",
+            "sequence_id",
+            "project__identifier",
+            "project_id",
+            "workspace__slug",
+        )
+
+    def filter_cycles(self, query, slug, project_id, workspace_search):
         fields = ["name"]
         q = Q()
         for field in fields:
             q |= Q(**{f"{field}__icontains": query})
-        return (
-            Cycle.objects.filter(
-                q,
-                project__project_projectmember__member=self.request.user,
-                workspace__slug=slug,
-                project_id=project_id,
-            )
-            .distinct()
-            .values(
-                "name",
-                "id",
-                "project_id",
-                "workspace__slug",
-            )
+
+        cycles = Cycle.objects.filter(
+            q,
+            project__project_projectmember__member=self.request.user,
+            workspace__slug=slug,
         )
 
-    def filter_modules(self, query, slug, project_id):
+        if workspace_search == "false" and project_id:
+            cycles = cycles.filter(project_id=project_id)
+
+        return cycles.distinct().values(
+            "name",
+            "id",
+            "project_id",
+            "project__identifier",
+            "workspace__slug",
+        )
+
+    def filter_modules(self, query, slug, project_id, workspace_search):
         fields = ["name"]
         q = Q()
         for field in fields:
             q |= Q(**{f"{field}__icontains": query})
-        return (
-            Module.objects.filter(
-                q,
-                project__project_projectmember__member=self.request.user,
-                workspace__slug=slug,
-                project_id=project_id,
-            )
-            .distinct()
-            .values(
-                "name",
-                "id",
-                "project_id",
-                "workspace__slug",
-            )
+
+        modules = Module.objects.filter(
+            q,
+            project__project_projectmember__member=self.request.user,
+            workspace__slug=slug,
         )
 
-    def filter_pages(self, query, slug, project_id):
+        if workspace_search == "false" and project_id:
+            modules = modules.filter(project_id=project_id)
+
+        return modules.distinct().values(
+            "name",
+            "id",
+            "project_id",
+            "project__identifier",
+            "workspace__slug",
+        )
+
+    def filter_pages(self, query, slug, project_id, workspace_search):
         fields = ["name"]
         q = Q()
         for field in fields:
             q |= Q(**{f"{field}__icontains": query})
-        return (
-            Page.objects.filter(
-                q,
-                project__project_projectmember__member=self.request.user,
-                workspace__slug=slug,
-                project_id=project_id,
-            )
-            .distinct()
-            .values(
-                "name",
-                "id",
-                "project_id",
-                "workspace__slug",
-            )
+
+        pages = Page.objects.filter(
+            q,
+            project__project_projectmember__member=self.request.user,
+            workspace__slug=slug,
         )
 
-    def filter_views(self, query, slug, project_id):
+        if workspace_search == "false" and project_id:
+            pages = pages.filter(project_id=project_id)
+
+        return pages.distinct().values(
+            "name",
+            "id",
+            "project_id",
+            "project__identifier",
+            "workspace__slug",
+        )
+
+    def filter_views(self, query, slug, project_id, workspace_search):
         fields = ["name"]
         q = Q()
         for field in fields:
             q |= Q(**{f"{field}__icontains": query})
-        return (
-            IssueView.objects.filter(
-                q,
-                project__project_projectmember__member=self.request.user,
-                workspace__slug=slug,
-                project_id=project_id,
-            )
-            .distinct()
-            .values(
-                "name",
-                "id",
-                "project_id",
-                "workspace__slug",
-            )
+
+        issue_views = IssueView.objects.filter(
+            q,
+            project__project_projectmember__member=self.request.user,
+            workspace__slug=slug,
         )
 
-    def get(self, request, slug, project_id):
+        if workspace_search == "false" and project_id:
+            issue_views = issue_views.filter(project_id=project_id)
+
+        return issue_views.distinct().values(
+            "name",
+            "id",
+            "project_id",
+            "project__identifier",
+            "workspace__slug",
+        )
+
+    def get(self, request, slug):
         try:
             query = request.query_params.get("search", False)
+            workspace_search = request.query_params.get("workspace_search", "false")
+            project_id = request.query_params.get("project_id", False)
+
             if not query:
                 return Response(
                     {
@@ -191,7 +203,7 @@ class GlobalSearchEndpoint(BaseAPIView):
 
             for model in MODELS_MAPPER.keys():
                 func = MODELS_MAPPER.get(model, None)
-                results[model] = func(query, slug, project_id)
+                results[model] = func(query, slug, project_id, workspace_search)
             return Response({"results": results}, status=status.HTTP_200_OK)
 
         except Exception as e:
@@ -206,6 +218,7 @@ class IssueSearchEndpoint(BaseAPIView):
     def get(self, request, slug, project_id):
         try:
             query = request.query_params.get("search", False)
+            workspace_search = request.query_params.get("workspace_search", "false")
             parent = request.query_params.get("parent", "false")
             blocker_blocked_by = request.query_params.get("blocker_blocked_by", "false")
             cycle = request.query_params.get("cycle", "false")
@@ -216,10 +229,12 @@ class IssueSearchEndpoint(BaseAPIView):
 
             issues = Issue.issue_objects.filter(
                 workspace__slug=slug,
-                project_id=project_id,
                 project__project_projectmember__member=self.request.user,
             )
 
+            if workspace_search == "false":
+                issues = issues.filter(project_id=project_id)
+
             if query:
                 issues = search_issues(query, issues)
 
@@ -251,12 +266,12 @@ class IssueSearchEndpoint(BaseAPIView):
             if module == "true":
                 issues = issues.exclude(issue_module__isnull=False)
 
-
             return Response(
                 issues.values(
                     "name",
                     "id",
                     "sequence_id",
+                    "project__name",
                     "project__identifier",
                     "project_id",
                     "workspace__slug",

apiserver/plane/api/views/workspace.py

@@ -13,12 +13,18 @@ from django.core.exceptions import ValidationError
 from django.core.validators import validate_email
 from django.contrib.sites.shortcuts import get_current_site
 from django.db.models import (
-    CharField,
-    Count,
+    Prefetch,
     OuterRef,
     Func,
     F,
     Q,
+    Count,
+    Case,
+    Value,
+    CharField,
+    When,
+    Max,
+    IntegerField,
 )
 from django.db.models.functions import ExtractWeek, Cast, ExtractDay
 from django.db.models.fields import DateField
@@ -39,6 +45,8 @@ from plane.api.serializers import (
     UserLiteSerializer,
     ProjectMemberSerializer,
     WorkspaceThemeSerializer,
+    IssueActivitySerializer,
+    IssueLiteSerializer,
 )
 from plane.api.views.base import BaseAPIView
 from . import BaseViewSet
@@ -60,9 +68,23 @@ from plane.db.models import (
     PageFavorite,
     Page,
     IssueViewFavorite,
+    IssueLink,
+    IssueAttachment,
+    IssueSubscriber,
+    Project,
+    Label,
+    WorkspaceMember,
+    CycleIssue,
+)
+from plane.api.permissions import (
+    WorkSpaceBasePermission,
+    WorkSpaceAdminPermission,
+    WorkspaceEntityPermission,
+    WorkspaceViewerPermission,
 )
-from plane.api.permissions import WorkSpaceBasePermission, WorkSpaceAdminPermission
 from plane.bgtasks.workspace_invitation_task import workspace_invitation
+from plane.utils.issue_filters import issue_filters
+from plane.utils.grouper import group_results
 
 
 class WorkSpaceViewSet(BaseViewSet):
@@ -101,6 +123,7 @@ class WorkSpaceViewSet(BaseViewSet):
             .filter(workspace_member__member=self.request.user)
             .annotate(total_members=member_count)
             .annotate(total_issues=issue_count)
+            .select_related("owner")
         )
 
     def create(self, request):
@@ -596,6 +619,19 @@ class WorkSpaceMemberViewSet(BaseViewSet):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
+            # Check for the only member in the workspace
+            if (
+                workspace_member.role == 20
+                and WorkspaceMember.objects.filter(
+                    workspace__slug=slug, role=20
+                ).count()
+                == 1
+            ):
+                return Response(
+                    {"error": "Cannot delete the only Admin for the workspace"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
             # Delete the user also from all the projects
             ProjectMember.objects.filter(
                 workspace__slug=slug, member=workspace_member.member
@@ -1008,3 +1044,391 @@ class WorkspaceThemeViewSet(BaseViewSet):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+
+class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
+
+    def get(self, request, slug, user_id):
+        try:
+            filters = issue_filters(request.query_params, "GET")
+
+            state_distribution = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug,
+                    assignees__in=[user_id],
+                    project__project_projectmember__member=request.user,
+                )
+                .filter(**filters)
+                .annotate(state_group=F("state__group"))
+                .values("state_group")
+                .annotate(state_count=Count("state_group"))
+                .order_by("state_group")
+            )
+
+            priority_order = ["urgent", "high", "medium", "low", None]
+
+            priority_distribution = (
+                Issue.objects.filter(
+                    workspace__slug=slug,
+                    assignees__in=[user_id],
+                    project__project_projectmember__member=request.user,
+                )
+                .filter(**filters)
+                .values("priority")
+                .annotate(priority_count=Count("priority"))
+                .annotate(
+                    priority_order=Case(
+                        *[
+                            When(priority=p, then=Value(i))
+                            for i, p in enumerate(priority_order)
+                        ],
+                        default=Value(len(priority_order)),
+                        output_field=IntegerField(),
+                    )
+                )
+                .order_by("priority_order")
+            )
+
+            created_issues = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug,
+                    assignees__in=[user_id],
+                    project__project_projectmember__member=request.user,
+                    created_by_id=user_id,
+                )
+                .filter(**filters)
+                .count()
+            )
+
+            assigned_issues_count = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug,
+                    assignees__in=[user_id],
+                    project__project_projectmember__member=request.user,
+                )
+                .filter(**filters)
+                .count()
+            )
+
+            pending_issues_count = (
+                Issue.issue_objects.filter(
+                    ~Q(state__group__in=["completed", "cancelled"]),
+                    workspace__slug=slug,
+                    assignees__in=[user_id],
+                    project__project_projectmember__member=request.user,
+                )
+                .filter(**filters)
+                .count()
+            )
+
+            completed_issues_count = (
+                Issue.issue_objects.filter(
+                    workspace__slug=slug,
+                    assignees__in=[user_id],
+                    state__group="completed",
+                    project__project_projectmember__member=request.user,
+                )
+                .filter(**filters)
+                .count()
+            )
+
+            subscribed_issues_count = (
+                IssueSubscriber.objects.filter(
+                    workspace__slug=slug,
+                    subscriber_id=user_id,
+                    project__project_projectmember__member=request.user,
+                )
+                .filter(**filters)
+                .count()
+            )
+
+            upcoming_cycles = CycleIssue.objects.filter(
+                workspace__slug=slug,
+                cycle__start_date__gt=timezone.now().date(),
+                issue__assignees__in=[user_id,]
+            ).values("cycle__name", "cycle__id", "cycle__project_id")
+
+            present_cycle = CycleIssue.objects.filter(
+                workspace__slug=slug,
+                cycle__start_date__lt=timezone.now().date(),
+                cycle__end_date__gt=timezone.now().date(),
+                issue__assignees__in=[user_id,]
+            ).values("cycle__name", "cycle__id", "cycle__project_id")
+
+            return Response(
+                {
+                    "state_distribution": state_distribution,
+                    "priority_distribution": priority_distribution,
+                    "created_issues": created_issues,
+                    "assigned_issues": assigned_issues_count,
+                    "completed_issues": completed_issues_count,
+                    "pending_issues": pending_issues_count,
+                    "subscribed_issues": subscribed_issues_count,
+                    "present_cycles": present_cycle,
+                    "upcoming_cycles": upcoming_cycles, 
+                }
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
+class WorkspaceUserActivityEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    def get(self, request, slug, user_id):
+        try:
+
+            projects = request.query_params.getlist("project", [])
+
+            queryset = IssueActivity.objects.filter(
+                workspace__slug=slug,
+                project__project_projectmember__member=request.user,
+                actor=user_id,
+            ).select_related("actor", "workspace", "issue", "project")
+
+            if projects:
+                queryset = queryset.filter(project__in=projects)
+
+            return self.paginate(
+                request=request,
+                queryset=queryset,
+                on_results=lambda issue_activities: IssueActivitySerializer(
+                    issue_activities, many=True
+                ).data,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
+class WorkspaceUserProfileEndpoint(BaseAPIView):
+
+    def get(self, request, slug, user_id):
+        try:
+            user_data = User.objects.get(pk=user_id)
+
+            requesting_workspace_member = WorkspaceMember.objects.get(workspace__slug=slug, member=request.user)
+            projects = []
+            if requesting_workspace_member.role >= 10:
+                projects = (
+                    Project.objects.filter(
+                        workspace__slug=slug,
+                        project_projectmember__member=request.user,
+                    )
+                    .annotate(
+                        created_issues=Count(
+                            "project_issue", filter=Q(project_issue__created_by_id=user_id)
+                        )
+                    )
+                    .annotate(
+                        assigned_issues=Count(
+                            "project_issue",
+                            filter=Q(project_issue__assignees__in=[user_id]),
+                        )
+                    )
+                    .annotate(
+                        completed_issues=Count(
+                            "project_issue",
+                            filter=Q(
+                                project_issue__completed_at__isnull=False,
+                                project_issue__assignees__in=[user_id],
+                            ),
+                        )
+                    )
+                    .annotate(
+                        pending_issues=Count(
+                            "project_issue",
+                            filter=Q(
+                                project_issue__state__group__in=[
+                                    "backlog",
+                                    "unstarted",
+                                    "started",
+                                ],
+                                project_issue__assignees__in=[user_id],
+                            ),
+                        )
+                    )
+                    .values(
+                        "id",
+                        "name",
+                        "identifier",
+                        "emoji",
+                        "icon_prop",
+                        "created_issues",
+                        "assigned_issues",
+                        "completed_issues",
+                        "pending_issues",
+                    )
+                )
+
+            return Response(
+                {
+                    "project_data": projects,
+                    "user_data": {
+                        "email": user_data.email,
+                        "first_name": user_data.first_name,
+                        "last_name": user_data.last_name,
+                        "avatar": user_data.avatar,
+                        "cover_image": user_data.cover_image,
+                        "date_joined": user_data.date_joined,
+                        "user_timezone": user_data.user_timezone,
+                    },
+                },
+                status=status.HTTP_200_OK,
+            )
+        except WorkspaceMember.DoesNotExist:
+            return Response({"error": "Forbidden"}, status=status.HTTP_403_FORBIDDEN)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
+class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceViewerPermission,
+    ]
+
+    def get(self, request, slug, user_id):
+        try:
+            filters = issue_filters(request.query_params, "GET")
+            order_by_param = request.GET.get("order_by", "-created_at")
+            issue_queryset = (
+                Issue.issue_objects.filter(
+                    Q(assignees__in=[user_id])
+                    | Q(created_by_id=user_id)
+                    | Q(issue_subscribers__subscriber_id=user_id),
+                    workspace__slug=slug,
+                    project__project_projectmember__member=request.user,
+                )
+                .filter(**filters)
+                .annotate(
+                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
+                .select_related("project", "workspace", "state", "parent")
+                .prefetch_related("assignees", "labels")
+                .order_by("-created_at")
+                .annotate(
+                    link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
+                .annotate(
+                    attachment_count=IssueAttachment.objects.filter(
+                        issue=OuterRef("id")
+                    )
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
+            ).distinct()
+
+            # Priority Ordering
+            if order_by_param == "priority" or order_by_param == "-priority":
+                priority_order = (
+                    priority_order
+                    if order_by_param == "priority"
+                    else priority_order[::-1]
+                )
+                issue_queryset = issue_queryset.annotate(
+                    priority_order=Case(
+                        *[
+                            When(priority=p, then=Value(i))
+                            for i, p in enumerate(priority_order)
+                        ],
+                        output_field=CharField(),
+                    )
+                ).order_by("priority_order")
+
+            # State Ordering
+            elif order_by_param in [
+                "state__name",
+                "state__group",
+                "-state__name",
+                "-state__group",
+            ]:
+                state_order = (
+                    state_order
+                    if order_by_param in ["state__name", "state__group"]
+                    else state_order[::-1]
+                )
+                issue_queryset = issue_queryset.annotate(
+                    state_order=Case(
+                        *[
+                            When(state__group=state_group, then=Value(i))
+                            for i, state_group in enumerate(state_order)
+                        ],
+                        default=Value(len(state_order)),
+                        output_field=CharField(),
+                    )
+                ).order_by("state_order")
+            # assignee and label ordering
+            elif order_by_param in [
+                "labels__name",
+                "-labels__name",
+                "assignees__first_name",
+                "-assignees__first_name",
+            ]:
+                issue_queryset = issue_queryset.annotate(
+                    max_values=Max(
+                        order_by_param[1::]
+                        if order_by_param.startswith("-")
+                        else order_by_param
+                    )
+                ).order_by(
+                    "-max_values" if order_by_param.startswith("-") else "max_values"
+                )
+            else:
+                issue_queryset = issue_queryset.order_by(order_by_param)
+
+            issues = IssueLiteSerializer(issue_queryset, many=True).data
+
+            ## Grouping the results
+            group_by = request.GET.get("group_by", False)
+            if group_by:
+                return Response(
+                    group_results(issues, group_by), status=status.HTTP_200_OK
+                )
+
+            return Response(issues, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
+class WorkspaceLabelsEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceViewerPermission,
+    ]
+
+    def get(self, request, slug):
+        try:
+            labels = Label.objects.filter(
+                workspace__slug=slug,
+                project__project_projectmember__member=request.user,
+            ).values("parent", "name", "color", "id", "project_id", "workspace__slug")
+            return Response(labels, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )

apiserver/plane/bgtasks/issue_activites_task.py

@@ -70,7 +70,7 @@ def track_parent(
                     issue_id=issue_id,
                     actor=actor,
                     verb="updated",
-                    old_value=f"{project.identifier}-{old_parent.sequence_id}",
+                    old_value=f"{old_parent.project.identifier}-{old_parent.sequence_id}",
                     new_value=None,
                     field="parent",
                     project=project,
@@ -88,10 +88,10 @@ def track_parent(
                     issue_id=issue_id,
                     actor=actor,
                     verb="updated",
-                    old_value=f"{project.identifier}-{old_parent.sequence_id}"
+                    old_value=f"{old_parent.project.identifier}-{old_parent.sequence_id}"
                     if old_parent is not None
                     else None,
-                    new_value=f"{project.identifier}-{new_parent.sequence_id}",
+                    new_value=f"{new_parent.project.identifier}-{new_parent.sequence_id}",
                     field="parent",
                     project=project,
                     workspace=project.workspace,
@@ -376,7 +376,7 @@ def track_assignees(
                         verb="updated",
                         old_value=assignee.email,
                         new_value="",
-                        field="assignee",
+                        field="assignees",
                         project=project,
                         workspace=project.workspace,
                         comment=f"{actor.email} removed assignee {assignee.email}",
@@ -415,11 +415,11 @@ def track_blocks(
                         actor=actor,
                         verb="updated",
                         old_value="",
-                        new_value=f"{project.identifier}-{issue.sequence_id}",
+                        new_value=f"{issue.project.identifier}-{issue.sequence_id}",
                         field="blocks",
                         project=project,
                         workspace=project.workspace,
-                        comment=f"{actor.email} added blocking issue {project.identifier}-{issue.sequence_id}",
+                        comment=f"{actor.email} added blocking issue {issue.project.identifier}-{issue.sequence_id}",
                         new_identifier=issue.id,
                     )
                 )
@@ -436,12 +436,12 @@ def track_blocks(
                         issue_id=issue_id,
                         actor=actor,
                         verb="updated",
-                        old_value=f"{project.identifier}-{issue.sequence_id}",
+                        old_value=f"{issue.project.identifier}-{issue.sequence_id}",
                         new_value="",
                         field="blocks",
                         project=project,
                         workspace=project.workspace,
-                        comment=f"{actor.email} removed blocking issue {project.identifier}-{issue.sequence_id}",
+                        comment=f"{actor.email} removed blocking issue {issue.project.identifier}-{issue.sequence_id}",
                         old_identifier=issue.id,
                     )
                 )
@@ -477,11 +477,11 @@ def track_blockings(
                         actor=actor,
                         verb="updated",
                         old_value="",
-                        new_value=f"{project.identifier}-{issue.sequence_id}",
+                        new_value=f"{issue.project.identifier}-{issue.sequence_id}",
                         field="blocking",
                         project=project,
                         workspace=project.workspace,
-                        comment=f"{actor.email} added blocked by issue {project.identifier}-{issue.sequence_id}",
+                        comment=f"{actor.email} added blocked by issue {issue.project.identifier}-{issue.sequence_id}",
                         new_identifier=issue.id,
                     )
                 )
@@ -498,12 +498,12 @@ def track_blockings(
                         issue_id=issue_id,
                         actor=actor,
                         verb="updated",
-                        old_value=f"{project.identifier}-{issue.sequence_id}",
+                        old_value=f"{issue.project.identifier}-{issue.sequence_id}",
                         new_value="",
                         field="blocking",
                         project=project,
                         workspace=project.workspace,
-                        comment=f"{actor.email} removed blocked by issue {project.identifier}-{issue.sequence_id}",
+                        comment=f"{actor.email} removed blocked by issue {issue.project.identifier}-{issue.sequence_id}",
                         old_identifier=issue.id,
                     )
                 )
@@ -558,22 +558,62 @@ def track_estimate_points(
             )
 
 
-def track_archive_in(
+def track_archive_at(
     requested_data, current_instance, issue_id, project, actor, issue_activities
 ):
-    issue_activities.append(
-        IssueActivity(
-            issue_id=issue_id,
-            project=project,
-            workspace=project.workspace,
-            comment=f"{actor.email} has restored the issue",
-            verb="updated",
-            actor=actor,
-            field="archvied_at",
-            old_value="archive",
-            new_value="restore",
+    if requested_data.get("archived_at") is None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                project=project,
+                workspace=project.workspace,
+                comment=f"{actor.email} has restored the issue",
+                verb="updated",
+                actor=actor,
+                field="archived_at",
+                old_value="archive",
+                new_value="restore",
+            )
+        )
+    else:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                project=project,
+                workspace=project.workspace,
+                comment=f"Plane has archived the issue",
+                verb="updated",
+                actor=actor,
+                field="archived_at",
+                old_value=None,
+                new_value="archive",
+            )
+        )
+
+
+def track_closed_to(
+    requested_data, current_instance, issue_id, project, actor, issue_activities
+):
+    if requested_data.get("closed_to") is not None:
+        updated_state = State.objects.get(
+            pk=requested_data.get("closed_to"), project=project
+        )
+
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="updated",
+                old_value=None,
+                new_value=updated_state.name,
+                field="state",
+                project=project,
+                workspace=project.workspace,
+                comment=f"Plane updated the state to {updated_state.name}",
+                old_identifier=None,
+                new_identifier=updated_state.id,
+            )
         )
-    )
 
 
 def update_issue_activity(
@@ -592,7 +632,8 @@ def update_issue_activity(
         "blocks_list": track_blocks,
         "blockers_list": track_blockings,
         "estimate_point": track_estimate_points,
-        "archived_in": track_archive_in,
+        "archived_at": track_archive_at,
+        "closed_to": track_closed_to,
     }
 
     requested_data = json.loads(requested_data) if requested_data is not None else None
@@ -918,6 +959,11 @@ def update_link_activity(
 def delete_link_activity(
     requested_data, current_instance, issue_id, project, actor, issue_activities
 ):
+
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+
     issue_activities.append(
         IssueActivity(
             issue_id=issue_id,
@@ -927,6 +973,8 @@ def delete_link_activity(
             verb="deleted",
             actor=actor,
             field="link",
+            old_value=current_instance.get("url", ""),
+            new_value=""
         )
     )
 
@@ -948,7 +996,7 @@ def create_attachment_activity(
             verb="created",
             actor=actor,
             field="attachment",
-            new_value=current_instance.get("access", ""),
+            new_value=current_instance.get("asset", ""),
             new_identifier=current_instance.get("id", None),
         )
     )
@@ -970,11 +1018,16 @@ def delete_attachment_activity(
     )
 
 
-
 # Receive message from room group
 @shared_task
 def issue_activity(
-    type, requested_data, current_instance, issue_id, actor_id, project_id
+    type,
+    requested_data,
+    current_instance,
+    issue_id,
+    actor_id,
+    project_id,
+    subscriber=True,
 ):
     try:
         issue_activities = []
@@ -982,16 +1035,29 @@ def issue_activity(
         actor = User.objects.get(pk=actor_id)
         project = Project.objects.get(pk=project_id)
 
-        issue = Issue.objects.filter(pk=issue_id).first()
-        if issue is not None:
-            issue.updated_at = timezone.now()
-            issue.save()
-            
-        # add the user to issue subscriber
-        try:
-            _ = IssueSubscriber.objects.create(issue_id=issue_id, subscriber=actor)
-        except Exception as e:
-            pass
+        if type not in [
+            "cycle.activity.created",
+            "cycle.activity.deleted",
+            "module.activity.created",
+            "module.activity.deleted",
+        ]:
+            issue = Issue.objects.filter(pk=issue_id).first()
+
+            if issue is not None:
+                try:
+                    issue.updated_at = timezone.now()
+                    issue.save(update_fields=["updated_at"])
+                except Exception as e:
+                    pass
+
+            if subscriber:
+                # add the user to issue subscriber
+                try:
+                    _ = IssueSubscriber.objects.get_or_create(
+                        issue_id=issue_id, subscriber=actor
+                    )
+                except Exception as e:
+                    pass
 
         ACTIVITY_MAPPER = {
             "issue.activity.created": create_issue_activity,
@@ -1043,55 +1109,80 @@ def issue_activity(
             except Exception as e:
                 capture_exception(e)
 
-        # Create Notifications
-        bulk_notifications = []
+        if type not in [
+            "cycle.activity.created",
+            "cycle.activity.deleted",
+            "module.activity.created",
+            "module.activity.deleted",
+        ]:
+            # Create Notifications
+            bulk_notifications = []
 
-        issue_subscribers = list(
-            IssueSubscriber.objects.filter(project=project, issue_id=issue_id)
-            .exclude(subscriber_id=actor_id)
-            .values_list("subscriber", flat=True)
-        )
+            issue_subscribers = list(
+                IssueSubscriber.objects.filter(project=project, issue_id=issue_id)
+                .exclude(subscriber_id=actor_id)
+                .values_list("subscriber", flat=True)
+            )
 
-        issue_assignees = list(
-            IssueAssignee.objects.filter(project=project, issue_id=issue_id)
-            .exclude(assignee_id=actor_id)
-            .values_list("assignee", flat=True)
-        )
+            issue_assignees = list(
+                IssueAssignee.objects.filter(project=project, issue_id=issue_id)
+                .exclude(assignee_id=actor_id)
+                .values_list("assignee", flat=True)
+            )
 
-        issue_subscribers = issue_subscribers + issue_assignees
+            issue_subscribers = issue_subscribers + issue_assignees
 
-        if issue.created_by_id:
-            issue_subscribers = issue_subscribers + [issue.created_by_id]
+            issue = Issue.objects.filter(pk=issue_id).first()
 
-        issue = Issue.objects.get(project=project, pk=issue_id)
-        for subscriber in issue_subscribers:
-            for issue_activity in issue_activities_created:
-                bulk_notifications.append(
-                    Notification(
-                        workspace=project.workspace,
-                        sender="in_app:issue_activities",
-                        triggered_by_id=actor_id,
-                        receiver_id=subscriber,
-                        entity_identifier=issue_id,
-                        entity_name="issue",
-                        project=project,
-                        title=issue_activity.comment,
-                        data={
-                            "issue": {
-                                "id": str(issue_id),
-                                "name": str(issue.name),
-                                "identifier": str(project.identifier),
-                                "sequence_id": issue.sequence_id,
-                                "state_name": issue.state.name,
-                                "state_group": issue.state.group,
+            # Add bot filtering
+            if (
+                issue is not None
+                and issue.created_by_id is not None
+                and not issue.created_by.is_bot
+                and str(issue.created_by_id) != str(actor_id)
+            ):
+                issue_subscribers = issue_subscribers + [issue.created_by_id]
+
+            for subscriber in issue_subscribers:
+                for issue_activity in issue_activities_created:
+                    bulk_notifications.append(
+                        Notification(
+                            workspace=project.workspace,
+                            sender="in_app:issue_activities",
+                            triggered_by_id=actor_id,
+                            receiver_id=subscriber,
+                            entity_identifier=issue_id,
+                            entity_name="issue",
+                            project=project,
+                            title=issue_activity.comment,
+                            data={
+                                "issue": {
+                                    "id": str(issue_id),
+                                    "name": str(issue.name),
+                                    "identifier": str(issue.project.identifier),
+                                    "sequence_id": issue.sequence_id,
+                                    "state_name": issue.state.name,
+                                    "state_group": issue.state.group,
+                                },
+                                "issue_activity": {
+                                    "id": str(issue_activity.id),
+                                    "verb": str(issue_activity.verb),
+                                    "field": str(issue_activity.field),
+                                    "actor": str(issue_activity.actor_id),
+                                    "new_value": str(issue_activity.new_value),
+                                    "old_value": str(issue_activity.old_value),
+                                    "issue_comment": str(
+                                        issue_activity.issue_comment.comment_stripped
+                                        if issue_activity.issue_comment is not None
+                                        else ""
+                                    ),
+                                },
                             },
-                            "issue_activity": str(issue_activity.id),
-                        },
+                        )
                     )
-                )
 
-        # Bulk create notifications
-        Notification.objects.bulk_create(bulk_notifications, batch_size=100)
+            # Bulk create notifications
+            Notification.objects.bulk_create(bulk_notifications, batch_size=100)
 
         return
     except Exception as e:

apiserver/plane/bgtasks/issue_automation_task.py

@@ -1,4 +1,5 @@
-# Python improts
+# Python imports
+import json
 from datetime import timedelta
 
 # Django imports
@@ -11,7 +12,8 @@ from celery import shared_task
 from sentry_sdk import capture_exception
 
 # Module imports
-from plane.db.models import Issue, Project, IssueActivity, State
+from plane.db.models import Issue, Project, State
+from plane.bgtasks.issue_activites_task import issue_activity
 
 
 @shared_task
@@ -19,6 +21,7 @@ def archive_and_close_old_issues():
     archive_old_issues()
     close_old_issues()
 
+
 def archive_old_issues():
     try:
         # Get all the projects whose archive_in is greater than 0
@@ -46,6 +49,11 @@ def archive_old_issues():
                     Q(issue_module__module__target_date__lt=timezone.now().date())
                     & Q(issue_module__isnull=False)
                 ),
+            ).filter(
+                Q(issue_inbox__status=1)
+                | Q(issue_inbox__status=-1)
+                | Q(issue_inbox__status=2)
+                | Q(issue_inbox__isnull=True)
             )
 
             # Check if Issues
@@ -56,24 +64,21 @@ def archive_old_issues():
                     issues_to_update.append(issue)
 
                 # Bulk Update the issues and log the activity
-                Issue.objects.bulk_update(issues_to_update, ["archived_at"], batch_size=100)
-                IssueActivity.objects.bulk_create(
-                    [
-                        IssueActivity(
-                            issue_id=issue.id,
-                            actor=project.created_by,
-                            verb="updated",
-                            field="archived_at",
-                            project=project,
-                            workspace=project.workspace,
-                            comment="Plane archived the issue",
-                            new_value="archive",
-                            old_value=""
-                        )
-                        for issue in issues_to_update
-                    ],
-                    batch_size=100,
+                Issue.objects.bulk_update(
+                    issues_to_update, ["archived_at"], batch_size=100
                 )
+                [
+                    issue_activity.delay(
+                        type="issue.activity.updated",
+                        requested_data=json.dumps({"archived_at": str(issue.archived_at)}),
+                        actor_id=str(project.created_by_id),
+                        issue_id=issue.id,
+                        project_id=project_id,
+                        current_instance=None,
+                        subscriber=False,
+                    )
+                    for issue in issues_to_update
+                ]
         return
     except Exception as e:
         if settings.DEBUG:
@@ -81,10 +86,13 @@ def archive_old_issues():
         capture_exception(e)
         return
 
+
 def close_old_issues():
     try:
         # Get all the projects whose close_in is greater than 0
-        projects = Project.objects.filter(close_in__gt=0).select_related("default_state")
+        projects = Project.objects.filter(close_in__gt=0).select_related(
+            "default_state"
+        )
 
         for project in projects:
             project_id = project.id
@@ -108,15 +116,19 @@ def close_old_issues():
                     Q(issue_module__module__target_date__lt=timezone.now().date())
                     & Q(issue_module__isnull=False)
                 ),
+            ).filter(
+                Q(issue_inbox__status=1)
+                | Q(issue_inbox__status=-1)
+                | Q(issue_inbox__status=2)
+                | Q(issue_inbox__isnull=True)
             )
 
             # Check if Issues
             if issues:
                 if project.default_state is None:
-                    close_state = project.default_state
-                else:
                     close_state = State.objects.filter(group="cancelled").first()
-
+                else:
+                    close_state = project.default_state
 
                 issues_to_update = []
                 for issue in issues:
@@ -125,24 +137,21 @@ def close_old_issues():
 
                 # Bulk Update the issues and log the activity
                 Issue.objects.bulk_update(issues_to_update, ["state"], batch_size=100)
-                IssueActivity.objects.bulk_create(
-                    [
-                        IssueActivity(
-                            issue_id=issue.id,
-                            actor=project.created_by,
-                            verb="updated",
-                            field="state",
-                            project=project,
-                            workspace=project.workspace,
-                            comment="Plane cancelled the issue",
-                        )
-                        for issue in issues_to_update
-                    ],
-                    batch_size=100,
-                )
+                [
+                    issue_activity.delay(
+                        type="issue.activity.updated",
+                        requested_data=json.dumps({"closed_to": str(issue.state_id)}),
+                        actor_id=str(project.created_by_id),
+                        issue_id=issue.id,
+                        project_id=project_id,
+                        current_instance=None,
+                        subscriber=False,
+                    )
+                    for issue in issues_to_update
+                ]
         return
     except Exception as e:
         if settings.DEBUG:
             print(e)
         capture_exception(e)
-        return
+        return

apiserver/plane/db/migrations/0037_issue_archived_at_project_archive_in_and_more.py

@@ -0,0 +1,266 @@
+# Generated by Django 4.2.3 on 2023-07-19 06:52
+
+from django.conf import settings
+import django.core.validators
+from django.db import migrations, models
+import django.db.models.deletion
+import plane.db.models.user
+import uuid
+
+
+
+def onboarding_default_steps(apps, schema_editor):
+    default_onboarding_schema = {
+        "workspace_join": True,
+        "profile_complete": True,
+        "workspace_create": True,
+        "workspace_invite": True,
+    }
+
+    Model = apps.get_model("db", "User")
+    updated_user = []
+    for obj in Model.objects.filter(is_onboarded=True):
+        obj.onboarding_step = default_onboarding_schema
+        obj.is_tour_completed = True
+        updated_user.append(obj)
+
+    Model.objects.bulk_update(updated_user, ["onboarding_step", "is_tour_completed"], batch_size=100)
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("db", "0036_alter_workspace_organization_size"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="issue",
+            name="archived_at",
+            field=models.DateField(null=True),
+        ),
+        migrations.AddField(
+            model_name="project",
+            name="archive_in",
+            field=models.IntegerField(
+                default=0,
+                validators=[
+                    django.core.validators.MinValueValidator(0),
+                    django.core.validators.MaxValueValidator(12),
+                ],
+            ),
+        ),
+        migrations.AddField(
+            model_name="project",
+            name="close_in",
+            field=models.IntegerField(
+                default=0,
+                validators=[
+                    django.core.validators.MinValueValidator(0),
+                    django.core.validators.MaxValueValidator(12),
+                ],
+            ),
+        ),
+        migrations.AddField(
+            model_name="project",
+            name="default_state",
+            field=models.ForeignKey(
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                related_name="default_state",
+                to="db.state",
+            ),
+        ),
+        migrations.AddField(
+            model_name="user",
+            name="is_tour_completed",
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name="user",
+            name="onboarding_step",
+            field=models.JSONField(default=plane.db.models.user.get_default_onboarding),
+        ),
+        migrations.RunPython(onboarding_default_steps),
+        migrations.CreateModel(
+            name="Notification",
+            fields=[
+                (
+                    "created_at",
+                    models.DateTimeField(auto_now_add=True, verbose_name="Created At"),
+                ),
+                (
+                    "updated_at",
+                    models.DateTimeField(
+                        auto_now=True, verbose_name="Last Modified At"
+                    ),
+                ),
+                (
+                    "id",
+                    models.UUIDField(
+                        db_index=True,
+                        default=uuid.uuid4,
+                        editable=False,
+                        primary_key=True,
+                        serialize=False,
+                        unique=True,
+                    ),
+                ),
+                ("data", models.JSONField(null=True)),
+                ("entity_identifier", models.UUIDField(null=True)),
+                ("entity_name", models.CharField(max_length=255)),
+                ("title", models.TextField()),
+                ("message", models.JSONField(null=True)),
+                ("message_html", models.TextField(blank=True, default="<p></p>")),
+                ("message_stripped", models.TextField(blank=True, null=True)),
+                ("sender", models.CharField(max_length=255)),
+                ("read_at", models.DateTimeField(null=True)),
+                ("snoozed_till", models.DateTimeField(null=True)),
+                ("archived_at", models.DateTimeField(null=True)),
+                (
+                    "created_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_created_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Created By",
+                    ),
+                ),
+                (
+                    "project",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="notifications",
+                        to="db.project",
+                    ),
+                ),
+                (
+                    "receiver",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="received_notifications",
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+                (
+                    "triggered_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="triggered_notifications",
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+                (
+                    "updated_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_updated_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Last Modified By",
+                    ),
+                ),
+                (
+                    "workspace",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="notifications",
+                        to="db.workspace",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Notification",
+                "verbose_name_plural": "Notifications",
+                "db_table": "notifications",
+                "ordering": ("-created_at",),
+            },
+        ),
+        migrations.CreateModel(
+            name="IssueSubscriber",
+            fields=[
+                (
+                    "created_at",
+                    models.DateTimeField(auto_now_add=True, verbose_name="Created At"),
+                ),
+                (
+                    "updated_at",
+                    models.DateTimeField(
+                        auto_now=True, verbose_name="Last Modified At"
+                    ),
+                ),
+                (
+                    "id",
+                    models.UUIDField(
+                        db_index=True,
+                        default=uuid.uuid4,
+                        editable=False,
+                        primary_key=True,
+                        serialize=False,
+                        unique=True,
+                    ),
+                ),
+                (
+                    "created_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_created_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Created By",
+                    ),
+                ),
+                (
+                    "issue",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="issue_subscribers",
+                        to="db.issue",
+                    ),
+                ),
+                (
+                    "project",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="project_%(class)s",
+                        to="db.project",
+                    ),
+                ),
+                (
+                    "subscriber",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="issue_subscribers",
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+                (
+                    "updated_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_updated_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Last Modified By",
+                    ),
+                ),
+                (
+                    "workspace",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="workspace_%(class)s",
+                        to="db.workspace",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Issue Subscriber",
+                "verbose_name_plural": "Issue Subscribers",
+                "db_table": "issue_subscribers",
+                "ordering": ("-created_at",),
+                "unique_together": {("issue", "subscriber")},
+            },
+        ),
+    ]

apiserver/plane/db/migrations/0038_auto_20230720_1505.py

@@ -0,0 +1,35 @@
+# Generated by Django 4.2.3 on 2023-07-20 09:35
+
+from django.db import migrations, models
+
+
+def restructure_theming(apps, schema_editor):
+    Model = apps.get_model("db", "User")
+    updated_user = []
+    for obj in Model.objects.exclude(theme={}).all():
+        current_theme = obj.theme
+        updated_theme = {
+            "primary": current_theme.get("accent", ""),
+            "background": current_theme.get("bgBase", ""),
+            "sidebarBackground": current_theme.get("sidebar", ""),
+            "text": current_theme.get("textBase", ""),
+            "sidebarText": current_theme.get("textBase", ""),
+            "palette": f"""{current_theme.get("bgBase","")},{current_theme.get("textBase", "")},{current_theme.get("accent", "")},{current_theme.get("sidebar","")},{current_theme.get("textBase", "")}""",
+            "darkPalette": current_theme.get("darkPalette", "")
+        }
+        obj.theme = updated_theme
+        updated_user.append(obj)
+
+    Model.objects.bulk_update(
+        updated_user, ["theme"], batch_size=100
+    )
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("db", "0037_issue_archived_at_project_archive_in_and_more"),
+    ]
+
+    operations = [
+        migrations.RunPython(restructure_theming)
+    ]

apiserver/plane/db/migrations/0039_auto_20230723_2203.py

@@ -0,0 +1,97 @@
+# Generated by Django 4.2.3 on 2023-07-23 16:33
+import random
+from django.db import migrations, models
+import plane.db.models.workspace
+
+
+def rename_field(apps, schema_editor):
+    Model = apps.get_model("db", "IssueActivity")
+    updated_activity = []
+    for obj in Model.objects.filter(field="assignee"):
+        obj.field = "assignees"
+        updated_activity.append(obj)
+
+    Model.objects.bulk_update(updated_activity, ["field"], batch_size=100)
+
+
+def update_workspace_member_props(apps, schema_editor):
+    Model = apps.get_model("db", "WorkspaceMember")
+
+    updated_workspace_member = []
+
+    for obj in Model.objects.all():
+        if obj.view_props is None:
+            obj.view_props = {
+                "filters": {"type": None},
+                "groupByProperty": None,
+                "issueView": "list",
+                "orderBy": "-created_at",
+                "properties": {
+                    "assignee": True,
+                    "due_date": True,
+                    "key": True,
+                    "labels": True,
+                    "priority": True,
+                    "state": True,
+                    "sub_issue_count": True,
+                    "attachment_count": True,
+                    "link": True,
+                    "estimate": True,
+                    "created_on": True,
+                    "updated_on": True,
+                },
+                "showEmptyGroups": True,
+            }
+        else:
+            current_view_props = obj.view_props
+            obj.view_props = {
+                "filters": {"type": None},
+                "groupByProperty": None,
+                "issueView": "list",
+                "orderBy": "-created_at",
+                "showEmptyGroups": True,
+                "properties": current_view_props,
+            }
+
+        updated_workspace_member.append(obj)
+
+    Model.objects.bulk_update(updated_workspace_member, ["view_props"], batch_size=100)
+
+
+def update_project_member_sort_order(apps, schema_editor):
+    Model = apps.get_model("db", "ProjectMember")
+
+    updated_project_members = []
+
+    for obj in Model.objects.all():
+        obj.sort_order = random.randint(1, 65536)
+        updated_project_members.append(obj)
+
+    Model.objects.bulk_update(updated_project_members, ["sort_order"], batch_size=100)
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("db", "0038_auto_20230720_1505"),
+    ]
+
+    operations = [
+        migrations.RunPython(rename_field),
+        migrations.RunPython(update_workspace_member_props),
+        migrations.AlterField(
+            model_name='workspacemember',
+            name='view_props',
+            field=models.JSONField(default=plane.db.models.workspace.get_default_props),
+        ),
+        migrations.AddField(
+            model_name='workspacemember',
+            name='default_props',
+            field=models.JSONField(default=plane.db.models.workspace.get_default_props),
+        ),
+        migrations.AddField(
+            model_name='projectmember',
+            name='sort_order',
+            field=models.FloatField(default=65535),
+        ),
+        migrations.RunPython(update_project_member_sort_order),
+    ]

apiserver/plane/db/migrations/0040_projectmember_preferences_user_cover_image_and_more.py

@@ -0,0 +1,71 @@
+# Generated by Django 4.2.3 on 2023-08-01 06:02
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import plane.db.models.project
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0039_auto_20230723_2203'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='projectmember',
+            name='preferences',
+            field=models.JSONField(default=plane.db.models.project.get_default_preferences),
+        ),
+        migrations.AddField(
+            model_name='user',
+            name='cover_image',
+            field=models.URLField(blank=True, max_length=800, null=True),
+        ),
+        migrations.CreateModel(
+            name='IssueReaction',
+            fields=[
+                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
+                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('reaction', models.CharField(max_length=20)),
+                ('actor', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_reactions', to=settings.AUTH_USER_MODEL)),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('issue', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_reactions', to='db.issue')),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='project_%(class)s', to='db.project')),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='workspace_%(class)s', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'Issue Reaction',
+                'verbose_name_plural': 'Issue Reactions',
+                'db_table': 'issue_reactions',
+                'ordering': ('-created_at',),
+                'unique_together': {('issue', 'actor', 'reaction')},
+            },
+        ),
+        migrations.CreateModel(
+            name='CommentReaction',
+            fields=[
+                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
+                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('reaction', models.CharField(max_length=20)),
+                ('actor', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='comment_reactions', to=settings.AUTH_USER_MODEL)),
+                ('comment', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='comment_reactions', to='db.issuecomment')),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='project_%(class)s', to='db.project')),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='workspace_%(class)s', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'Comment Reaction',
+                'verbose_name_plural': 'Comment Reactions',
+                'db_table': 'comment_reactions',
+                'ordering': ('-created_at',),
+                'unique_together': {('comment', 'actor', 'reaction')},
+            },
+        ),
+    ]

apiserver/plane/db/models/__init__.py

@@ -34,6 +34,8 @@ from .issue import (
     IssueSequence,
     IssueAttachment,
     IssueSubscriber,
+    IssueReaction,
+    CommentReaction,
 )
 
 from .asset import FileAsset

apiserver/plane/db/models/issue.py

@@ -28,7 +28,6 @@ class IssueManager(models.Manager):
                 | models.Q(issue_inbox__status=2)
                 | models.Q(issue_inbox__isnull=True)
             )
-            .filter(archived_at__isnull=True)
             .exclude(archived_at__isnull=False)
         )
 
@@ -210,7 +209,7 @@ class IssueAssignee(ProjectBaseModel):
 
 
 class IssueLink(ProjectBaseModel):
-    title = models.CharField(max_length=255, null=True)
+    title = models.CharField(max_length=255, null=True, blank=True)
     url = models.URLField()
     issue = models.ForeignKey(
         "db.Issue", on_delete=models.CASCADE, related_name="issue_link"
@@ -425,6 +424,49 @@ class IssueSubscriber(ProjectBaseModel):
         return f"{self.issue.name} {self.subscriber.email}"
 
 
+class IssueReaction(ProjectBaseModel):
+
+    actor = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="issue_reactions",
+    )
+    issue = models.ForeignKey(Issue, on_delete=models.CASCADE, related_name="issue_reactions")
+    reaction = models.CharField(max_length=20)
+
+    class Meta:
+        unique_together = ["issue", "actor", "reaction"]
+        verbose_name = "Issue Reaction"
+        verbose_name_plural = "Issue Reactions"
+        db_table = "issue_reactions"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.issue.name} {self.actor.email}"
+
+
+class CommentReaction(ProjectBaseModel):
+
+    actor = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="comment_reactions",
+    )
+    comment = models.ForeignKey(IssueComment, on_delete=models.CASCADE, related_name="comment_reactions")
+    reaction = models.CharField(max_length=20)
+
+    class Meta:
+        unique_together = ["comment", "actor", "reaction"]
+        verbose_name = "Comment Reaction"
+        verbose_name_plural = "Comment Reactions"
+        db_table = "comment_reactions"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.issue.name} {self.actor.email}"
+
+
+
 # TODO: Find a better method to save the model
 @receiver(post_save, sender=Issue)
 def create_issue_sequence(sender, instance, created, **kwargs):

apiserver/plane/db/models/project.py

@@ -31,6 +31,13 @@ def get_default_props():
         "showEmptyGroups": True,
     }
 
+def get_default_preferences():
+    return {
+        "pages": {
+            "block_display": True
+        }
+    }
+
 
 class Project(BaseModel):
     NETWORK_CHOICES = ((0, "Secret"), (2, "Public"))
@@ -47,7 +54,7 @@ class Project(BaseModel):
         "db.WorkSpace", on_delete=models.CASCADE, related_name="workspace_project"
     )
     identifier = models.CharField(
-        max_length=5,
+        max_length=12,
         verbose_name="Project Identifier",
     )
     default_assignee = models.ForeignKey(
@@ -147,6 +154,21 @@ class ProjectMember(ProjectBaseModel):
     role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, default=10)
     view_props = models.JSONField(default=get_default_props)
     default_props = models.JSONField(default=get_default_props)
+    preferences = models.JSONField(default=get_default_preferences)
+    sort_order = models.FloatField(default=65535)
+
+
+    def save(self, *args, **kwargs):
+        if self._state.adding:
+            smallest_sort_order = ProjectMember.objects.filter(
+                workspace_id=self.project.workspace_id, member=self.member
+            ).aggregate(smallest=models.Min("sort_order"))["smallest"]
+
+            # Project ordering
+            if smallest_sort_order is not None:
+                self.sort_order = smallest_sort_order - 10000
+
+        super(ProjectMember, self).save(*args, **kwargs)
 
     class Meta:
         unique_together = ["project", "member"]
@@ -168,7 +190,7 @@ class ProjectIdentifier(AuditModel):
     project = models.OneToOneField(
         Project, on_delete=models.CASCADE, related_name="project_identifier"
     )
-    name = models.CharField(max_length=10)
+    name = models.CharField(max_length=12)
 
     class Meta:
         unique_together = ["name", "workspace"]

apiserver/plane/db/models/user.py

@@ -18,6 +18,13 @@ from sentry_sdk import capture_exception
 from slack_sdk import WebClient
 from slack_sdk.errors import SlackApiError
 
+def get_default_onboarding():
+    return {
+        "profile_complete": False,
+        "workspace_create": False,
+        "workspace_invite": False,
+        "workspace_join": False,
+    }
 
 class User(AbstractBaseUser, PermissionsMixin):
     id = models.UUIDField(
@@ -31,6 +38,7 @@ class User(AbstractBaseUser, PermissionsMixin):
     first_name = models.CharField(max_length=255, blank=True)
     last_name = models.CharField(max_length=255, blank=True)
     avatar = models.CharField(max_length=255, blank=True)
+    cover_image = models.URLField(blank=True, null=True, max_length=800)
 
     # tracking metrics
     date_joined = models.DateTimeField(auto_now_add=True, verbose_name="Created At")
@@ -73,6 +81,8 @@ class User(AbstractBaseUser, PermissionsMixin):
     role = models.CharField(max_length=300, null=True, blank=True)
     is_bot = models.BooleanField(default=False)
     theme = models.JSONField(default=dict)
+    is_tour_completed = models.BooleanField(default=False)
+    onboarding_step = models.JSONField(default=get_default_onboarding)
 
     USERNAME_FIELD = "email"
 

apiserver/plane/db/models/workspace.py

@@ -14,6 +14,30 @@ ROLE_CHOICES = (
 )
 
 
+def get_default_props():
+    return {
+        "filters": {"type": None},
+        "groupByProperty": None,
+        "issueView": "list",
+        "orderBy": "-created_at",
+        "properties": {
+            "assignee": True,
+            "due_date": True,
+            "key": True,
+            "labels": True,
+            "priority": True,
+            "state": True,
+            "sub_issue_count": True,
+            "attachment_count": True,
+            "link": True,
+            "estimate": True,
+            "created_on": True,
+            "updated_on": True,
+        },
+        "showEmptyGroups": True,
+    }
+
+
 class Workspace(BaseModel):
     name = models.CharField(max_length=80, verbose_name="Workspace Name")
     logo = models.URLField(verbose_name="Logo", blank=True, null=True)
@@ -47,7 +71,8 @@ class WorkspaceMember(BaseModel):
     )
     role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, default=10)
     company_role = models.TextField(null=True, blank=True)
-    view_props = models.JSONField(null=True, blank=True)
+    view_props = models.JSONField(default=get_default_props)
+    default_props = models.JSONField(default=get_default_props)
 
     class Meta:
         unique_together = ["workspace", "member"]

apiserver/plane/settings/local.py

@@ -17,7 +17,7 @@ EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
 
 DATABASES = {
     "default": {
-        "ENGINE": "django.db.backends.postgresql_psycopg2",
+        "ENGINE": "django.db.backends.postgresql",
         "NAME": os.environ.get("PGUSER", "plane"),
         "USER": "",
         "PASSWORD": "",

apiserver/plane/settings/production.py

@@ -17,7 +17,7 @@ DEBUG = int(os.environ.get("DEBUG", 0)) == 1
 
 DATABASES = {
     "default": {
-        "ENGINE": "django.db.backends.postgresql_psycopg2",
+        "ENGINE": "django.db.backends.postgresql",
         "NAME": "plane",
         "USER": os.environ.get("PGUSER", ""),
         "PASSWORD": os.environ.get("PGPASSWORD", ""),
@@ -71,6 +71,8 @@ CORS_ALLOW_HEADERS = [
 
 CORS_ALLOW_CREDENTIALS = True
 
+INSTALLED_APPS += ("scout_apm.django",)
+
 STORAGES = {
     "staticfiles": {
         "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
@@ -270,3 +272,8 @@ GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
 
 
 ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
+
+# Scout Settings
+SCOUT_MONITOR = os.environ.get("SCOUT_MONITOR", False)
+SCOUT_KEY = os.environ.get("SCOUT_KEY", "")
+SCOUT_NAME = "Plane"

apiserver/plane/settings/staging.py

@@ -16,7 +16,7 @@ from .common import *  # noqa
 DEBUG = int(os.environ.get("DEBUG", 1)) == 1
 DATABASES = {
     "default": {
-        "ENGINE": "django.db.backends.postgresql_psycopg2",
+        "ENGINE": "django.db.backends.postgresql",
         "NAME": os.environ.get("PGUSER", "plane"),
         "USER": "",
         "PASSWORD": "",

apiserver/plane/utils/issue_filters.py

@@ -12,6 +12,18 @@ def filter_state(params, filter, method):
     return filter
 
 
+def filter_state_group(params, filter, method):
+    if method == "GET":
+        state_group = params.get("state_group").split(",")
+        if len(state_group) and "" not in state_group:
+            filter["state__group__in"] = state_group
+    else:
+        if params.get("state_group", None) and len(params.get("state_group")):
+            filter["state__group__in"] = params.get("state_group")
+    return filter
+
+
+
 def filter_estimate_point(params, filter, method):
     if method == "GET":
         estimate_points = params.get("estimate_point").split(",")
@@ -212,6 +224,7 @@ def filter_issue_state_type(params, filter, method):
     return filter
 
 
+
 def filter_project(params, filter, method):
     if method == "GET":
         projects = params.get("project").split(",")
@@ -268,11 +281,24 @@ def filter_sub_issue_toggle(params, filter, method):
     return filter
 
 
+def filter_subscribed_issues(params, filter, method):
+    if method == "GET":
+        subscribers = params.get("subscriber").split(",")
+        if len(subscribers) and "" not in subscribers:
+            filter["issue_subscribers__subscriber_id__in"] = subscribers
+    else:
+        if params.get("subscriber", None) and len(params.get("subscriber")):
+            filter["issue_subscribers__subscriber_id__in"] = params.get("subscriber")
+    return filter
+
+
 def issue_filters(query_params, method):
     filter = dict()
+    print(query_params)
 
     ISSUE_FILTER = {
         "state": filter_state,
+        "state_group": filter_state_group,
         "estimate_point": filter_estimate_point,
         "priority": filter_priority,
         "parent": filter_parent,
@@ -291,6 +317,7 @@ def issue_filters(query_params, method):
         "module": filter_module,
         "inbox_status": filter_inbox_status,
         "sub_issue": filter_sub_issue_toggle,
+        "subscriber":  filter_subscribed_issues,
     }
 
     for key, value in ISSUE_FILTER.items():

apiserver/requirements/base.txt

@@ -3,7 +3,7 @@
 Django==4.2.3
 django-braces==1.15.0
 django-taggit==4.0.0
-psycopg2==2.9.6
+psycopg==3.1.9
 django-oauth-toolkit==2.3.0
 mistune==3.0.1
 djangorestframework==3.14.0
@@ -30,3 +30,6 @@ openai==0.27.8
 slack-sdk==3.21.3
 celery==5.3.1
 django_celery_beat==2.5.0
+psycopg-binary==3.1.9
+psycopg-c==3.1.9
+scout-apm==2.26.1

apiserver/requirements/production.txt

@@ -7,5 +7,5 @@ django-storages==1.13.2
 boto3==1.27.0
 django-anymail==10.0
 django-debug-toolbar==4.1.0
-gevent==22.10.2
+gevent==23.7.0
 psycogreen==1.0.2

apiserver/templates/emails/auth/magic_signin.html

@@ -89,8 +89,8 @@
                                                                         </tr>
                                                                         <tr>
                                                                            <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5;">
-                                                                              <!--[if mso]> 
-                                                                              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://app.plane.so/" style="v-text-anchor:middle; height: 33px; width: 301px;" arcsize="12%" fillcolor="#ffffff" strokecolor="#3f76ff" strokeweight="1px" data-btn="1">
+                                                                              <!--[if mso]>
+                                                                              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href={{magic_url}} style="v-text-anchor:middle; height: 33px; width: 301px;" arcsize="12%" fillcolor="#ffffff" strokecolor="#3f76ff" strokeweight="1px" data-btn="1">
                                                                                  <w:anchorlock/>
                                                                                  <div style="display:none;">
                                                                                     <center class="default-button">
@@ -98,11 +98,11 @@
                                                                                     </center>
                                                                                  </div>
                                                                               </v:roundrect>
-                                                                              <![endif]-->  <!--[if !mso]><!-- --> 
+                                                                              <![endif]-->  <!--[if !mso]><!-- -->
                                                                               <a href={{magic_url}} class="r16-r default-button" target="_blank" data-btn="1" style="font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; border-style: solid; word-wrap: break-word; display: inline-block; -webkit-text-size-adjust: none; mso-hide: all; background-color: #ffffff; border-color: #3f76ff; border-radius: 4px; border-width: 1px; color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 16px; height: 18px; padding-bottom: 7px; padding-left: 20px; padding-right: 20px; padding-top: 7px; width: 258px;">
                                                                                  <p style="margin: 0;"><span style="color: #3F76FF; font-size: 14px;">Open Plane</span></p>
                                                                               </a>
-                                                                              <!--<![endif]--> 
+                                                                              <!--<![endif]-->
                                                                            </td>
                                                                         </tr>
                                                                         <tr class="nl2go-responsive-hide">
@@ -364,4 +364,4 @@
          </tr>
       </table>
    </body>
-</html>
+</html>

apiserver/templates/emails/invitations/project_invitation.html

@@ -90,8 +90,8 @@
                                                                         </tr>
                                                                         <tr>
                                                                            <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5;">
-                                                                              <!--[if mso]> 
-                                                                              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://app.plane.so/" style="v-text-anchor:middle; height: 33px; width: 301px;" arcsize="12%" fillcolor="#ffffff" strokecolor="#3f76ff" strokeweight="1px" data-btn="1">
+                                                                              <!--[if mso]>
+                                                                              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href={{invitation_url}} style="v-text-anchor:middle; height: 33px; width: 301px;" arcsize="12%" fillcolor="#ffffff" strokecolor="#3f76ff" strokeweight="1px" data-btn="1">
                                                                                  <w:anchorlock/>
                                                                                  <div style="display:none;">
                                                                                     <center class="default-button">
@@ -99,11 +99,11 @@
                                                                                     </center>
                                                                                  </div>
                                                                               </v:roundrect>
-                                                                              <![endif]-->  <!--[if !mso]><!-- --> 
+                                                                              <![endif]-->  <!--[if !mso]><!-- -->
                                                                               <a href={{invitation_url}} class="r16-r default-button" target="_blank" data-btn="1" style="font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; border-style: solid; word-wrap: break-word; display: inline-block; -webkit-text-size-adjust: none; mso-hide: all; background-color: #ffffff; border-color: #3f76ff; border-radius: 4px; border-width: 1px; color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 16px; height: 18px; padding-bottom: 7px; padding-left: 20px; padding-right: 20px; padding-top: 7px; width: 258px;">
                                                                                  <p style="margin: 0;"><span style="color: #3F76FF;">Accept the invite</span></p>
                                                                               </a>
-                                                                              <!--<![endif]--> 
+                                                                              <!--<![endif]-->
                                                                            </td>
                                                                         </tr>
                                                                         <tr class="nl2go-responsive-hide">
@@ -346,4 +346,4 @@
          </tr>
       </table>
    </body>
-</html>
+</html>

apiserver/templates/emails/invitations/workspace_invitation.html

@@ -90,8 +90,8 @@
                                                                         </tr>
                                                                         <tr>
                                                                            <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5;">
-                                                                              <!--[if mso]> 
-                                                                              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://app.plane.so/" style="v-text-anchor:middle; height: 33px; width: 301px;" arcsize="12%" fillcolor="#ffffff" strokecolor="#3f76ff" strokeweight="1px" data-btn="1">
+                                                                              <!--[if mso]>
+                                                                              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href={{invitation_url}} style="v-text-anchor:middle; height: 33px; width: 301px;" arcsize="12%" fillcolor="#ffffff" strokecolor="#3f76ff" strokeweight="1px" data-btn="1">
                                                                                  <w:anchorlock/>
                                                                                  <div style="display:none;">
                                                                                     <center class="default-button">
@@ -99,11 +99,11 @@
                                                                                     </center>
                                                                                  </div>
                                                                               </v:roundrect>
-                                                                              <![endif]-->  <!--[if !mso]><!-- --> 
+                                                                              <![endif]-->  <!--[if !mso]><!-- -->
                                                                               <a href={{invitation_url}} class="r16-r default-button" target="_blank" data-btn="1" style="font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; border-style: solid; word-wrap: break-word; display: inline-block; -webkit-text-size-adjust: none; mso-hide: all; background-color: #ffffff; border-color: #3f76ff; border-radius: 4px; border-width: 1px; color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 16px; height: 18px; padding-bottom: 7px; padding-left: 20px; padding-right: 20px; padding-top: 7px; width: 258px;">
                                                                                  <p style="margin: 0;"><span style="color: #3F76FF;">Accept the invite</span></p>
                                                                               </a>
-                                                                              <!--<![endif]--> 
+                                                                              <!--<![endif]-->
                                                                            </td>
                                                                         </tr>
                                                                         <tr class="nl2go-responsive-hide">
@@ -346,4 +346,4 @@
          </tr>
       </table>
    </body>
-</html>
+</html>

apps/app/components/account/email-code-form.tsx

@@ -32,6 +32,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
     setError,
     setValue,
     getValues,
+    watch,
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<EmailCodeFormValues>({
     defaultValues: {
@@ -112,43 +113,35 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
 
   return (
     <>
-      <form className="space-y-5 py-5 px-5">
-        {(codeSent || codeResent) && (
-          <div className="rounded-md bg-green-500/20 p-4">
-            <div className="flex">
-              <div className="flex-shrink-0">
-                <CheckCircleIcon className="h-5 w-5 text-green-500" aria-hidden="true" />
-              </div>
-              <div className="ml-3">
-                <p className="text-sm font-medium text-green-500">
-                  {codeResent
-                    ? "Please check your mail for new code."
-                    : "Please check your mail for code."}
-                </p>
-              </div>
-            </div>
-          </div>
-        )}
-        <div>
+      {(codeSent || codeResent) && (
+        <p className="text-center mt-4">
+          We have sent the sign in code.
+          <br />
+          Please check your inbox at <span className="font-medium">{watch("email")}</span>
+        </p>
+      )}
+      <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
+        <div className="space-y-1">
           <Input
             id="email"
             type="email"
             name="email"
             register={register}
             validations={{
-              required: "Email ID is required",
+              required: "Email address is required",
               validate: (value) =>
                 /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                   value
-                ) || "Email ID is not valid",
+                ) || "Email address is not valid",
             }}
             error={errors.email}
-            placeholder="Enter your Email ID"
+            placeholder="Enter your email address..."
+            className="border-custom-border-300 h-[46px]"
           />
         </div>
 
         {codeSent && (
-          <div>
+          <>
             <Input
               id="token"
               type="token"
@@ -158,14 +151,15 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
                 required: "Code is required",
               }}
               error={errors.token}
-              placeholder="Enter code"
+              placeholder="Enter code..."
+              className="border-custom-border-300 h-[46px]"
             />
             <button
               type="button"
-              className={`mt-5 flex w-full justify-end text-xs outline-none ${
+              className={`flex w-full justify-end text-xs outline-none ${
                 isResendDisabled
                   ? "cursor-default text-custom-text-200"
-                  : "cursor-pointer text-custom-primary"
+                  : "cursor-pointer text-custom-primary-100"
               } `}
               onClick={() => {
                 setIsCodeResending(true);
@@ -178,46 +172,43 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
               disabled={isResendDisabled}
             >
               {resendCodeTimer > 0 ? (
-                <p className="text-right">
-                  Didn{"'"}t receive code? Get new code in {resendCodeTimer} seconds.
-                </p>
+                <span className="text-right">Request new code in {resendCodeTimer} seconds</span>
               ) : isCodeResending ? (
-                "Sending code..."
+                "Sending new code..."
               ) : errorResendingCode ? (
                 "Please try again later"
               ) : (
-                "Resend code"
+                <span className="font-medium">Resend code</span>
               )}
             </button>
-          </div>
+          </>
+        )}
+        {codeSent ? (
+          <PrimaryButton
+            type="submit"
+            className="w-full text-center h-[46px]"
+            size="md"
+            onClick={handleSubmit(handleSignin)}
+            disabled={!isValid && isDirty}
+            loading={isLoading}
+          >
+            {isLoading ? "Signing in..." : "Sign in"}
+          </PrimaryButton>
+        ) : (
+          <PrimaryButton
+            className="w-full text-center h-[46px]"
+            size="md"
+            onClick={() => {
+              handleSubmit(onSubmit)().then(() => {
+                setResendCodeTimer(30);
+              });
+            }}
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Sending code..." : "Send sign in code"}
+          </PrimaryButton>
         )}
-        <div>
-          {codeSent ? (
-            <PrimaryButton
-              type="submit"
-              className="w-full text-center"
-              size="md"
-              onClick={handleSubmit(handleSignin)}
-              disabled={!isValid && isDirty}
-              loading={isLoading}
-            >
-              {isLoading ? "Signing in..." : "Sign in"}
-            </PrimaryButton>
-          ) : (
-            <PrimaryButton
-              className="w-full text-center"
-              size="md"
-              onClick={() => {
-                handleSubmit(onSubmit)().then(() => {
-                  setResendCodeTimer(30);
-                });
-              }}
-              loading={isSubmitting || (!isValid && isDirty)}
-            >
-              {isSubmitting ? "Sending code..." : "Send code"}
-            </PrimaryButton>
-          )}
-        </div>
       </form>
     </>
   );

apps/app/components/account/email-password-form.tsx

@@ -8,7 +8,7 @@ import { useForm } from "react-hook-form";
 // components
 import { EmailResetPasswordForm } from "components/account";
 // ui
-import { Input, SecondaryButton } from "components/ui";
+import { Input, PrimaryButton } from "components/ui";
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -42,28 +42,39 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
 
   return (
     <>
+      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+        {isResettingPassword
+          ? "Reset your password"
+          : isSignUpPage
+          ? "Sign up on Plane"
+          : "Sign in to Plane"}
+      </h1>
       {isResettingPassword ? (
         <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
       ) : (
-        <form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
-          <div>
+        <form
+          className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
+          onSubmit={handleSubmit(onSubmit)}
+        >
+          <div className="space-y-1">
             <Input
               id="email"
               type="email"
               name="email"
               register={register}
               validations={{
-                required: "Email ID is required",
+                required: "Email address is required",
                 validate: (value) =>
                   /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                     value
-                  ) || "Email ID is not valid",
+                  ) || "Email address is not valid",
               }}
               error={errors.email}
-              placeholder="Enter your email ID"
+              placeholder="Enter your email address..."
+              className="border-custom-border-300 h-[46px]"
             />
           </div>
-          <div className="mt-5">
+          <div className="space-y-1">
             <Input
               id="password"
               type="password"
@@ -73,46 +84,45 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
                 required: "Password is required",
               }}
               error={errors.password}
-              placeholder="Enter your password"
+              placeholder="Enter your password..."
+              className="border-custom-border-300 h-[46px]"
             />
           </div>
-          <div className="mt-2 flex items-center justify-between">
-            <div className="ml-auto text-sm">
-              {isSignUpPage ? (
-                <Link href="/">
-                  <a className="font-medium text-custom-primary hover:text-custom-primary">
-                    Already have an account? Sign in.
-                  </a>
-                </Link>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => setIsResettingPassword(true)}
-                  className="font-medium text-custom-primary hover:text-custom-primary"
-                >
-                  Forgot your password?
-                </button>
-              )}
-            </div>
+          <div className="text-right text-xs">
+            {isSignUpPage ? (
+              <Link href="/">
+                <a className="text-custom-text-200 hover:text-custom-primary-100">
+                  Already have an account? Sign in.
+                </a>
+              </Link>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setIsResettingPassword(true)}
+                className="text-custom-text-200 hover:text-custom-primary-100"
+              >
+                Forgot your password?
+              </button>
+            )}
           </div>
-          <div className="mt-5">
-            <SecondaryButton
+          <div>
+            <PrimaryButton
               type="submit"
-              className="w-full text-center"
+              className="w-full text-center h-[46px]"
               disabled={!isValid && isDirty}
               loading={isSubmitting}
             >
               {isSignUpPage
                 ? isSubmitting
                   ? "Signing up..."
-                  : "Sign Up"
+                  : "Sign up"
                 : isSubmitting
                 ? "Signing in..."
-                : "Sign In"}
-            </SecondaryButton>
+                : "Sign in"}
+            </PrimaryButton>
             {!isSignUpPage && (
               <Link href="/sign-up">
-                <a className="block font-medium text-custom-primary hover:text-custom-primary text-sm mt-1">
+                <a className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
                   Don{"'"}t have an account? Sign up.
                 </a>
               </Link>

apps/app/components/account/email-reset-password-form.tsx

@@ -59,32 +59,36 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
   };
 
   return (
-    <form className="mt-5 py-5 px-5" onSubmit={handleSubmit(forgotPassword)}>
-      <div>
+    <form
+      className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
+      onSubmit={handleSubmit(forgotPassword)}
+    >
+      <div className="space-y-1">
         <Input
           id="email"
           type="email"
           name="email"
           register={register}
           validations={{
-            required: "Email ID is required",
+            required: "Email address is required",
             validate: (value) =>
               /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                 value
-              ) || "Email ID is not valid",
+              ) || "Email address is not valid",
           }}
           error={errors.email}
-          placeholder="Enter registered Email ID"
+          placeholder="Enter registered email address.."
+          className="border-custom-border-300 h-[46px]"
         />
       </div>
-      <div className="mt-5 flex items-center gap-2">
+      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
         <SecondaryButton
-          className="w-full text-center"
+          className="w-full text-center h-[46px]"
           onClick={() => setIsResettingPassword(false)}
         >
           Go Back
         </SecondaryButton>
-        <PrimaryButton type="submit" className="w-full text-center" loading={isSubmitting}>
+        <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
           {isSubmitting ? "Sending link..." : "Send reset link"}
         </PrimaryButton>
       </div>

apps/app/components/account/github-login-button.tsx

@@ -1,9 +1,14 @@
 import { useEffect, useState, FC } from "react";
+
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
+
+// next-themes
+import { useTheme } from "next-themes";
 // images
-import githubImage from "/public/logos/github-black.png";
+import githubBlackImage from "/public/logos/github-black.png";
+import githubWhiteImage from "/public/logos/github-white.png";
 
 const { NEXT_PUBLIC_GITHUB_ID } = process.env;
 
@@ -11,15 +16,15 @@ export interface GithubLoginButtonProps {
   handleSignIn: React.Dispatch<string>;
 }
 
-export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
-  const { handleSignIn } = props;
-  // router
+export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
+  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
+  const [gitCode, setGitCode] = useState<null | string>(null);
+
   const {
     query: { code },
   } = useRouter();
-  // states
-  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
-  const [gitCode, setGitCode] = useState<null | string>(null);
+
+  const { theme } = useTheme();
 
   useEffect(() => {
     if (code && !gitCode) {
@@ -35,13 +40,18 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
   }, []);
 
   return (
-    <div className="w-full flex justify-center items-center px-[3px]">
+    <div className="w-full flex justify-center items-center">
       <Link
         href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
-        <button className="flex w-full items-center justify-center gap-3 rounded border border-custom-border-100 p-2 text-sm font-medium text-custom-text-200 duration-300 hover:bg-custom-background-80">
-          <Image src={githubImage} height={20} width={20} color="#000" alt="GitHub Logo" />
-          <span>Sign In with Github</span>
+        <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
+          <Image
+            src={theme === "dark" ? githubWhiteImage : githubBlackImage}
+            height={20}
+            width={20}
+            alt="GitHub Logo"
+          />
+          <span>Sign in with GitHub</span>
         </button>
       </Link>
     </div>

apps/app/components/account/google-login.tsx

@@ -1,5 +1,5 @@
 import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
-// next
+
 import Script from "next/script";
 
 export interface IGoogleLoginButton {
@@ -8,30 +8,36 @@ export interface IGoogleLoginButton {
   styles?: CSSProperties;
 }
 
-export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
-  const { handleSignIn } = props;
-
+export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
   const googleSignInButton = useRef<HTMLDivElement>(null);
   const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
 
   const loadScript = useCallback(() => {
     if (!googleSignInButton.current || gsiScriptLoaded) return;
+
     window?.google?.accounts.id.initialize({
       client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
       callback: handleSignIn,
     });
-    window?.google?.accounts.id.renderButton(
-      googleSignInButton.current,
-      {
-        type: "standard",
-        theme: "outline",
-        size: "large",
-        logo_alignment: "center",
-        width: "410",
-        text: "continue_with",
-      } as GsiButtonConfiguration // customization attributes
-    );
+
+    try {
+      window?.google?.accounts.id.renderButton(
+        googleSignInButton.current,
+        {
+          type: "standard",
+          theme: "outline",
+          size: "large",
+          logo_alignment: "center",
+          width: 360,
+          text: "signin_with",
+        } as GsiButtonConfiguration // customization attributes
+      );
+    } catch (err) {
+      console.log(err);
+    }
+
     window?.google?.accounts.id.prompt(); // also display the One Tap dialog
+
     setGsiScriptLoaded(true);
   }, [handleSignIn, gsiScriptLoaded]);
 
@@ -48,7 +54,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
     <>
       <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
       <div
-        className="overflow-hidden rounded w-full flex justify-center items-center"
+        className="overflow-hidden rounded w-full"
         id="googleSignInButton"
         ref={googleSignInButton}
       />

apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx

@@ -111,7 +111,7 @@ export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClos
               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 border border-custom-border-100 bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
                     <Dialog.Title

apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx

@@ -31,7 +31,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
   }
 
   return (
-    <div className="flex items-center gap-2 rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+    <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
       <span
         className="h-3 w-3 rounded"
         style={{

apps/app/components/analytics/custom-analytics/sidebar.tsx

@@ -185,7 +185,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
     <div
       className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${
         fullScreen
-          ? "border-l border-custom-border-100 md:h-full md:border-l md:border-custom-border-100 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
+          ? "border-l border-custom-border-200 md:h-full md:border-l md:border-custom-border-200 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
           : ""
       }`}
     >
@@ -227,12 +227,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                               </span>
                             ) : project.icon_prop ? (
                               <div className="h-6 w-6 grid place-items-center flex-shrink-0">
-                                <span
-                                  style={{ color: project.icon_prop.color }}
-                                  className="material-symbols-rounded text-lg"
-                                >
-                                  {project.icon_prop.name}
-                                </span>
+                                {renderEmoji(project.icon_prop)}
                               </div>
                             ) : (
                               <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
@@ -342,12 +337,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                       </div>
                     ) : projectDetails?.icon_prop ? (
                       <div className="h-6 w-6 grid place-items-center flex-shrink-0">
-                        <span
-                          style={{ color: projectDetails.icon_prop.color }}
-                          className="material-symbols-rounded text-lg"
-                        >
-                          {projectDetails.icon_prop.name}
-                        </span>
+                        {renderEmoji(projectDetails.icon_prop)}
                       </div>
                     ) : (
                       <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
@@ -360,11 +350,8 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                     <div className="flex items-center gap-2 text-xs">
                       <h6 className="text-custom-text-200">Network</h6>
                       <span>
-                        {
-                          NETWORK_CHOICES[
-                            `${projectDetails?.network}` as keyof typeof NETWORK_CHOICES
-                          ]
-                        }
+                        {NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ??
+                          ""}
                       </span>
                     </div>
                   </div>

apps/app/components/analytics/custom-analytics/table.tsx

@@ -37,9 +37,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
     <div className="flow-root">
       <div className="overflow-x-auto">
         <div className="inline-block min-w-full align-middle">
-          <table className="min-w-full divide-y divide-custom-border-100 whitespace-nowrap border-y border-custom-border-100">
+          <table className="min-w-full divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
             <thead className="bg-custom-background-80">
-              <tr className="divide-x divide-custom-border-100 text-sm text-custom-text-100">
+              <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
                 <th scope="col" className="py-3 px-2.5 text-left font-medium">
                   {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
                 </th>
@@ -80,11 +80,11 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                 )}
               </tr>
             </thead>
-            <tbody className="divide-y divide-custom-border-100">
+            <tbody className="divide-y divide-custom-border-200">
               {barGraphData.data.map((item, index) => (
                 <tr
                   key={`table-row-${index}`}
-                  className="divide-x divide-custom-border-100 text-xs text-custom-text-200"
+                  className="divide-x divide-custom-border-200 text-xs text-custom-text-200"
                 >
                   <td
                     className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${

apps/app/components/analytics/project-modal.tsx

@@ -155,7 +155,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
       } ${isOpen ? "right-0" : "-right-full"} duration-300 transition-all`}
     >
       <div
-        className={`flex h-full flex-col overflow-hidden border-custom-border-100 bg-custom-background-100 text-left ${
+        className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
           fullScreen ? "rounded-lg border" : "border-l"
         }`}
       >
@@ -186,12 +186,12 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
           </div>
         </div>
         <Tab.Group as={Fragment}>
-          <Tab.List as="div" className="space-x-2 border-b border-custom-border-100 p-5 pt-0">
+          <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 p-5 pt-0">
             {tabsList.map((tab) => (
               <Tab
                 key={tab}
                 className={({ selected }) =>
-                  `rounded-3xl border border-custom-border-100 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                  `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
                     selected ? "bg-custom-background-80" : ""
                   }`
                 }

apps/app/components/analytics/scope-and-demand/demand.tsx

@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="space-y-3 rounded-[10px] border border-custom-border-100 p-3">
+  <div className="space-y-3 rounded-[10px] border border-custom-border-200 p-3">
     <h5 className="text-xs text-red-500">DEMAND</h5>
     <div>
       <h4 className="text-custom-text-100 text-base font-medium">Total open tasks</h4>
@@ -50,7 +50,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
         );
       })}
     </div>
-    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+    <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
       <p className="flex items-center gap-1 text-custom-text-200">
         <PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" />
         <span>Estimate Demand:</span>

apps/app/components/analytics/scope-and-demand/leaderboard.tsx

@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
-  <div className="p-3 border border-custom-border-100 rounded-[10px]">
+  <div className="p-3 border border-custom-border-200 rounded-[10px]">
     <h6 className="text-base font-medium">{title}</h6>
     {users.length > 0 ? (
       <div className="mt-3 space-y-3">

apps/app/components/analytics/scope-and-demand/scope.tsx

@@ -8,9 +8,9 @@ type Props = {
 };
 
 export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-custom-border-100">
+  <div className="rounded-[10px] border border-custom-border-200">
     <h5 className="p-3 text-xs text-green-500">SCOPE</h5>
-    <div className="divide-y divide-custom-border-100">
+    <div className="divide-y divide-custom-border-200">
       <div>
         <h6 className="px-3 text-base font-medium">Pending issues</h6>
         {defaultAnalytics.pending_issue_user.length > 0 ? (
@@ -27,7 +27,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
               );
 
               return (
-                <div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+                <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
                   <span className="font-medium text-custom-text-200">
                     {assignee
                       ? assignee.assignees__first_name + " " + assignee.assignees__last_name

apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx

@@ -9,54 +9,46 @@ type Props = {
   defaultAnalytics: IDefaultAnalyticsResponse;
 };
 
-export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) => {
-  const currentMonth = new Date().getMonth();
-  const startMonth = Math.floor(currentMonth / 3) * 3 + 1;
-  const quarterMonthsList = [startMonth, startMonth + 1, startMonth + 2];
-
-  return (
-    <div className="py-3 border border-custom-border-100 rounded-[10px]">
-      <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
-      {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
-        <LineGraph
-          data={[
-            {
-              id: "issues_closed",
-              color: "rgb(var(--color-primary-100))",
-              data: MONTHS_LIST.map((month) => ({
-                x: month.label.substring(0, 3),
-                y:
-                  defaultAnalytics.issue_completed_month_wise.find(
-                    (data) => data.month === month.value
-                  )?.count || 0,
-              })),
-            },
-          ]}
-          customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => {
-            if (quarterMonthsList.includes(data.month)) return data.count;
-
-            return 0;
-          })}
-          height="300px"
-          colors={(datum) => datum.color}
-          curve="monotoneX"
-          margin={{ top: 20 }}
-          enableSlices="x"
-          sliceTooltip={(datum) => (
-            <div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
-              {datum.slice.points[0].data.yFormatted}
-              <span className="text-custom-text-200"> issues closed in </span>
-              {datum.slice.points[0].data.xFormatted}
-            </div>
-          )}
-          theme={{
-            background: "rgb(var(--color-background-100))",
-          }}
-          enableArea
-        />
-      ) : (
-        <div className="text-custom-text-200 text-center text-sm py-8">No matching data found.</div>
-      )}
-    </div>
-  );
-};
+export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) => (
+  <div className="py-3 border border-custom-border-200 rounded-[10px]">
+    <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
+    {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
+      <LineGraph
+        data={[
+          {
+            id: "issues_closed",
+            color: "rgb(var(--color-primary-100))",
+            data: MONTHS_LIST.map((month) => ({
+              x: month.label.substring(0, 3),
+              y:
+                defaultAnalytics.issue_completed_month_wise.find(
+                  (data) => data.month === month.value
+                )?.count || 0,
+            })),
+          },
+        ]}
+        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map(
+          (data) => data.count
+        )}
+        height="300px"
+        colors={(datum) => datum.color}
+        curve="monotoneX"
+        margin={{ top: 20 }}
+        enableSlices="x"
+        sliceTooltip={(datum) => (
+          <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+            {datum.slice.points[0].data.yFormatted}
+            <span className="text-custom-text-200"> issues closed in </span>
+            {datum.slice.points[0].data.xFormatted}
+          </div>
+        )}
+        theme={{
+          background: "rgb(var(--color-background-100))",
+        }}
+        enableArea
+      />
+    ) : (
+      <div className="text-custom-text-200 text-center text-sm py-8">No matching data found.</div>
+    )}
+  </div>
+);

apps/app/components/auth-screens/not-authorized-view.tsx

@@ -22,7 +22,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
 
   return (
     <DefaultLayout>
-      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-90 text-center">
+      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
         <div className="h-44 w-72">
           <Image
             src={type === "project" ? ProjectNotAuthorizedImg : WorkspaceNotAuthorizedImg}

apps/app/components/auth-screens/project/join-project.tsx

@@ -41,7 +41,7 @@ export const JoinProject: React.FC = () => {
   };
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-90 text-center">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
       <div className="h-44 w-72">
         <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
       </div>

apps/app/components/automation/auto-archive-automation.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+
+// component
+import { CustomSelect, ToggleSwitch } from "components/ui";
+import { SelectMonthModal } from "components/automation";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+// constants
+import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
+// types
+import { IProject } from "types";
+
+type Props = {
+  projectDetails: IProject | undefined;
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+};
+
+export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleChange }) => {
+  const [monthModal, setmonthModal] = useState(false);
+
+  const initialValues: Partial<IProject> = { archive_in: 1 };
+  return (
+    <>
+      <SelectMonthModal
+        type="auto-archive"
+        initialValues={initialValues}
+        isOpen={monthModal}
+        handleClose={() => setmonthModal(false)}
+        handleChange={handleChange}
+      />
+      <div className="flex flex-col gap-7 px-6 py-5 rounded-[10px] border border-custom-border-300 bg-custom-background-90">
+        <div className="flex items-center justify-between gap-x-8 gap-y-2">
+          <div className="flex flex-col gap-2.5">
+            <h4 className="text-lg font-semibold">Auto-archive closed issues</h4>
+            <p className="text-sm text-custom-text-200">
+              Plane will automatically archive issues that have been completed or cancelled for the
+              configured time period.
+            </p>
+          </div>
+          <ToggleSwitch
+            value={projectDetails?.archive_in !== 0}
+            onChange={() =>
+              projectDetails?.archive_in === 0
+                ? handleChange({ archive_in: 1 })
+                : handleChange({ archive_in: 0 })
+            }
+            size="sm"
+          />
+        </div>
+        {projectDetails?.archive_in !== 0 && (
+          <div className="flex items-center justify-between gap-2 w-full">
+            <div className="w-1/2 text-base font-medium">
+              Auto-archive issues that are closed for
+            </div>
+            <div className="w-1/2">
+              <CustomSelect
+                value={projectDetails?.archive_in}
+                label={`${projectDetails?.archive_in} ${
+                  projectDetails?.archive_in === 1 ? "Month" : "Months"
+                }`}
+                onChange={(val: number) => {
+                  handleChange({ archive_in: val });
+                }}
+                input
+                verticalPosition="top"
+                width="w-full"
+              >
+                <>
+                  {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                    <CustomSelect.Option key={month.label} value={month.value}>
+                      {month.label}
+                    </CustomSelect.Option>
+                  ))}
+
+                  <button
+                    type="button"
+                    className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
+                    onClick={() => setmonthModal(true)}
+                  >
+                    Customize Time Range
+                  </button>
+                </>
+              </CustomSelect>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};

apps/app/components/automation/auto-close-automation.tsx

@@ -0,0 +1,176 @@
+import React, { useState } from "react";
+
+import useSWR from "swr";
+
+import { useRouter } from "next/router";
+
+// component
+import { CustomSearchSelect, CustomSelect, ToggleSwitch } from "components/ui";
+import { SelectMonthModal } from "components/automation";
+// icons
+import { ChevronDownIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { getStateGroupIcon } from "components/icons";
+// services
+import stateService from "services/state.service";
+// constants
+import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
+import { STATES_LIST } from "constants/fetch-keys";
+// types
+import { IProject } from "types";
+// helper
+import { getStatesList } from "helpers/state.helper";
+
+type Props = {
+  projectDetails: IProject | undefined;
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+};
+
+export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleChange }) => {
+  const [monthModal, setmonthModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const states = getStatesList(stateGroups);
+
+  const options = states
+    ?.filter((state) => state.group === "cancelled")
+    .map((state) => ({
+      value: state.id,
+      query: state.name,
+      content: (
+        <div className="flex items-center gap-2">
+          {getStateGroupIcon(state.group, "16", "16", state.color)}
+          {state.name}
+        </div>
+      ),
+    }));
+
+  const multipleOptions = (options ?? []).length > 1;
+
+  const defaultState = stateGroups && stateGroups.cancelled ? stateGroups.cancelled[0].id : null;
+
+  const selectedOption = states?.find(
+    (s) => s.id === projectDetails?.default_state ?? defaultState
+  );
+  const currentDefaultState = states?.find((s) => s.id === defaultState);
+
+  const initialValues: Partial<IProject> = {
+    close_in: 1,
+    default_state: defaultState,
+  };
+
+  return (
+    <>
+      <SelectMonthModal
+        type="auto-close"
+        initialValues={initialValues}
+        isOpen={monthModal}
+        handleClose={() => setmonthModal(false)}
+        handleChange={handleChange}
+      />
+
+      <div className="flex flex-col gap-7 px-6 py-5 rounded-[10px] border border-custom-border-300 bg-custom-background-90">
+        <div className="flex items-center justify-between gap-x-8 gap-y-2 ">
+          <div className="flex flex-col gap-2.5">
+            <h4 className="text-lg font-semibold">Auto-close inactive issues</h4>
+            <p className="text-sm text-custom-text-200">
+              Plane will automatically close the issues that have not been updated for the
+              configured time period.
+            </p>
+          </div>
+          <ToggleSwitch
+            value={projectDetails?.close_in !== 0}
+            onChange={() =>
+              projectDetails?.close_in === 0
+                ? handleChange({ close_in: 1, default_state: defaultState })
+                : handleChange({ close_in: 0, default_state: null })
+            }
+            size="sm"
+          />
+        </div>
+        {projectDetails?.close_in !== 0 && (
+          <div className="flex flex-col gap-4 w-full">
+            <div className="flex items-center justify-between gap-2 w-full">
+              <div className="w-1/2 text-base font-medium">
+                Auto-close issues that are inactive for
+              </div>
+              <div className="w-1/2">
+                <CustomSelect
+                  value={projectDetails?.close_in}
+                  label={`${projectDetails?.close_in} ${
+                    projectDetails?.close_in === 1 ? "Month" : "Months"
+                  }`}
+                  onChange={(val: number) => {
+                    handleChange({ close_in: val });
+                  }}
+                  input
+                  width="w-full"
+                >
+                  <>
+                    {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                      <CustomSelect.Option key={month.label} value={month.value}>
+                        {month.label}
+                      </CustomSelect.Option>
+                    ))}
+                    <button
+                      type="button"
+                      className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
+                      onClick={() => setmonthModal(true)}
+                    >
+                      Customize Time Range
+                    </button>
+                  </>
+                </CustomSelect>
+              </div>
+            </div>
+            <div className="flex items-center justify-between gap-2 w-full">
+              <div className="w-1/2 text-base font-medium">Auto-close Status</div>
+              <div className="w-1/2 ">
+                <CustomSearchSelect
+                  value={
+                    projectDetails?.default_state ? projectDetails?.default_state : defaultState
+                  }
+                  label={
+                    <div className="flex items-center gap-2">
+                      {selectedOption ? (
+                        getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
+                      ) : currentDefaultState ? (
+                        getStateGroupIcon(
+                          currentDefaultState.group,
+                          "16",
+                          "16",
+                          currentDefaultState.color
+                        )
+                      ) : (
+                        <Squares2X2Icon className="h-3.5 w-3.5 text-custom-text-200" />
+                      )}
+                      {selectedOption?.name
+                        ? selectedOption.name
+                        : currentDefaultState?.name ?? (
+                            <span className="text-custom-text-200">State</span>
+                          )}
+                    </div>
+                  }
+                  onChange={(val: string) => {
+                    handleChange({ default_state: val });
+                  }}
+                  options={options}
+                  disabled={!multipleOptions}
+                  width="w-full"
+                  input
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};

apps/app/components/automation/index.ts

@@ -0,0 +1,3 @@
+export * from "./auto-close-automation";
+export * from "./auto-archive-automation";
+export * from "./select-month-modal";

apps/app/components/automation/select-month-modal.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+// types
+import type { IProject } from "types";
+
+// types
+type Props = {
+  isOpen: boolean;
+  type: "auto-close" | "auto-archive";
+  initialValues: Partial<IProject>;
+  handleClose: () => void;
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+};
+
+export const SelectMonthModal: React.FC<Props> = ({
+  type,
+  initialValues,
+  isOpen,
+  handleClose,
+  handleChange,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IProject>({
+    defaultValues: initialValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset(initialValues);
+  };
+
+  const onSubmit = (formData: Partial<IProject>) => {
+    if (!workspaceSlug && !projectId) return;
+    handleChange(formData);
+    onClose();
+  };
+
+  const inputSection = (name: string) => (
+    <div className="relative flex flex-col gap-1 justify-center w-full">
+      <Input
+        type="number"
+        id={name}
+        name={name}
+        placeholder="Enter Months"
+        autoComplete="off"
+        register={register}
+        width="full"
+        validations={{
+          required: "Select a month between 1 and 12.",
+          min: 1,
+          max: 12,
+        }}
+        className="border-custom-border-200"
+      />
+      <span className="absolute text-sm text-custom-text-200 top-2.5 right-8">Months</span>
+    </div>
+  );
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={onClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              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-90 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div>
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-custom-text-100"
+                    >
+                      Customize Time Range
+                    </Dialog.Title>
+                    <div className="mt-8 flex items-center gap-2">
+                      <div className="flex w-full flex-col gap-1 justify-center">
+                        {type === "auto-close" ? (
+                          <>
+                            {inputSection("close_in")}
+                            {errors.close_in && (
+                              <span className="text-sm px-1 text-red-500">
+                                Select a month between 1 and 12.
+                              </span>
+                            )}
+                          </>
+                        ) : (
+                          <>
+                            {inputSection("archive_in")}
+                            {errors.archive_in && (
+                              <span className="text-sm px-1 text-red-500">
+                                Select a month between 1 and 12.
+                              </span>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
+                    <PrimaryButton type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Submitting..." : "Submit"}
+                    </PrimaryButton>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/app/components/breadcrumbs/index.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 // icons
-import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import { Icon } from "components/ui";
 
 type BreadcrumbsProps = {
@@ -14,10 +13,10 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
 
   return (
     <>
-      <div className="flex items-center">
+      <div className="flex items-center flex-grow w-full whitespace-nowrap overflow-hidden overflow-ellipsis">
         <button
           type="button"
-          className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-100 text-center text-sm hover:bg-custom-sidebar-background-90"
+          className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
           onClick={() => router.back()}
         >
           <Icon
@@ -35,22 +34,36 @@ type BreadcrumbItemProps = {
   title: string;
   link?: string;
   icon?: any;
+  linkTruncate?: boolean;
+  unshrinkTitle?: boolean;
 };
 
-const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) => (
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+  title,
+  link,
+  icon,
+  linkTruncate = false,
+  unshrinkTitle = false,
+}) => (
   <>
     {link ? (
       <Link href={link}>
-        <a className="border-r-2 border-custom-sidebar-border-100 px-3 text-sm">
-          <p className={`${icon ? "flex items-center gap-2" : ""}`}>
+        <a
+          className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${
+            linkTruncate ? "truncate" : ""
+          }`}
+        >
+          <p
+            className={`${linkTruncate ? "truncate" : ""}${icon ? "flex items-center gap-2" : ""}`}
+          >
             {icon ?? null}
             {title}
           </p>
         </a>
       </Link>
     ) : (
-      <div className="max-w-64 px-3 text-sm">
-        <p className={`${icon ? "flex items-center gap-2" : ""}`}>
+      <div className={`px-3 text-sm truncate ${unshrinkTitle ? "flex-shrink-0" : ""}`}>
+        <p className={`truncate ${icon ? "flex items-center gap-2" : ""}`}>
           {icon}
           <span className="break-words">{title}</span>
         </p>

apps/app/components/command-palette/command-k.tsx

@@ -0,0 +1,776 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// cmdk
+import { Command } from "cmdk";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import workspaceService from "services/workspace.service";
+import issuesService from "services/issues.service";
+import inboxService from "services/inbox.service";
+// hooks
+import useProjectDetails from "hooks/use-project-details";
+import useDebounce from "hooks/use-debounce";
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// components
+import {
+  ChangeInterfaceTheme,
+  ChangeIssueAssignee,
+  ChangeIssuePriority,
+  ChangeIssueState,
+  commandGroups,
+} from "components/command-palette";
+// ui
+import { Icon, Loader, ToggleSwitch, Tooltip } from "components/ui";
+// icons
+import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
+import { InboxIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IIssue, IWorkspaceSearchResults } from "types";
+// fetch-keys
+import { INBOX_LIST, ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+type Props = {
+  deleteIssue: () => void;
+  isPaletteOpen: boolean;
+  setIsPaletteOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPaletteOpen }) => {
+  const [placeholder, setPlaceholder] = useState("Type a command or search...");
+
+  const [resultsCount, setResultsCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [results, setResults] = useState<IWorkspaceSearchResults>({
+    results: {
+      workspace: [],
+      project: [],
+      issue: [],
+      cycle: [],
+      module: [],
+      issue_view: [],
+      page: [],
+    },
+  });
+  const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
+
+  const [pages, setPages] = useState<string[]>([]);
+  const page = pages[pages.length - 1];
+
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
+
+  const { data: issueDetails } = useSWR(
+    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
+    workspaceSlug && projectId && issueId
+      ? () =>
+          issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      : null
+  );
+
+  const { data: inboxList } = useSWR(
+    workspaceSlug && projectId ? INBOX_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const updateIssue = useCallback(
+    async (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate<IIssue>(
+        ISSUE_DETAILS(issueId as string),
+
+        (prevData) => {
+          if (!prevData) return prevData;
+
+          return {
+            ...prevData,
+            ...formData,
+          };
+        },
+        false
+      );
+
+      const payload = { ...formData };
+      await issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
+        .then(() => {
+          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+          mutate(ISSUE_DETAILS(issueId as string));
+        })
+        .catch((e) => {
+          console.error(e);
+        });
+    },
+    [workspaceSlug, issueId, projectId, user]
+  );
+
+  const handleIssueAssignees = (assignee: string) => {
+    if (!issueDetails) return;
+
+    setIsPaletteOpen(false);
+    const updatedAssignees = issueDetails.assignees ?? [];
+
+    if (updatedAssignees.includes(assignee)) {
+      updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
+    } else {
+      updatedAssignees.push(assignee);
+    }
+    updateIssue({ assignees_list: updatedAssignees });
+  };
+
+  const redirect = (path: string) => {
+    setIsPaletteOpen(false);
+    router.push(path);
+  };
+
+  const createNewWorkspace = () => {
+    setIsPaletteOpen(false);
+    router.push("/create-workspace");
+  };
+
+  const copyIssueUrlToClipboard = useCallback(() => {
+    if (!router.query.issueId) return;
+
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Copied to clipboard",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Some error occurred",
+        });
+      });
+  }, [router, setToastAlert]);
+
+  useEffect(
+    () => {
+      if (!workspaceSlug) return;
+
+      setIsLoading(true);
+
+      if (debouncedSearchTerm) {
+        setIsSearching(true);
+        workspaceService
+          .searchWorkspace(workspaceSlug as string, {
+            ...(projectId ? { project_id: projectId.toString() } : {}),
+            search: debouncedSearchTerm,
+            workspace_search: !projectId ? true : isWorkspaceLevel,
+          })
+          .then((results) => {
+            setResults(results);
+            const count = Object.keys(results.results).reduce(
+              (accumulator, key) => (results.results as any)[key].length + accumulator,
+              0
+            );
+            setResultsCount(count);
+          })
+          .finally(() => {
+            setIsLoading(false);
+            setIsSearching(false);
+          });
+      } else {
+        setResults({
+          results: {
+            workspace: [],
+            project: [],
+            issue: [],
+            cycle: [],
+            module: [],
+            issue_view: [],
+            page: [],
+          },
+        });
+        setIsLoading(false);
+        setIsSearching(false);
+      }
+    },
+    [debouncedSearchTerm, isWorkspaceLevel, projectId, workspaceSlug] // Only call effect if debounced search term changes
+  );
+
+  if (!user) return null;
+
+  return (
+    <Transition.Root
+      show={isPaletteOpen}
+      afterLeave={() => {
+        setSearchTerm("");
+      }}
+      as={React.Fragment}
+    >
+      <Dialog as="div" className="relative z-30" onClose={() => setIsPaletteOpen(false)}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            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 mx-auto max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
+              <Command
+                filter={(value, search) => {
+                  if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+                  return 0;
+                }}
+                onKeyDown={(e) => {
+                  // when search is empty and page is undefined
+                  // when user tries to close the modal with esc
+                  if (e.key === "Escape" && !page && !searchTerm) {
+                    setIsPaletteOpen(false);
+                  }
+                  // Escape goes to previous page
+                  // Backspace goes to previous page when search is empty
+                  if (e.key === "Escape" || (e.key === "Backspace" && !searchTerm)) {
+                    e.preventDefault();
+                    setPages((pages) => pages.slice(0, -1));
+                    setPlaceholder("Type a command or search...");
+                  }
+                }}
+              >
+                <div
+                  className={`flex sm:items-center gap-4 p-3 pb-0 ${
+                    issueDetails ? "flex-col sm:flex-row justify-between" : "justify-end"
+                  }`}
+                >
+                  {issueDetails && (
+                    <div className="overflow-hidden truncate rounded-md bg-custom-background-80 p-2 text-xs font-medium text-custom-text-200">
+                      {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}{" "}
+                      {issueDetails.name}
+                    </div>
+                  )}
+                  {projectId && (
+                    <Tooltip tooltipContent="Toggle workspace level search">
+                      <div className="flex-shrink-0 self-end sm:self-center flex items-center gap-1 text-xs cursor-pointer">
+                        <button
+                          type="button"
+                          onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                          className="flex-shrink-0"
+                        >
+                          Workspace Level
+                        </button>
+                        <ToggleSwitch
+                          value={isWorkspaceLevel}
+                          onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                        />
+                      </div>
+                    </Tooltip>
+                  )}
+                </div>
+                <div className="relative">
+                  <MagnifyingGlassIcon
+                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-200"
+                    aria-hidden="true"
+                  />
+                  <Command.Input
+                    className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-custom-text-100 placeholder:text-custom-text-400 outline-none focus:ring-0 text-sm"
+                    placeholder={placeholder}
+                    value={searchTerm}
+                    onValueChange={(e) => {
+                      setSearchTerm(e);
+                    }}
+                    autoFocus
+                    tabIndex={1}
+                  />
+                </div>
+
+                <Command.List className="max-h-96 overflow-scroll p-2">
+                  {searchTerm !== "" && (
+                    <h5 className="text-xs text-custom-text-100 mx-[3px] my-4">
+                      Search results for{" "}
+                      <span className="font-medium">
+                        {'"'}
+                        {searchTerm}
+                        {'"'}
+                      </span>{" "}
+                      in {!projectId || isWorkspaceLevel ? "workspace" : "project"}:
+                    </h5>
+                  )}
+
+                  {!isLoading &&
+                    resultsCount === 0 &&
+                    searchTerm !== "" &&
+                    debouncedSearchTerm !== "" && (
+                      <div className="my-4 text-center text-custom-text-200">No results found.</div>
+                    )}
+
+                  {(isLoading || isSearching) && (
+                    <Command.Loading>
+                      <Loader className="space-y-3">
+                        <Loader.Item height="40px" />
+                        <Loader.Item height="40px" />
+                        <Loader.Item height="40px" />
+                        <Loader.Item height="40px" />
+                      </Loader>
+                    </Command.Loading>
+                  )}
+
+                  {debouncedSearchTerm !== "" &&
+                    Object.keys(results.results).map((key) => {
+                      const section = (results.results as any)[key];
+                      const currentSection = commandGroups[key];
+
+                      if (section.length > 0) {
+                        return (
+                          <Command.Group key={key} heading={currentSection.title}>
+                            {section.map((item: any) => (
+                              <Command.Item
+                                key={item.id}
+                                onSelect={() => {
+                                  router.push(currentSection.path(item));
+                                  setIsPaletteOpen(false);
+                                }}
+                                value={`${key}-${item?.name}`}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
+                                  <Icon iconName={currentSection.icon} />
+                                  <p className="block flex-1 truncate">
+                                    {currentSection.itemName(item)}
+                                  </p>
+                                </div>
+                              </Command.Item>
+                            ))}
+                          </Command.Group>
+                        );
+                      }
+                    })}
+
+                  {!page && (
+                    <>
+                      {issueId && (
+                        <Command.Group heading="Issue actions">
+                          <Command.Item
+                            onSelect={() => {
+                              setPlaceholder("Change state...");
+                              setSearchTerm("");
+                              setPages([...pages, "change-issue-state"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Icon iconName="grid_view" />
+                              Change state...
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              setPlaceholder("Change priority...");
+                              setSearchTerm("");
+                              setPages([...pages, "change-issue-priority"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Icon iconName="bar_chart" />
+                              Change priority...
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              setPlaceholder("Assign to...");
+                              setSearchTerm("");
+                              setPages([...pages, "change-issue-assignee"]);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Icon iconName="group" />
+                              Assign to...
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              handleIssueAssignees(user.id);
+                              setSearchTerm("");
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              {issueDetails?.assignees.includes(user.id) ? (
+                                <>
+                                  <Icon iconName="person_remove" />
+                                  Un-assign from me
+                                </>
+                              ) : (
+                                <>
+                                  <Icon iconName="person_add" />
+                                  Assign to me
+                                </>
+                              )}
+                            </div>
+                          </Command.Item>
+                          <Command.Item onSelect={deleteIssue} className="focus:outline-none">
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Icon iconName="delete" />
+                              Delete issue
+                            </div>
+                          </Command.Item>
+                          <Command.Item
+                            onSelect={() => {
+                              setIsPaletteOpen(false);
+                              copyIssueUrlToClipboard();
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Icon iconName="link" />
+                              Copy issue URL
+                            </div>
+                          </Command.Item>
+                        </Command.Group>
+                      )}
+                      <Command.Group heading="Issue">
+                        <Command.Item
+                          onSelect={() => {
+                            const e = new KeyboardEvent("keydown", {
+                              key: "c",
+                            });
+                            document.dispatchEvent(e);
+                          }}
+                          className="focus:bg-custom-background-80"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <Icon iconName="stack" />
+                            Create new issue
+                          </div>
+                          <kbd>C</kbd>
+                        </Command.Item>
+                      </Command.Group>
+
+                      {workspaceSlug && (
+                        <Command.Group heading="Project">
+                          <Command.Item
+                            onSelect={() => {
+                              const e = new KeyboardEvent("keydown", {
+                                key: "p",
+                              });
+                              document.dispatchEvent(e);
+                            }}
+                            className="focus:outline-none"
+                          >
+                            <div className="flex items-center gap-2 text-custom-text-200">
+                              <Icon iconName="create_new_folder" />
+                              Create new project
+                            </div>
+                            <kbd>P</kbd>
+                          </Command.Item>
+                        </Command.Group>
+                      )}
+
+                      {projectId && (
+                        <>
+                          <Command.Group heading="Cycle">
+                            <Command.Item
+                              onSelect={() => {
+                                const e = new KeyboardEvent("keydown", {
+                                  key: "q",
+                                });
+                                document.dispatchEvent(e);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <Icon iconName="contrast" />
+                                Create new cycle
+                              </div>
+                              <kbd>Q</kbd>
+                            </Command.Item>
+                          </Command.Group>
+                          <Command.Group heading="Module">
+                            <Command.Item
+                              onSelect={() => {
+                                const e = new KeyboardEvent("keydown", {
+                                  key: "m",
+                                });
+                                document.dispatchEvent(e);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <Icon iconName="dataset" />
+                                Create new module
+                              </div>
+                              <kbd>M</kbd>
+                            </Command.Item>
+                          </Command.Group>
+                          <Command.Group heading="View">
+                            <Command.Item
+                              onSelect={() => {
+                                const e = new KeyboardEvent("keydown", {
+                                  key: "v",
+                                });
+                                document.dispatchEvent(e);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <Icon iconName="photo_filter" />
+                                Create new view
+                              </div>
+                              <kbd>V</kbd>
+                            </Command.Item>
+                          </Command.Group>
+                          <Command.Group heading="Page">
+                            <Command.Item
+                              onSelect={() => {
+                                const e = new KeyboardEvent("keydown", {
+                                  key: "d",
+                                });
+                                document.dispatchEvent(e);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <Icon iconName="article" />
+                                Create new page
+                              </div>
+                              <kbd>D</kbd>
+                            </Command.Item>
+                          </Command.Group>
+                          {projectDetails && projectDetails.inbox_view && (
+                            <Command.Group heading="Inbox">
+                              <Command.Item
+                                onSelect={() =>
+                                  redirect(
+                                    `/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`
+                                  )
+                                }
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <InboxIcon className="h-4 w-4" color="#6b7280" />
+                                  Open inbox
+                                </div>
+                              </Command.Item>
+                            </Command.Group>
+                          )}
+                        </>
+                      )}
+
+                      <Command.Group heading="Workspace Settings">
+                        <Command.Item
+                          onSelect={() => {
+                            setPlaceholder("Search workspace settings...");
+                            setSearchTerm("");
+                            setPages([...pages, "settings"]);
+                          }}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <Icon iconName="settings" />
+                            Search settings...
+                          </div>
+                        </Command.Item>
+                      </Command.Group>
+                      <Command.Group heading="Account">
+                        <Command.Item onSelect={createNewWorkspace} className="focus:outline-none">
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <Icon iconName="create_new_folder" />
+                            Create new workspace
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => {
+                            setPlaceholder("Change interface theme...");
+                            setSearchTerm("");
+                            setPages([...pages, "change-interface-theme"]);
+                          }}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <Icon iconName="settings" />
+                            Change interface theme...
+                          </div>
+                        </Command.Item>
+                      </Command.Group>
+                      <Command.Group heading="Help">
+                        <Command.Item
+                          onSelect={() => {
+                            setIsPaletteOpen(false);
+                            const e = new KeyboardEvent("keydown", {
+                              key: "h",
+                            });
+                            document.dispatchEvent(e);
+                          }}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <Icon iconName="rocket_launch" />
+                            Open keyboard shortcuts
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => {
+                            setIsPaletteOpen(false);
+                            window.open("https://docs.plane.so/", "_blank");
+                          }}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <Icon iconName="article" />
+                            Open Plane documentation
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => {
+                            setIsPaletteOpen(false);
+                            window.open("https://discord.com/invite/A92xrEGCge", "_blank");
+                          }}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <DiscordIcon className="h-4 w-4" color="#6b7280" />
+                            Join our Discord
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => {
+                            setIsPaletteOpen(false);
+                            window.open(
+                              "https://github.com/makeplane/plane/issues/new/choose",
+                              "_blank"
+                            );
+                          }}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <GithubIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                            Report a bug
+                          </div>
+                        </Command.Item>
+                        <Command.Item
+                          onSelect={() => {
+                            setIsPaletteOpen(false);
+                            (window as any).$crisp.push(["do", "chat:open"]);
+                          }}
+                          className="focus:outline-none"
+                        >
+                          <div className="flex items-center gap-2 text-custom-text-200">
+                            <Icon iconName="sms" />
+                            Chat with us
+                          </div>
+                        </Command.Item>
+                      </Command.Group>
+                    </>
+                  )}
+
+                  {page === "settings" && workspaceSlug && (
+                    <>
+                      <Command.Item
+                        onSelect={() => redirect(`/${workspaceSlug}/settings`)}
+                        className="focus:outline-none"
+                      >
+                        <div className="flex items-center gap-2 text-custom-text-200">
+                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                          General
+                        </div>
+                      </Command.Item>
+                      <Command.Item
+                        onSelect={() => redirect(`/${workspaceSlug}/settings/members`)}
+                        className="focus:outline-none"
+                      >
+                        <div className="flex items-center gap-2 text-custom-text-200">
+                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                          Members
+                        </div>
+                      </Command.Item>
+                      <Command.Item
+                        onSelect={() => redirect(`/${workspaceSlug}/settings/billing`)}
+                        className="focus:outline-none"
+                      >
+                        <div className="flex items-center gap-2 text-custom-text-200">
+                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                          Billing and Plans
+                        </div>
+                      </Command.Item>
+                      <Command.Item
+                        onSelect={() => redirect(`/${workspaceSlug}/settings/integrations`)}
+                        className="focus:outline-none"
+                      >
+                        <div className="flex items-center gap-2 text-custom-text-200">
+                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                          Integrations
+                        </div>
+                      </Command.Item>
+                      <Command.Item
+                        onSelect={() => redirect(`/${workspaceSlug}/settings/import-export`)}
+                        className="focus:outline-none"
+                      >
+                        <div className="flex items-center gap-2 text-custom-text-200">
+                          <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                          Import/Export
+                        </div>
+                      </Command.Item>
+                    </>
+                  )}
+                  {page === "change-issue-state" && issueDetails && (
+                    <ChangeIssueState
+                      issue={issueDetails}
+                      setIsPaletteOpen={setIsPaletteOpen}
+                      user={user}
+                    />
+                  )}
+                  {page === "change-issue-priority" && issueDetails && (
+                    <ChangeIssuePriority
+                      issue={issueDetails}
+                      setIsPaletteOpen={setIsPaletteOpen}
+                      user={user}
+                    />
+                  )}
+                  {page === "change-issue-assignee" && issueDetails && (
+                    <ChangeIssueAssignee
+                      issue={issueDetails}
+                      setIsPaletteOpen={setIsPaletteOpen}
+                      user={user}
+                    />
+                  )}
+                  {page === "change-interface-theme" && (
+                    <ChangeInterfaceTheme setIsPaletteOpen={setIsPaletteOpen} />
+                  )}
+                </Command.List>
+              </Command>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/app/components/command-palette/command-pallette.tsx

@@ -1,53 +1,15 @@
-import { useRouter } from "next/router";
 import React, { useCallback, useEffect, useState } from "react";
-import useSWR, { mutate } from "swr";
 
-// icons
-import {
-  ArrowRightIcon,
-  ChartBarIcon,
-  ChatBubbleOvalLeftEllipsisIcon,
-  DocumentTextIcon,
-  FolderPlusIcon,
-  InboxIcon,
-  LinkIcon,
-  MagnifyingGlassIcon,
-  RocketLaunchIcon,
-  Squares2X2Icon,
-  TrashIcon,
-  UserMinusIcon,
-  UserPlusIcon,
-  UsersIcon,
-} from "@heroicons/react/24/outline";
-import {
-  AssignmentClipboardIcon,
-  ContrastIcon,
-  DiscordIcon,
-  DocumentIcon,
-  GithubIcon,
-  LayerDiagonalIcon,
-  PeopleGroupIcon,
-  SettingIcon,
-  ViewListIcon,
-} from "components/icons";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// cmdk
-import { Command } from "cmdk";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
 // hooks
-import useProjectDetails from "hooks/use-project-details";
 import useTheme from "hooks/use-theme";
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
-import useDebounce from "hooks/use-debounce";
 // components
-import {
-  ShortcutsModal,
-  ChangeIssueState,
-  ChangeIssuePriority,
-  ChangeIssueAssignee,
-  ChangeInterfaceTheme,
-} from "components/command-palette";
+import { CommandK, ShortcutsModal } from "components/command-palette";
 import { BulkDeleteIssuesModal } from "components/core";
 import { CreateUpdateCycleModal } from "components/cycles";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
@@ -55,22 +17,13 @@ import { CreateUpdateModuleModal } from "components/modules";
 import { CreateProjectModal } from "components/project";
 import { CreateUpdateViewModal } from "components/views";
 import { CreateUpdatePageModal } from "components/pages";
-
-import { Spinner } from "components/ui";
 // helpers
-import {
-  capitalizeFirstLetter,
-  copyTextToClipboard,
-  replaceUnderscoreIfSnakeCase,
-} from "helpers/string.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
 // services
 import issuesService from "services/issues.service";
-import workspaceService from "services/workspace.service";
 import inboxService from "services/inbox.service";
-// types
-import { IIssue, IWorkspaceSearchResults } from "types";
 // fetch keys
-import { INBOX_LIST, ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import { INBOX_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
 export const CommandPalette: React.FC = () => {
   const [isPaletteOpen, setIsPaletteOpen] = useState(false);
@@ -84,36 +37,15 @@ export const CommandPalette: React.FC = () => {
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
 
-  const [searchTerm, setSearchTerm] = useState("");
-  const [results, setResults] = useState<IWorkspaceSearchResults>({
-    results: {
-      workspace: [],
-      project: [],
-      issue: [],
-      cycle: [],
-      module: [],
-      issue_view: [],
-      page: [],
-    },
-  });
-  const [resultsCount, setResultsCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSearching, setIsSearching] = useState(false);
-  const debouncedSearchTerm = useDebounce(searchTerm, 500);
-  const [placeholder, setPlaceholder] = React.useState("Type a command or search...");
-  const [pages, setPages] = React.useState<string[]>([]);
-  const page = pages[pages.length - 1];
-
   const router = useRouter();
   const { workspaceSlug, projectId, issueId, inboxId } = router.query;
 
   const { user } = useUser();
-  const { projectDetails } = useProjectDetails();
 
   const { setToastAlert } = useToast();
   const { toggleCollapsed } = useTheme();
 
-  const { data: issueDetails } = useSWR<IIssue | undefined>(
+  const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId
       ? () =>
@@ -121,59 +53,6 @@ export const CommandPalette: React.FC = () => {
       : null
   );
 
-  const { data: inboxList } = useSWR(
-    workspaceSlug && projectId ? INBOX_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const updateIssue = useCallback(
-    async (formData: Partial<IIssue>) => {
-      if (!workspaceSlug || !projectId || !issueId) return;
-
-      mutate<IIssue>(
-        ISSUE_DETAILS(issueId as string),
-
-        (prevData) => {
-          if (!prevData) return prevData;
-
-          return {
-            ...prevData,
-            ...formData,
-          };
-        },
-        false
-      );
-
-      const payload = { ...formData };
-      await issuesService
-        .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
-        .then(() => {
-          mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
-          mutate(ISSUE_DETAILS(issueId as string));
-        })
-        .catch((e) => {
-          console.error(e);
-        });
-    },
-    [workspaceSlug, issueId, projectId, user]
-  );
-
-  const handleIssueAssignees = (assignee: string) => {
-    if (!issueDetails) return;
-
-    setIsPaletteOpen(false);
-    const updatedAssignees = issueDetails.assignees ?? [];
-
-    if (updatedAssignees.includes(assignee)) {
-      updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
-    } else {
-      updatedAssignees.push(assignee);
-    }
-    updateIssue({ assignees_list: updatedAssignees });
-  };
-
   const copyIssueUrlToClipboard = useCallback(() => {
     if (!router.query.issueId) return;
 
@@ -246,98 +125,17 @@ export const CommandPalette: React.FC = () => {
 
   useEffect(() => {
     document.addEventListener("keydown", handleKeyDown);
+
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [handleKeyDown]);
 
-  useEffect(
-    () => {
-      if (!workspaceSlug || !projectId) return;
-
-      setIsLoading(true);
-      // this is done prevent subsequent api request
-      // or searchTerm has not been updated within last 500ms.
-      if (debouncedSearchTerm) {
-        setIsSearching(true);
-        workspaceService
-          .searchWorkspace(workspaceSlug as string, projectId as string, debouncedSearchTerm)
-          .then((results) => {
-            setResults(results);
-            const count = Object.keys(results.results).reduce(
-              (accumulator, key) => (results.results as any)[key].length + accumulator,
-              0
-            );
-            setResultsCount(count);
-          })
-          .finally(() => {
-            setIsLoading(false);
-            setIsSearching(false);
-          });
-      } else {
-        setResults({
-          results: {
-            workspace: [],
-            project: [],
-            issue: [],
-            cycle: [],
-            module: [],
-            issue_view: [],
-            page: [],
-          },
-        });
-        setIsLoading(false);
-        setIsSearching(false);
-      }
-    },
-    [debouncedSearchTerm, workspaceSlug, projectId] // Only call effect if debounced search term changes
-  );
-
   if (!user) return null;
 
-  const createNewWorkspace = () => {
-    setIsPaletteOpen(false);
-    router.push("/create-workspace");
-  };
-
-  const createNewProject = () => {
-    setIsPaletteOpen(false);
-    setIsProjectModalOpen(true);
-  };
-
-  const createNewIssue = () => {
-    setIsPaletteOpen(false);
-    setIsIssueModalOpen(true);
-  };
-
-  const createNewCycle = () => {
-    setIsPaletteOpen(false);
-    setIsCreateCycleModalOpen(true);
-  };
-
-  const createNewView = () => {
-    setIsPaletteOpen(false);
-    setIsCreateViewModalOpen(true);
-  };
-
-  const createNewPage = () => {
-    setIsPaletteOpen(false);
-    setIsCreateUpdatePageModalOpen(true);
-  };
-
-  const createNewModule = () => {
-    setIsPaletteOpen(false);
-    setIsCreateModuleModalOpen(true);
-  };
-
   const deleteIssue = () => {
     setIsPaletteOpen(false);
     setDeleteIssueModal(true);
   };
 
-  const redirect = (path: string) => {
-    setIsPaletteOpen(false);
-    router.push(path);
-  };
-
   return (
     <>
       <ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
@@ -380,7 +178,6 @@ export const CommandPalette: React.FC = () => {
           user={user}
         />
       )}
-
       <CreateUpdateIssueModal
         isOpen={isIssueModalOpen}
         handleClose={() => setIsIssueModalOpen(false)}
@@ -391,538 +188,11 @@ export const CommandPalette: React.FC = () => {
         setIsOpen={setIsBulkDeleteIssuesModalOpen}
         user={user}
       />
-      <Transition.Root
-        show={isPaletteOpen}
-        afterLeave={() => {
-          setSearchTerm("");
-        }}
-        as={React.Fragment}
-      >
-        <Dialog as="div" className="relative z-30" onClose={() => setIsPaletteOpen(false)}>
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              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 mx-auto max-w-2xl transform divide-y divide-custom-border-100 divide-opacity-10 rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
-                <Command
-                  filter={(value, search) => {
-                    if (value.toLowerCase().includes(search.toLowerCase())) return 1;
-                    return 0;
-                  }}
-                  onKeyDown={(e) => {
-                    // when search is empty and page is undefined
-                    // when user tries to close the modal with esc
-                    if (e.key === "Escape" && !page && !searchTerm) {
-                      setIsPaletteOpen(false);
-                    }
-                    // Escape goes to previous page
-                    // Backspace goes to previous page when search is empty
-                    if (e.key === "Escape" || (e.key === "Backspace" && !searchTerm)) {
-                      e.preventDefault();
-                      setPages((pages) => pages.slice(0, -1));
-                      setPlaceholder("Type a command or search...");
-                    }
-                  }}
-                >
-                  {issueId && issueDetails && (
-                    <div className="flex p-3">
-                      <p className="overflow-hidden truncate rounded-md bg-custom-background-90 p-1 px-2 text-xs font-medium text-custom-text-200">
-                        {issueDetails.project_detail?.identifier}-{issueDetails.sequence_id}{" "}
-                        {issueDetails?.name}
-                      </p>
-                    </div>
-                  )}
-                  <div className="relative">
-                    <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-200"
-                      aria-hidden="true"
-                    />
-                    <Command.Input
-                      className="w-full border-0 border-b border-custom-border-100 bg-transparent p-4 pl-11 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
-                      placeholder={placeholder}
-                      value={searchTerm}
-                      onValueChange={(e) => {
-                        setSearchTerm(e);
-                      }}
-                      autoFocus
-                    />
-                  </div>
-                  <Command.List className="max-h-96 overflow-scroll p-2">
-                    {!isLoading &&
-                      resultsCount === 0 &&
-                      searchTerm !== "" &&
-                      debouncedSearchTerm !== "" && (
-                        <div className="my-4 text-center text-custom-text-200">
-                          No results found.
-                        </div>
-                      )}
-
-                    {(isLoading || isSearching) && (
-                      <Command.Loading>
-                        <div className="flex h-full w-full items-center justify-center py-8">
-                          <Spinner />
-                        </div>
-                      </Command.Loading>
-                    )}
-
-                    {debouncedSearchTerm !== "" && (
-                      <>
-                        {Object.keys(results.results).map((key) => {
-                          const section = (results.results as any)[key];
-                          if (section.length > 0) {
-                            return (
-                              <Command.Group
-                                heading={capitalizeFirstLetter(replaceUnderscoreIfSnakeCase(key))}
-                                key={key}
-                              >
-                                {section.map((item: any) => {
-                                  let path = "";
-                                  let value = item.name;
-                                  let Icon: any = ArrowRightIcon;
-
-                                  if (key === "workspace") {
-                                    path = `/${item.slug}`;
-                                    Icon = FolderPlusIcon;
-                                  } else if (key == "project") {
-                                    path = `/${item.workspace__slug}/projects/${item.id}/issues`;
-                                    Icon = AssignmentClipboardIcon;
-                                  } else if (key === "issue") {
-                                    path = `/${item.workspace__slug}/projects/${item.project_id}/issues/${item.id}`;
-                                    // user can search id-num idnum or issue name
-                                    value = `${item.project__identifier}-${item.sequence_id} ${item.project__identifier}${item.sequence_id} ${item.name}`;
-                                    Icon = LayerDiagonalIcon;
-                                  } else if (key === "issue_view") {
-                                    path = `/${item.workspace__slug}/projects/${item.project_id}/views/${item.id}`;
-                                    Icon = ViewListIcon;
-                                  } else if (key === "module") {
-                                    path = `/${item.workspace__slug}/projects/${item.project_id}/modules/${item.id}`;
-                                    Icon = PeopleGroupIcon;
-                                  } else if (key === "page") {
-                                    path = `/${item.workspace__slug}/projects/${item.project_id}/pages/${item.id}`;
-                                    Icon = DocumentTextIcon;
-                                  } else if (key === "cycle") {
-                                    path = `/${item.workspace__slug}/projects/${item.project_id}/cycles/${item.id}`;
-                                    Icon = ContrastIcon;
-                                  }
-
-                                  return (
-                                    <Command.Item
-                                      key={item.id}
-                                      onSelect={() => {
-                                        router.push(path);
-                                        setIsPaletteOpen(false);
-                                      }}
-                                      value={value}
-                                      className="focus:outline-none"
-                                    >
-                                      <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
-                                        <Icon
-                                          className="h-4 w-4 text-custom-text-200"
-                                          color="#6b7280"
-                                        />
-                                        <p className="block flex-1 truncate">{item.name}</p>
-                                      </div>
-                                    </Command.Item>
-                                  );
-                                })}
-                              </Command.Group>
-                            );
-                          }
-                        })}
-                      </>
-                    )}
-
-                    {!page && (
-                      <>
-                        {issueId && (
-                          <>
-                            <Command.Item
-                              onSelect={() => {
-                                setPlaceholder("Change state...");
-                                setSearchTerm("");
-                                setPages([...pages, "change-issue-state"]);
-                              }}
-                              className="focus:outline-none"
-                            >
-                              <div className="flex items-center gap-2 text-custom-text-200">
-                                <Squares2X2Icon className="h-4 w-4 text-custom-text-200" />
-                                Change state...
-                              </div>
-                            </Command.Item>
-                            <Command.Item
-                              onSelect={() => {
-                                setPlaceholder("Change priority...");
-                                setSearchTerm("");
-                                setPages([...pages, "change-issue-priority"]);
-                              }}
-                              className="focus:outline-none"
-                            >
-                              <div className="flex items-center gap-2 text-custom-text-200">
-                                <ChartBarIcon className="h-4 w-4 text-custom-text-200" />
-                                Change priority...
-                              </div>
-                            </Command.Item>
-                            <Command.Item
-                              onSelect={() => {
-                                setPlaceholder("Assign to...");
-                                setSearchTerm("");
-                                setPages([...pages, "change-issue-assignee"]);
-                              }}
-                              className="focus:outline-none"
-                            >
-                              <div className="flex items-center gap-2 text-custom-text-200">
-                                <UsersIcon className="h-4 w-4 text-custom-text-200" />
-                                Assign to...
-                              </div>
-                            </Command.Item>
-                            <Command.Item
-                              onSelect={() => {
-                                handleIssueAssignees(user.id);
-                                setSearchTerm("");
-                              }}
-                              className="focus:outline-none"
-                            >
-                              <div className="flex items-center gap-2 text-custom-text-200">
-                                {issueDetails?.assignees.includes(user.id) ? (
-                                  <>
-                                    <UserMinusIcon className="h-4 w-4 text-custom-text-200" />
-                                    Un-assign from me
-                                  </>
-                                ) : (
-                                  <>
-                                    <UserPlusIcon className="h-4 w-4 text-custom-text-200" />
-                                    Assign to me
-                                  </>
-                                )}
-                              </div>
-                            </Command.Item>
-
-                            <Command.Item onSelect={deleteIssue} className="focus:outline-none">
-                              <div className="flex items-center gap-2 text-custom-text-200">
-                                <TrashIcon className="h-4 w-4 text-custom-text-200" />
-                                Delete issue
-                              </div>
-                            </Command.Item>
-                            <Command.Item
-                              onSelect={() => {
-                                setIsPaletteOpen(false);
-                                copyIssueUrlToClipboard();
-                              }}
-                              className="focus:outline-none"
-                            >
-                              <div className="flex items-center gap-2 text-custom-text-200">
-                                <LinkIcon className="h-4 w-4 text-custom-text-200" />
-                                Copy issue URL to clipboard
-                              </div>
-                            </Command.Item>
-                          </>
-                        )}
-                        <Command.Group heading="Issue">
-                          <Command.Item
-                            onSelect={createNewIssue}
-                            className="focus:bg-custom-background-80"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <LayerDiagonalIcon className="h-4 w-4" color="#6b7280" />
-                              Create new issue
-                            </div>
-                            <kbd>C</kbd>
-                          </Command.Item>
-                        </Command.Group>
-
-                        {workspaceSlug && (
-                          <Command.Group heading="Project">
-                            <Command.Item
-                              onSelect={createNewProject}
-                              className="focus:outline-none"
-                            >
-                              <div className="flex items-center gap-2 text-custom-text-200">
-                                <AssignmentClipboardIcon className="h-4 w-4" color="#6b7280" />
-                                Create new project
-                              </div>
-                              <kbd>P</kbd>
-                            </Command.Item>
-                          </Command.Group>
-                        )}
-
-                        {projectId && (
-                          <>
-                            <Command.Group heading="Cycle">
-                              <Command.Item
-                                onSelect={createNewCycle}
-                                className="focus:outline-none"
-                              >
-                                <div className="flex items-center gap-2 text-custom-text-200">
-                                  <ContrastIcon className="h-4 w-4" color="#6b7280" />
-                                  Create new cycle
-                                </div>
-                                <kbd>Q</kbd>
-                              </Command.Item>
-                            </Command.Group>
-
-                            <Command.Group heading="Module">
-                              <Command.Item
-                                onSelect={createNewModule}
-                                className="focus:outline-none"
-                              >
-                                <div className="flex items-center gap-2 text-custom-text-200">
-                                  <PeopleGroupIcon className="h-4 w-4" color="#6b7280" />
-                                  Create new module
-                                </div>
-                                <kbd>M</kbd>
-                              </Command.Item>
-                            </Command.Group>
-
-                            <Command.Group heading="View">
-                              <Command.Item onSelect={createNewView} className="focus:outline-none">
-                                <div className="flex items-center gap-2 text-custom-text-200">
-                                  <ViewListIcon className="h-4 w-4" color="#6b7280" />
-                                  Create new view
-                                </div>
-                                <kbd>V</kbd>
-                              </Command.Item>
-                            </Command.Group>
-
-                            <Command.Group heading="Page">
-                              <Command.Item onSelect={createNewPage} className="focus:outline-none">
-                                <div className="flex items-center gap-2 text-custom-text-200">
-                                  <DocumentTextIcon className="h-4 w-4" color="#6b7280" />
-                                  Create new page
-                                </div>
-                                <kbd>D</kbd>
-                              </Command.Item>
-                            </Command.Group>
-
-                            {projectDetails && projectDetails.inbox_view && (
-                              <Command.Group heading="Inbox">
-                                <Command.Item
-                                  onSelect={() =>
-                                    redirect(
-                                      `/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`
-                                    )
-                                  }
-                                  className="focus:outline-none"
-                                >
-                                  <div className="flex items-center gap-2 text-custom-text-200">
-                                    <InboxIcon className="h-4 w-4" color="#6b7280" />
-                                    Open inbox
-                                  </div>
-                                </Command.Item>
-                              </Command.Group>
-                            )}
-                          </>
-                        )}
-
-                        <Command.Group heading="Workspace Settings">
-                          <Command.Item
-                            onSelect={() => {
-                              setPlaceholder("Search workspace settings...");
-                              setSearchTerm("");
-                              setPages([...pages, "settings"]);
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <SettingIcon className="h-4 w-4" color="#6b7280" />
-                              Search settings...
-                            </div>
-                          </Command.Item>
-                        </Command.Group>
-                        <Command.Group heading="Account">
-                          <Command.Item
-                            onSelect={createNewWorkspace}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <FolderPlusIcon className="h-4 w-4 text-custom-text-200" />
-                              Create new workspace
-                            </div>
-                          </Command.Item>
-                          <Command.Item
-                            onSelect={() => {
-                              setPlaceholder("Change interface theme...");
-                              setSearchTerm("");
-                              setPages([...pages, "change-interface-theme"]);
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                              Change interface theme...
-                            </div>
-                          </Command.Item>
-                        </Command.Group>
-                        <Command.Group heading="Help">
-                          <Command.Item
-                            onSelect={() => {
-                              setIsPaletteOpen(false);
-                              const e = new KeyboardEvent("keydown", {
-                                key: "h",
-                              });
-                              document.dispatchEvent(e);
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <RocketLaunchIcon className="h-4 w-4 text-custom-text-200" />
-                              Open keyboard shortcuts
-                            </div>
-                          </Command.Item>
-                          <Command.Item
-                            onSelect={() => {
-                              setIsPaletteOpen(false);
-                              window.open("https://docs.plane.so/", "_blank");
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <DocumentIcon className="h-4 w-4 text-custom-text-200" />
-                              Open Plane documentation
-                            </div>
-                          </Command.Item>
-                          <Command.Item
-                            onSelect={() => {
-                              setIsPaletteOpen(false);
-                              window.open("https://discord.com/invite/A92xrEGCge", "_blank");
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <DiscordIcon className="h-4 w-4" color="#6b7280" />
-                              Join our Discord
-                            </div>
-                          </Command.Item>
-                          <Command.Item
-                            onSelect={() => {
-                              setIsPaletteOpen(false);
-                              window.open(
-                                "https://github.com/makeplane/plane/issues/new/choose",
-                                "_blank"
-                              );
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <GithubIcon className="h-4 w-4" color="#6b7280" />
-                              Report a bug
-                            </div>
-                          </Command.Item>
-                          <Command.Item
-                            onSelect={() => {
-                              setIsPaletteOpen(false);
-                              (window as any).$crisp.push(["do", "chat:open"]);
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-custom-text-200" />
-                              Chat with us
-                            </div>
-                          </Command.Item>
-                        </Command.Group>
-                      </>
-                    )}
-
-                    {page === "settings" && workspaceSlug && (
-                      <>
-                        <Command.Item
-                          onSelect={() => redirect(`/${workspaceSlug}/settings`)}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                            General
-                          </div>
-                        </Command.Item>
-                        <Command.Item
-                          onSelect={() => redirect(`/${workspaceSlug}/settings/members`)}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                            Members
-                          </div>
-                        </Command.Item>
-                        <Command.Item
-                          onSelect={() => redirect(`/${workspaceSlug}/settings/billing`)}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                            Billing and Plans
-                          </div>
-                        </Command.Item>
-                        <Command.Item
-                          onSelect={() => redirect(`/${workspaceSlug}/settings/integrations`)}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                            Integrations
-                          </div>
-                        </Command.Item>
-                        <Command.Item
-                          onSelect={() => redirect(`/${workspaceSlug}/settings/import-export`)}
-                          className="focus:outline-none"
-                        >
-                          <div className="flex items-center gap-2 text-custom-text-200">
-                            <SettingIcon className="h-4 w-4 text-custom-text-200" />
-                            Import/Export
-                          </div>
-                        </Command.Item>
-                      </>
-                    )}
-                    {page === "change-issue-state" && issueDetails && (
-                      <>
-                        <ChangeIssueState
-                          issue={issueDetails}
-                          setIsPaletteOpen={setIsPaletteOpen}
-                          user={user}
-                        />
-                      </>
-                    )}
-                    {page === "change-issue-priority" && issueDetails && (
-                      <ChangeIssuePriority
-                        issue={issueDetails}
-                        setIsPaletteOpen={setIsPaletteOpen}
-                        user={user}
-                      />
-                    )}
-                    {page === "change-issue-assignee" && issueDetails && (
-                      <ChangeIssueAssignee
-                        issue={issueDetails}
-                        setIsPaletteOpen={setIsPaletteOpen}
-                        user={user}
-                      />
-                    )}
-                    {page === "change-interface-theme" && (
-                      <ChangeInterfaceTheme setIsPaletteOpen={setIsPaletteOpen} />
-                    )}
-                  </Command.List>
-                </Command>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition.Root>
+      <CommandK
+        deleteIssue={deleteIssue}
+        isPaletteOpen={isPaletteOpen}
+        setIsPaletteOpen={setIsPaletteOpen}
+      />
     </>
   );
 };

apps/app/components/command-palette/helpers.tsx

@@ -0,0 +1,95 @@
+// types
+import {
+  IWorkspaceDefaultSearchResult,
+  IWorkspaceIssueSearchResult,
+  IWorkspaceProjectSearchResult,
+  IWorkspaceSearchResult,
+} from "types";
+
+export const commandGroups: {
+  [key: string]: {
+    icon: string;
+    itemName: (item: any) => React.ReactNode;
+    path: (item: any) => string;
+    title: string;
+  };
+} = {
+  cycle: {
+    icon: "contrast",
+    itemName: (cycle: IWorkspaceDefaultSearchResult) => (
+      <h6>
+        <span className="text-custom-text-200 text-xs">{cycle.project__identifier}</span>
+        {"- "}
+        {cycle.name}
+      </h6>
+    ),
+    path: (cycle: IWorkspaceDefaultSearchResult) =>
+      `/${cycle?.workspace__slug}/projects/${cycle?.project_id}/cycles/${cycle?.id}`,
+    title: "Cycles",
+  },
+  issue: {
+    icon: "stack",
+    itemName: (issue: IWorkspaceIssueSearchResult) => (
+      <h6>
+        <span className="text-custom-text-200 text-xs">{issue.project__identifier}</span>
+        {"- "}
+        {issue.name}
+      </h6>
+    ),
+    path: (issue: IWorkspaceIssueSearchResult) =>
+      `/${issue?.workspace__slug}/projects/${issue?.project_id}/issues/${issue?.id}`,
+    title: "Issues",
+  },
+  issue_view: {
+    icon: "photo_filter",
+    itemName: (view: IWorkspaceDefaultSearchResult) => (
+      <h6>
+        <span className="text-custom-text-200 text-xs">{view.project__identifier}</span>
+        {"- "}
+        {view.name}
+      </h6>
+    ),
+    path: (view: IWorkspaceDefaultSearchResult) =>
+      `/${view?.workspace__slug}/projects/${view?.project_id}/views/${view?.id}`,
+    title: "Views",
+  },
+  module: {
+    icon: "dataset",
+    itemName: (module: IWorkspaceDefaultSearchResult) => (
+      <h6>
+        <span className="text-custom-text-200 text-xs">{module.project__identifier}</span>
+        {"- "}
+        {module.name}
+      </h6>
+    ),
+    path: (module: IWorkspaceDefaultSearchResult) =>
+      `/${module?.workspace__slug}/projects/${module?.project_id}/modules/${module?.id}`,
+    title: "Modules",
+  },
+  page: {
+    icon: "article",
+    itemName: (page: IWorkspaceDefaultSearchResult) => (
+      <h6>
+        <span className="text-custom-text-200 text-xs">{page.project__identifier}</span>
+        {"- "}
+        {page.name}
+      </h6>
+    ),
+    path: (page: IWorkspaceDefaultSearchResult) =>
+      `/${page?.workspace__slug}/projects/${page?.project_id}/pages/${page?.id}`,
+    title: "Pages",
+  },
+  project: {
+    icon: "work",
+    itemName: (project: IWorkspaceProjectSearchResult) => project?.name,
+    path: (project: IWorkspaceProjectSearchResult) =>
+      `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
+    title: "Projects",
+  },
+  workspace: {
+    icon: "grid_view",
+    itemName: (workspace: IWorkspaceSearchResult) => workspace?.name,
+    path: (workspace: IWorkspaceSearchResult) => `/${workspace?.slug}/`,
+    title: "Workspaces",
+  },
+};

apps/app/components/command-palette/index.ts

@@ -1,6 +1,6 @@
-export * from "./command-pallette";
-export * from "./shortcuts-modal";
-export * from "./change-issue-state";
-export * from "./change-issue-priority";
-export * from "./change-issue-assignee";
+export * from "./issue";
 export * from "./change-interface-theme";
+export * from "./command-k";
+export * from "./command-pallette";
+export * from "./helpers";
+export * from "./shortcuts-modal";

apps/app/components/command-palette/issue/change-issue-assignee.tsx

@@ -1,19 +1,23 @@
-import { useRouter } from "next/router";
 import React, { Dispatch, SetStateAction, useCallback } from "react";
-import useSWR, { mutate } from "swr";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
 
 // cmdk
 import { Command } from "cmdk";
 // services
 import issuesService from "services/issues.service";
-// types
-import { ICurrentUserResponse, IIssue } from "types";
+// hooks
+import useProjectMembers from "hooks/use-project-members";
 // constants
-import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY, PROJECT_MEMBERS } from "constants/fetch-keys";
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+// ui
+import { Avatar } from "components/ui";
 // icons
 import { CheckIcon } from "components/icons";
-import projectService from "services/project.service";
-import { Avatar } from "components/ui";
+// types
+import { ICurrentUserResponse, IIssue } from "types";
 
 type Props = {
   setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
@@ -25,12 +29,7 @@ export const ChangeIssueAssignee: React.FC<Props> = ({ setIsPaletteOpen, issue,
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
-  const { data: members } = useSWR(
-    projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
+  const { members } = useProjectMembers(workspaceSlug as string, projectId as string);
 
   const options =
     members?.map(({ member }) => ({

apps/app/components/command-palette/issue/change-issue-state.tsx

@@ -34,7 +34,7 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
-  const states = getStatesList(stateGroups ?? {});
+  const states = getStatesList(stateGroups);
 
   const submitChanges = useCallback(
     async (formData: Partial<IIssue>) => {

apps/app/components/command-palette/issue/index.ts

@@ -0,0 +1,3 @@
+export * from "./change-issue-state";
+export * from "./change-issue-priority";
+export * from "./change-issue-assignee";

apps/app/components/command-palette/shortcuts-modal.tsx

@@ -104,7 +104,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                         </span>
                       </Dialog.Title>
                       <div>
-                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-100 bg-custom-background-90 px-3 py-2">
+                        <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-200 bg-custom-background-90 px-3 py-2">
                           <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-200" />
                           <Input
                             className="w-full  border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
@@ -130,15 +130,15 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                       {shortcut.keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5">
+                                            <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5">
                                               <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
-                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
+                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
                                               <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </kbd>
                                           ) : (
-                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
+                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
                                               {key}
                                             </kbd>
                                           )}
@@ -173,15 +173,15 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                       {keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-custom-text-200">
+                                            <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-custom-text-200">
                                               <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
-                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
+                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
                                               <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
                                             </kbd>
                                           ) : (
-                                            <kbd className="rounded-sm border border-custom-border-100 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
+                                            <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
                                               {key}
                                             </kbd>
                                           )}

apps/app/components/core/activity.tsx

@@ -0,0 +1,497 @@
+import { useRouter } from "next/router";
+
+// icons
+import { Icon, Tooltip } from "components/ui";
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { BlockedIcon, BlockerIcon } from "components/icons";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { capitalizeFirstLetter } from "helpers/string.helper";
+// types
+import { IIssueActivity } from "types";
+
+const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <Tooltip
+      tooltipContent={
+        activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"
+      }
+    >
+      <a
+        href={`/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+      >
+        {activity.issue_detail
+          ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
+          : "Issue"}
+        <Icon iconName="launch" className="!text-xs" />
+      </a>
+    </Tooltip>
+  );
+};
+
+const activityDetails: {
+  [key: string]: {
+    message: (activity: IIssueActivity, showIssue: boolean) => React.ReactNode;
+    icon: React.ReactNode;
+  };
+} = {
+  assignees: {
+    message: (activity, showIssue) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            added a new assignee{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            {showIssue && (
+              <>
+                {" "}
+                to <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            removed the assignee{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <Icon iconName="group" className="!text-sm" aria-hidden="true" />,
+  },
+  archived_at: {
+    message: (activity) => {
+      if (activity.new_value === "restore") return "restored the issue.";
+      else return "archived the issue.";
+    },
+    icon: <Icon iconName="archive" className="!text-sm" aria-hidden="true" />,
+  },
+  attachment: {
+    message: (activity, showIssue) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            uploaded a new{" "}
+            <a
+              href={`${activity.new_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              attachment
+              <Icon iconName="launch" className="!text-xs" />
+            </a>
+            {showIssue && (
+              <>
+                {" "}
+                to <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else
+        return (
+          <>
+            removed an attachment
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <Icon iconName="attach_file" className="!text-sm" aria-hidden="true" />,
+  },
+  blocking: {
+    message: (activity) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked this issue is blocking issue{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the blocking issue{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <BlockerIcon height="12" width="12" color="#6b7280" />,
+  },
+  blocks: {
+    message: (activity) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked this issue is being blocked by{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed this issue being blocked by issue{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
+  },
+  cycles: {
+    message: (activity) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            added this issue to the cycle{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else if (activity.verb === "updated")
+        return (
+          <>
+            set the cycle to{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the issue from the cycle{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <Icon iconName="contrast" className="!text-sm" aria-hidden="true" />,
+  },
+  description: {
+    message: (activity, showIssue) => (
+      <>
+        updated the description
+        {showIssue && (
+          <>
+            {" "}
+            of <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
+  },
+  estimate_point: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the estimate point
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            set the estimate point to{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            {showIssue && (
+              <>
+                {" "}
+                for <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <Icon iconName="change_history" className="!text-sm" aria-hidden="true" />,
+  },
+  issue: {
+    message: (activity) => {
+      if (activity.verb === "created") return "created the issue.";
+      else return "deleted an issue.";
+    },
+    icon: <Icon iconName="stack" className="!text-sm" aria-hidden="true" />,
+  },
+  labels: {
+    message: (activity, showIssue) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            added a new label{" "}
+            <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+              <span
+                className="h-1.5 w-1.5 rounded-full"
+                style={{
+                  backgroundColor: "#000000",
+                }}
+                aria-hidden="true"
+              />
+              <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            </span>
+            {showIssue && (
+              <>
+                {" "}
+                to <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else
+        return (
+          <>
+            removed the label{" "}
+            <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+              <span
+                className="h-1.5 w-1.5 rounded-full"
+                style={{
+                  backgroundColor: "#000000",
+                }}
+                aria-hidden="true"
+              />
+              <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+            </span>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+    },
+    icon: <Icon iconName="sell" className="!text-sm" aria-hidden="true" />,
+  },
+  link: {
+    message: (activity, showIssue) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            added this{" "}
+            <a
+              href={`${activity.new_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              link
+              <Icon iconName="launch" className="!text-xs" />
+            </a>
+            {showIssue && (
+              <>
+                {" "}
+                to <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            removed this{" "}
+            <a
+              href={`${activity.old_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+            >
+              link
+              <Icon iconName="launch" className="!text-xs" />
+            </a>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <Icon iconName="link" className="!text-sm" aria-hidden="true" />,
+  },
+  modules: {
+    message: (activity) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            added this issue to the module{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else if (activity.verb === "updated")
+        return (
+          <>
+            set the module to{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the issue from the module{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <Icon iconName="dataset" className="!text-sm" aria-hidden="true" />,
+  },
+  name: {
+    message: (activity, showIssue) => (
+      <>
+        set the name to {activity.new_value}
+        {showIssue && (
+          <>
+            {" "}
+            of <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
+  },
+  parent: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the parent{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            set the parent to{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            {showIssue && (
+              <>
+                {" "}
+                for <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <Icon iconName="supervised_user_circle" className="!text-sm" aria-hidden="true" />,
+  },
+  priority: {
+    message: (activity, showIssue) => (
+      <>
+        set the priority to{" "}
+        <span className="font-medium text-custom-text-100">
+          {activity.new_value ? capitalizeFirstLetter(activity.new_value) : "None"}
+        </span>
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <Icon iconName="signal_cellular_alt" className="!text-sm" aria-hidden="true" />,
+  },
+  state: {
+    message: (activity, showIssue) => (
+      <>
+        set the state to{" "}
+        <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+        .
+      </>
+    ),
+    icon: <Squares2X2Icon className="h-3 w-3" aria-hidden="true" />,
+  },
+  target_date: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the due date
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+      else
+        return (
+          <>
+            set the due date to{" "}
+            <span className="font-medium text-custom-text-100">
+              {renderShortDateWithYearFormat(activity.new_value)}
+            </span>
+            {showIssue && (
+              <>
+                {" "}
+                for <IssueLink activity={activity} />
+              </>
+            )}
+            .
+          </>
+        );
+    },
+    icon: <Icon iconName="calendar_today" className="!text-sm" aria-hidden="true" />,
+  },
+};
+
+export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
+  <>{activityDetails[activity.field as keyof typeof activityDetails].icon}</>
+);
+
+export const ActivityMessage = ({
+  activity,
+  showIssue = false,
+}: {
+  activity: IIssueActivity;
+  showIssue?: boolean;
+}) => (
+  <>
+    {activityDetails[activity.field as keyof typeof activityDetails].message(activity, showIssue)}
+  </>
+);

apps/app/components/core/feeds.tsx

@@ -5,19 +5,11 @@ import Link from "next/link";
 // icons
 import {
   ArrowTopRightOnSquareIcon,
-  CalendarDaysIcon,
-  ChartBarIcon,
-  ChatBubbleBottomCenterTextIcon,
   ChatBubbleLeftEllipsisIcon,
-  LinkIcon,
-  PaperClipIcon,
-  PlayIcon,
-  RectangleGroupIcon,
   Squares2X2Icon,
-  TrashIcon,
-  UserIcon,
 } from "@heroicons/react/24/outline";
-import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
+import { BlockedIcon, BlockerIcon } from "components/icons";
+import { Icon } from "components/ui";
 // helpers
 import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
@@ -32,11 +24,11 @@ const activityDetails: {
 } = {
   assignee: {
     message: "removed the assignee",
-    icon: <UserGroupIcon className="h-3 w-3" color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="group" className="!text-sm" aria-hidden="true" />,
   },
   assignees: {
     message: "added a new assignee",
-    icon: <UserGroupIcon className="h-3 w-3" color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="group" className="!text-sm" aria-hidden="true" />,
   },
   blocks: {
     message: "marked this issue being blocked by",
@@ -48,14 +40,14 @@ const activityDetails: {
   },
   cycles: {
     message: "set the cycle to",
-    icon: <CyclesIcon height="12" width="12" color="#6b7280" />,
+    icon: <Icon iconName="contrast" className="!text-sm" aria-hidden="true" />,
   },
   labels: {
-    icon: <TagIcon height="12" width="12" color="#6b7280" />,
+    icon: <Icon iconName="sell" className="!text-sm" aria-hidden="true" />,
   },
   modules: {
     message: "set the module to",
-    icon: <RectangleGroupIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
+    icon: <Icon iconName="dataset" className="!text-sm" aria-hidden="true" />,
   },
   state: {
     message: "set the state to",
@@ -63,47 +55,47 @@ const activityDetails: {
   },
   priority: {
     message: "set the priority to",
-    icon: <ChartBarIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
+    icon: <Icon iconName="signal_cellular_alt" className="!text-sm" aria-hidden="true" />,
   },
   name: {
     message: "set the name to",
-    icon: (
-      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />
-    ),
+    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
   },
   description: {
     message: "updated the description.",
-    icon: (
-      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />
-    ),
+    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
   },
   estimate_point: {
     message: "set the estimate point to",
-    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-custom-text-200" aria-hidden="true" />,
+    icon: <Icon iconName="change_history" className="!text-sm" aria-hidden="true" />,
   },
   target_date: {
     message: "set the due date to",
-    icon: <CalendarDaysIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
+    icon: <Icon iconName="calendar_today" className="!text-sm" aria-hidden="true" />,
   },
   parent: {
     message: "set the parent to",
-    icon: <UserIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
+    icon: <Icon iconName="supervised_user_circle" className="!text-sm" aria-hidden="true" />,
   },
   issue: {
     message: "deleted the issue.",
-    icon: <TrashIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
+    icon: <Icon iconName="delete" className="!text-sm" aria-hidden="true" />,
   },
   estimate: {
     message: "updated the estimate",
-    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-custom-text-200" aria-hidden="true" />,
+    icon: <Icon iconName="change_history" className="!text-sm" aria-hidden="true" />,
   },
   link: {
     message: "updated the link",
-    icon: <LinkIcon className="h-3 w-3 text-custom-text-200" aria-hidden="true" />,
+    icon: <Icon iconName="link" className="!text-sm" aria-hidden="true" />,
   },
   attachment: {
     message: "updated the attachment",
-    icon: <PaperClipIcon className="h-3 w-3 text-custom-text-200 " aria-hidden="true" />,
+    icon: <Icon iconName="attach_file" className="!text-sm" aria-hidden="true" />,
+  },
+  archived_at: {
+    message: "archived",
+    icon: <Icon iconName="archive" className="!text-sm text-custom-text-200" aria-hidden="true" />,
   },
 };
 
@@ -144,6 +136,11 @@ export const Feeds: React.FC<any> = ({ activities }) => (
           action = `${activity.verb} the`;
         } else if (activity.field === "link") {
           action = `${activity.verb} the`;
+        } else if (activity.field === "archived_at") {
+          action =
+            activity.new_value && activity.new_value === "restore"
+              ? "restored the issue"
+              : "archived the issue";
         }
         // for values that are after the action clause
         let value: any = activity.new_value ? activity.new_value : activity.old_value;
@@ -205,7 +202,13 @@ export const Feeds: React.FC<any> = ({ activities }) => (
             <div key={activity.id} className="mt-2">
               <div className="relative flex items-start space-x-3">
                 <div className="relative px-1">
-                  {activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
+                  {activity.field ? (
+                    activity.new_value === "restore" ? (
+                      <Icon iconName="history" className="text-sm text-custom-text-200" />
+                    ) : (
+                      activityDetails[activity.field as keyof typeof activityDetails]?.icon
+                    )
+                  ) : activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
                     <img
                       src={activity.actor_detail.avatar}
                       alt={activity.actor_detail.first_name}
@@ -247,7 +250,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                       }
                       editable={false}
                       noBorder
-                      customClassName="text-xs border border-custom-border-100 bg-custom-background-100"
+                      customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
                     />
                   </div>
                 </div>
@@ -271,7 +274,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                     <div>
                       <div className="relative px-1.5">
                         <div className="mt-1.5">
-                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 ring-white">
+                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
                             {activity.field ? (
                               activityDetails[activity.field as keyof typeof activityDetails]?.icon
                             ) : activity.actor_detail.avatar &&
@@ -296,14 +299,23 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                     </div>
                     <div className="min-w-0 flex-1 py-3">
                       <div className="text-xs text-custom-text-200">
-                        <span className="text-gray font-medium">
-                          {activity.actor_detail.first_name}
-                          {activity.actor_detail.is_bot
-                            ? " Bot"
-                            : " " + activity.actor_detail.last_name}
-                        </span>
+                        {activity.field === "archived_at" && activity.new_value !== "restore" ? (
+                          <span className="text-gray font-medium">Plane</span>
+                        ) : (
+                          <span className="text-gray font-medium">
+                            {activity.actor_detail.first_name}
+                            {activity.actor_detail.is_bot
+                              ? " Bot"
+                              : " " + activity.actor_detail.last_name}
+                          </span>
+                        )}
                         <span> {action} </span>
-                        <span className="text-xs font-medium text-custom-text-100"> {value} </span>
+                        {activity.field !== "archived_at" && (
+                          <span className="text-xs font-medium text-custom-text-100">
+                            {" "}
+                            {value}{" "}
+                          </span>
+                        )}
                         <span className="whitespace-nowrap">{timeAgo(activity.created_at)}</span>
                       </div>
                     </div>

apps/app/components/core/filters/due-date-filter-modal.tsx

@@ -109,7 +109,7 @@ export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) =>
               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 flex transform rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative flex transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form className="space-y-4" onSubmit={handleSubmit(handleFormSubmit)}>
                   <div className="flex w-full justify-between">
                     <Controller

apps/app/components/core/filters/filters-list.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
 
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
@@ -8,43 +6,31 @@ import { getPriorityIcon, getStateGroupIcon } from "components/icons";
 // ui
 import { Avatar } from "components/ui";
 // helpers
-import { getStatesList } from "helpers/state.helper";
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-// services
-import issuesService from "services/issues.service";
-import projectService from "services/project.service";
-import stateService from "services/state.service";
-// types
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
-import { IIssueFilterOptions } from "types";
+// helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// types
+import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
+// constants
+import { STATE_GROUP_COLORS } from "constants/state";
 
-export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, viewId } = router.query;
-
-  const { data: members } = useSWR(
-    projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: issueLabels } = useSWR(
-    projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
-      : null
-  );
-
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const states = getStatesList(stateGroups ?? {});
+type Props = {
+  filters: Partial<IIssueFilterOptions>;
+  setFilters: (updatedFilter: Partial<IIssueFilterOptions>) => void;
+  clearAllFilters: (...args: any) => void;
+  labels: IIssueLabels[] | undefined;
+  members: IUserLite[] | undefined;
+  states: IState[] | undefined;
+};
 
+export const FiltersList: React.FC<Props> = ({
+  filters,
+  setFilters,
+  clearAllFilters,
+  labels,
+  members,
+  states,
+}) => {
   if (!filters) return <></>;
 
   const nullFilters = Object.keys(filters).filter(
@@ -53,24 +39,26 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
 
   return (
     <div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
-      {Object.keys(filters).map((key) => {
-        if (filters[key as keyof typeof filters] !== null)
-          return (
-            <div
-              key={key}
-              className="flex items-center gap-x-2 rounded-full border border-custom-border-100 bg-custom-background-80 px-2 py-1"
-            >
-              <span className="capitalize text-custom-text-200">
-                {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
-              </span>
-              {filters[key as keyof IIssueFilterOptions] === null ||
-              (filters[key as keyof IIssueFilterOptions]?.length ?? 0) <= 0 ? (
-                <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
-              ) : Array.isArray(filters[key as keyof IIssueFilterOptions]) ? (
-                <div className="space-x-2">
-                  {key === "state" ? (
-                    <div className="flex flex-wrap items-center gap-1">
-                      {filters.state?.map((stateId: any) => {
+      {Object.keys(filters).map((filterKey) => {
+        const key = filterKey as keyof typeof filters;
+
+        if (filters[key] === null) return null;
+
+        return (
+          <div
+            key={key}
+            className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
+          >
+            <span className="capitalize text-custom-text-200">
+              {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
+            </span>
+            {filters[key] === null || (filters[key]?.length ?? 0) <= 0 ? (
+              <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
+            ) : Array.isArray(filters[key]) ? (
+              <div className="space-x-2">
+                <div className="flex flex-wrap items-center gap-1">
+                  {key === "state"
+                    ? filters.state?.map((stateId: string) => {
                         const state = states?.find((s) => s.id === stateId);
 
                         return (
@@ -94,33 +82,46 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                             <span
                               className="cursor-pointer"
                               onClick={() =>
-                                setFilters(
-                                  {
-                                    state: filters.state?.filter((s: any) => s !== stateId),
-                                  },
-                                  !Boolean(viewId)
-                                )
+                                setFilters({
+                                  state: filters.state?.filter((s: any) => s !== stateId),
+                                })
                               }
                             >
                               <XMarkIcon className="h-3 w-3" />
                             </span>
                           </p>
                         );
-                      })}
-                      <button
-                        type="button"
-                        onClick={() =>
-                          setFilters({
-                            state: null,
-                          })
-                        }
-                      >
-                        <XMarkIcon className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ) : key === "priority" ? (
-                    <div className="flex flex-wrap items-center gap-1">
-                      {filters.priority?.map((priority: any) => (
+                      })
+                    : key === "state_group"
+                    ? filters.state_group?.map((stateGroup) => {
+                        const group = stateGroup as TStateGroups;
+
+                        return (
+                          <p
+                            key={group}
+                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
+                            style={{
+                              color: STATE_GROUP_COLORS[group],
+                              backgroundColor: `${STATE_GROUP_COLORS[group]}20`,
+                            }}
+                          >
+                            <span>{getStateGroupIcon(group, "16", "16")}</span>
+                            <span>{group}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  state_group: filters.state_group?.filter((g) => g !== group),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </p>
+                        );
+                      })
+                    : key === "priority"
+                    ? filters.priority?.map((priority: any) => (
                         <p
                           key={priority}
                           className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
@@ -140,33 +141,18 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                           <span
                             className="cursor-pointer"
                             onClick={() =>
-                              setFilters(
-                                {
-                                  priority: filters.priority?.filter((p: any) => p !== priority),
-                                },
-                                !Boolean(viewId)
-                              )
+                              setFilters({
+                                priority: filters.priority?.filter((p: any) => p !== priority),
+                              })
                             }
                           >
                             <XMarkIcon className="h-3 w-3" />
                           </span>
                         </p>
-                      ))}
-                      <button
-                        type="button"
-                        onClick={() =>
-                          setFilters({
-                            priority: null,
-                          })
-                        }
-                      >
-                        <XMarkIcon className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ) : key === "assignees" ? (
-                    <div className="flex flex-wrap items-center gap-1">
-                      {filters.assignees?.map((memberId: string) => {
-                        const member = members?.find((m) => m.member.id === memberId)?.member;
+                      ))
+                    : key === "assignees"
+                    ? filters.assignees?.map((memberId: string) => {
+                        const member = members?.find((m) => m.id === memberId);
 
                         return (
                           <div
@@ -178,36 +164,19 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                             <span
                               className="cursor-pointer"
                               onClick={() =>
-                                setFilters(
-                                  {
-                                    assignees: filters.assignees?.filter(
-                                      (p: any) => p !== memberId
-                                    ),
-                                  },
-                                  !Boolean(viewId)
-                                )
+                                setFilters({
+                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
+                                })
                               }
                             >
                               <XMarkIcon className="h-3 w-3" />
                             </span>
                           </div>
                         );
-                      })}
-                      <button
-                        type="button"
-                        onClick={() =>
-                          setFilters({
-                            assignees: null,
-                          })
-                        }
-                      >
-                        <XMarkIcon className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ) : key === "created_by" ? (
-                    <div className="flex flex-wrap items-center gap-1">
-                      {filters.created_by?.map((memberId: string) => {
-                        const member = members?.find((m) => m.member.id === memberId)?.member;
+                      })
+                    : key === "created_by"
+                    ? filters.created_by?.map((memberId: string) => {
+                        const member = members?.find((m) => m.id === memberId);
 
                         return (
                           <div
@@ -219,36 +188,21 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                             <span
                               className="cursor-pointer"
                               onClick={() =>
-                                setFilters(
-                                  {
-                                    created_by: filters.created_by?.filter(
-                                      (p: any) => p !== memberId
-                                    ),
-                                  },
-                                  !Boolean(viewId)
-                                )
+                                setFilters({
+                                  created_by: filters.created_by?.filter(
+                                    (p: any) => p !== memberId
+                                  ),
+                                })
                               }
                             >
                               <XMarkIcon className="h-3 w-3" />
                             </span>
                           </div>
                         );
-                      })}
-                      <button
-                        type="button"
-                        onClick={() =>
-                          setFilters({
-                            created_by: null,
-                          })
-                        }
-                      >
-                        <XMarkIcon className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ) : key === "labels" ? (
-                    <div className="flex flex-wrap items-center gap-1">
-                      {filters.labels?.map((labelId: string) => {
-                        const label = issueLabels?.find((l) => l.id === labelId);
+                      })
+                    : key === "labels"
+                    ? filters.labels?.map((labelId: string) => {
+                        const label = labels?.find((l) => l.id === labelId);
 
                         if (!label) return null;
                         const color = label.color !== "" ? label.color : "#0f172a";
@@ -271,12 +225,9 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                             <span
                               className="cursor-pointer"
                               onClick={() =>
-                                setFilters(
-                                  {
-                                    labels: filters.labels?.filter((l: any) => l !== labelId),
-                                  },
-                                  !Boolean(viewId)
-                                )
+                                setFilters({
+                                  labels: filters.labels?.filter((l: any) => l !== labelId),
+                                })
                               }
                             >
                               <XMarkIcon
@@ -288,29 +239,17 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                             </span>
                           </div>
                         );
-                      })}
-                      <button
-                        type="button"
-                        onClick={() =>
-                          setFilters({
-                            labels: null,
-                          })
-                        }
-                      >
-                        <XMarkIcon className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ) : key === "target_date" ? (
-                    <div className="flex flex-wrap items-center gap-1">
-                      {filters.target_date?.map((date: string) => {
-                        if (filters.target_date.length <= 0) return null;
+                      })
+                    : key === "target_date"
+                    ? filters.target_date?.map((date: string) => {
+                        if (filters.target_date && filters.target_date.length <= 0) return null;
 
                         const splitDate = date.split(";");
 
                         return (
                           <div
                             key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-100 bg-custom-background-100 px-1 py-0.5"
+                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
                           >
                             <div className="h-1.5 w-1.5 rounded-full" />
                             <span className="capitalize">
@@ -319,39 +258,17 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                             <span
                               className="cursor-pointer"
                               onClick={() =>
-                                setFilters(
-                                  {
-                                    target_date: filters.target_date?.filter(
-                                      (d: any) => d !== date
-                                    ),
-                                  },
-                                  !Boolean(viewId)
-                                )
+                                setFilters({
+                                  target_date: filters.target_date?.filter((d: any) => d !== date),
+                                })
                               }
                             >
                               <XMarkIcon className="h-3 w-3" />
                             </span>
                           </div>
                         );
-                      })}
-                      <button
-                        type="button"
-                        onClick={() =>
-                          setFilters({
-                            target_date: null,
-                          })
-                        }
-                      >
-                        <XMarkIcon className="h-3 w-3" />
-                      </button>
-                    </div>
-                  ) : (
-                    (filters[key as keyof IIssueFilterOptions] as any)?.join(", ")
-                  )}
-                </div>
-              ) : (
-                <div className="flex items-center gap-x-1 capitalize">
-                  {filters[key as keyof typeof filters]}
+                      })
+                    : (filters[key] as any)?.join(", ")}
                   <button
                     type="button"
                     onClick={() =>
@@ -363,25 +280,30 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                     <XMarkIcon className="h-3 w-3" />
                   </button>
                 </div>
-              )}
-            </div>
-          );
+              </div>
+            ) : (
+              <div className="flex items-center gap-x-1 capitalize">
+                {filters[key as keyof typeof filters]}
+                <button
+                  type="button"
+                  onClick={() =>
+                    setFilters({
+                      [key]: null,
+                    })
+                  }
+                >
+                  <XMarkIcon className="h-3 w-3" />
+                </button>
+              </div>
+            )}
+          </div>
+        );
       })}
       {Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
         <button
           type="button"
-          onClick={() =>
-            setFilters({
-              type: null,
-              state: null,
-              priority: null,
-              assignees: null,
-              labels: null,
-              created_by: null,
-              target_date: null,
-            })
-          }
-          className="flex items-center gap-x-1 rounded-full border border-custom-border-100 bg-custom-background-80 px-3 py-1.5 text-xs"
+          onClick={clearAllFilters}
+          className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
         >
           <span>Clear all filters</span>
           <XMarkIcon className="h-3 w-3" />

apps/app/components/core/filters/issues-view-filter.tsx

@@ -11,14 +11,16 @@ import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { SelectFilters } from "components/views";
 // ui
-import { CustomMenu, Icon, ToggleSwitch } from "components/ui";
+import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui";
 // icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import {
-  ChevronDownIcon,
-  ListBulletIcon,
-  Squares2X2Icon,
-  CalendarDaysIcon,
-} from "@heroicons/react/24/outline";
+  CalendarMonthOutlined,
+  FormatListBulletedOutlined,
+  GridViewOutlined,
+  TableChartOutlined,
+  WaterfallChartOutlined,
+} from "@mui/icons-material";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
@@ -27,32 +29,33 @@ import { Properties, TIssueViewOptions } from "types";
 // constants
 import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
 
-const issueViewOptions: { type: TIssueViewOptions; icon: any }[] = [
+const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
   {
     type: "list",
-    icon: <ListBulletIcon className="h-4 w-4" />,
+    Icon: FormatListBulletedOutlined,
   },
   {
     type: "kanban",
-    icon: <Squares2X2Icon className="h-4 w-4" />,
+    Icon: GridViewOutlined,
   },
   {
     type: "calendar",
-    icon: <CalendarDaysIcon className="h-4 w-4" />,
+    Icon: CalendarMonthOutlined,
   },
   {
     type: "spreadsheet",
-    icon: <Icon iconName="table_chart" />,
+    Icon: TableChartOutlined,
   },
   {
     type: "gantt_chart",
-    icon: <Icon iconName="waterfall_chart" className="rotate-90" />,
+    Icon: WaterfallChartOutlined,
   },
 ];
 
 export const IssuesFilterView: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, viewId } = router.query;
+  const isArchivedIssues = router.pathname.includes("archived-issues");
 
   const {
     issueView,
@@ -62,6 +65,8 @@ export const IssuesFilterView: React.FC = () => {
     orderBy,
     setOrderBy,
     showEmptyGroups,
+    showSubIssues,
+    setShowSubIssues,
     setShowEmptyGroups,
     filters,
     setFilters,
@@ -78,22 +83,36 @@ export const IssuesFilterView: React.FC = () => {
 
   return (
     <div className="flex items-center gap-2">
-      <div className="flex items-center gap-x-1">
-        {issueViewOptions.map((option) => (
-          <button
-            key={option.type}
-            type="button"
-            className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
-              issueView === option.type
-                ? "bg-custom-sidebar-background-80"
-                : "text-custom-sidebar-text-200"
-            }`}
-            onClick={() => setIssueView(option.type)}
-          >
-            {option.icon}
-          </button>
-        ))}
-      </div>
+      {!isArchivedIssues && (
+        <div className="flex items-center gap-x-1">
+          {issueViewOptions.map((option) => (
+            <Tooltip
+              key={option.type}
+              tooltipContent={
+                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
+              }
+              position="bottom"
+            >
+              <button
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
+                  issueView === option.type
+                    ? "bg-custom-sidebar-background-80"
+                    : "text-custom-sidebar-text-200"
+                }`}
+                onClick={() => setIssueView(option.type)}
+              >
+                <option.Icon
+                  sx={{
+                    fontSize: 16,
+                  }}
+                  className={option.type === "gantt_chart" ? "rotate-90" : ""}
+                />
+              </button>
+            </Tooltip>
+          ))}
+        </div>
+      )}
       <SelectFilters
         filters={filters}
         onSelect={(option) => {
@@ -136,7 +155,7 @@ export const IssuesFilterView: React.FC = () => {
         {({ open }) => (
           <>
             <Popover.Button
-              className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
+              className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-200 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
                 open
                   ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
                   : "text-custom-sidebar-text-200"
@@ -155,89 +174,113 @@ export const IssuesFilterView: React.FC = () => {
               leaveFrom="opacity-100 translate-y-0"
               leaveTo="opacity-0 translate-y-1"
             >
-              <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-100 bg-custom-background-90 p-3 shadow-lg">
-                <div className="relative divide-y-2 divide-custom-border-100">
+              <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
+                <div className="relative divide-y-2 divide-custom-border-200">
                   <div className="space-y-4 pb-3 text-xs">
                     {issueView !== "calendar" && issueView !== "spreadsheet" && (
                       <>
                         <div className="flex items-center justify-between">
                           <h4 className="text-custom-text-200">Group by</h4>
-                          <CustomMenu
-                            label={
-                              GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)
-                                ?.name ?? "Select"
-                            }
-                            width="lg"
-                          >
-                            {GROUP_BY_OPTIONS.map((option) =>
-                              issueView === "kanban" && option.key === null ? null : (
-                                <CustomMenu.MenuItem
-                                  key={option.key}
-                                  onClick={() => setGroupByProperty(option.key)}
-                                >
-                                  {option.name}
-                                </CustomMenu.MenuItem>
-                              )
-                            )}
-                          </CustomMenu>
+                          <div className="w-28">
+                            <CustomMenu
+                              label={
+                                GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)
+                                  ?.name ?? "Select"
+                              }
+                              className="!w-full"
+                              buttonClassName="w-full"
+                            >
+                              {GROUP_BY_OPTIONS.map((option) => {
+                                if (issueView === "kanban" && option.key === null) return null;
+                                if (option.key === "project") return null;
+
+                                return (
+                                  <CustomMenu.MenuItem
+                                    key={option.key}
+                                    onClick={() => setGroupByProperty(option.key)}
+                                  >
+                                    {option.name}
+                                  </CustomMenu.MenuItem>
+                                );
+                              })}
+                            </CustomMenu>
+                          </div>
                         </div>
                         <div className="flex items-center justify-between">
                           <h4 className="text-custom-text-200">Order by</h4>
-                          <CustomMenu
-                            label={
-                              ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
-                              "Select"
-                            }
-                            width="lg"
-                          >
-                            {ORDER_BY_OPTIONS.map((option) =>
-                              groupByProperty === "priority" && option.key === "priority" ? null : (
-                                <CustomMenu.MenuItem
-                                  key={option.key}
-                                  onClick={() => {
-                                    setOrderBy(option.key);
-                                  }}
-                                >
-                                  {option.name}
-                                </CustomMenu.MenuItem>
-                              )
-                            )}
-                          </CustomMenu>
+                          <div className="w-28">
+                            <CustomMenu
+                              label={
+                                ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
+                                "Select"
+                              }
+                              className="!w-full"
+                              buttonClassName="w-full"
+                            >
+                              {ORDER_BY_OPTIONS.map((option) =>
+                                groupByProperty === "priority" &&
+                                option.key === "priority" ? null : (
+                                  <CustomMenu.MenuItem
+                                    key={option.key}
+                                    onClick={() => {
+                                      setOrderBy(option.key);
+                                    }}
+                                  >
+                                    {option.name}
+                                  </CustomMenu.MenuItem>
+                                )
+                              )}
+                            </CustomMenu>
+                          </div>
                         </div>
                       </>
                     )}
                     <div className="flex items-center justify-between">
                       <h4 className="text-custom-text-200">Issue type</h4>
-                      <CustomMenu
-                        label={
-                          FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type)
-                            ?.name ?? "Select"
-                        }
-                        width="lg"
-                      >
-                        {FILTER_ISSUE_OPTIONS.map((option) => (
-                          <CustomMenu.MenuItem
-                            key={option.key}
-                            onClick={() =>
-                              setFilters({
-                                type: option.key,
-                              })
-                            }
-                          >
-                            {option.name}
-                          </CustomMenu.MenuItem>
-                        ))}
-                      </CustomMenu>
+                      <div className="w-28">
+                        <CustomMenu
+                          label={
+                            FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type)
+                              ?.name ?? "Select"
+                          }
+                          className="!w-full"
+                          buttonClassName="w-full"
+                        >
+                          {FILTER_ISSUE_OPTIONS.map((option) => (
+                            <CustomMenu.MenuItem
+                              key={option.key}
+                              onClick={() =>
+                                setFilters({
+                                  type: option.key,
+                                })
+                              }
+                            >
+                              {option.name}
+                            </CustomMenu.MenuItem>
+                          ))}
+                        </CustomMenu>
+                      </div>
                     </div>
 
                     {issueView !== "calendar" && issueView !== "spreadsheet" && (
                       <>
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-custom-text-200">Show sub-issues</h4>
+                          <div className="w-28">
+                            <ToggleSwitch
+                              value={showSubIssues}
+                              onChange={() => setShowSubIssues(!showSubIssues)}
+                            />
+                          </div>
+                        </div>
                         <div className="flex items-center justify-between">
                           <h4 className="text-custom-text-200">Show empty states</h4>
-                          <ToggleSwitch
-                            value={showEmptyGroups}
-                            onChange={() => setShowEmptyGroups(!showEmptyGroups)}
-                          />
+                          <div className="w-28">
+                            <ToggleSwitch
+                              value={showEmptyGroups}
+                              onChange={() => setShowEmptyGroups(!showEmptyGroups)}
+                            />
+                          </div>
                         </div>
                         <div className="relative flex justify-end gap-x-3">
                           <button type="button" onClick={() => resetFilterToDefault()}>
@@ -257,7 +300,7 @@ export const IssuesFilterView: React.FC = () => {
 
                   <div className="space-y-2 py-3">
                     <h4 className="text-sm text-custom-text-200">Display Properties</h4>
-                    <div className="flex flex-wrap items-center gap-2">
+                    <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
                       {Object.keys(properties).map((key) => {
                         if (key === "estimate" && !isEstimateActive) return null;
 
@@ -282,7 +325,7 @@ export const IssuesFilterView: React.FC = () => {
                             className={`rounded border px-2 py-1 text-xs capitalize ${
                               properties[key as keyof Properties]
                                 ? "border-custom-primary bg-custom-primary text-white"
-                                : "border-custom-border-100"
+                                : "border-custom-border-200"
                             }`}
                             onClick={() => setProperties(key as keyof Properties)}
                           >

apps/app/components/core/image-picker-popover.tsx

@@ -1,8 +1,15 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, useCallback } from "react";
+
+// next
+import Image from "next/image";
+import { useRouter } from "next/router";
 
 // swr
 import useSWR from "swr";
 
+// react-dropdown
+import { useDropzone } from "react-dropzone";
+
 // headless ui
 import { Tab, Transition, Popover } from "@headlessui/react";
 
@@ -10,9 +17,9 @@ import { Tab, Transition, Popover } from "@headlessui/react";
 import fileService from "services/file.service";
 
 // components
-import { Input, Spinner, PrimaryButton } from "components/ui";
+import { Input, Spinner, PrimaryButton, SecondaryButton } from "components/ui";
 // hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import useWorkspaceDetails from "hooks/use-workspace-details";
 
 const unsplashEnabled =
   process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "true" ||
@@ -38,6 +45,12 @@ type Props = {
 export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange }) => {
   const ref = useRef<HTMLDivElement>(null);
 
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const [image, setImage] = useState<File | null>(null);
+  const [isImageUploading, setIsImageUploading] = useState(false);
+
   const [isOpen, setIsOpen] = useState(false);
   const [searchParams, setSearchParams] = useState("");
   const [formData, setFormData] = useState({
@@ -48,10 +61,50 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
     fileService.getUnsplashImages(1, searchParams)
   );
 
-  useOutsideClickDetector(ref, () => {
-    setIsOpen(false);
+  const { workspaceDetails } = useWorkspaceDetails();
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    setImage(acceptedFiles[0]);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
+    onDrop,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
+    },
+    maxSize: 5 * 1024 * 1024,
   });
 
+  const handleSubmit = async () => {
+    setIsImageUploading(true);
+
+    if (!image || !workspaceSlug) return;
+
+    const formData = new FormData();
+    formData.append("asset", image);
+    formData.append("attributes", JSON.stringify({}));
+
+    fileService
+      .uploadFile(workspaceSlug.toString(), formData)
+      .then((res) => {
+        const oldValue = value;
+        const isUnsplashImage = oldValue?.split("/")[2] === "images.unsplash.com";
+
+        const imageUrl = res.asset;
+        onChange(imageUrl);
+        setIsImageUploading(false);
+        setImage(null);
+        setIsOpen(false);
+
+        if (isUnsplashImage) return;
+
+        if (oldValue && workspaceDetails) fileService.deleteFile(workspaceDetails.id, oldValue);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   useEffect(() => {
     if (!images || value !== null) return;
     onChange(images[0].urls.regular);
@@ -62,7 +115,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
   return (
     <Popover className="relative z-[2]" ref={ref}>
       <Popover.Button
-        className="rounded-md border border-custom-border-100 bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200"
+        className="rounded-md border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {label}
@@ -76,23 +129,25 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-100 bg-custom-background-80 shadow-lg">
-          <div className="h-96 w-80 overflow-auto rounded border border-custom-border-100 bg-custom-background-80 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
+        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
+          <div className="h-96 md:h-[28rem] w-80 md:w-[36rem] flex flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl">
             <Tab.Group>
-              <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
-                {tabOptions.map((tab) => (
-                  <Tab
-                    key={tab.key}
-                    className={({ selected }) =>
-                      `rounded py-1 px-4 text-center text-sm outline-none transition-colors ${
-                        selected ? "bg-custom-primary text-white" : "text-custom-text-100"
-                      }`
-                    }
-                  >
-                    {tab.title}
-                  </Tab>
-                ))}
-              </Tab.List>
+              <div>
+                <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
+                  {tabOptions.map((tab) => (
+                    <Tab
+                      key={tab.key}
+                      className={({ selected }) =>
+                        `rounded py-1 px-4 text-center text-sm outline-none transition-colors ${
+                          selected ? "bg-custom-primary text-white" : "text-custom-text-100"
+                        }`
+                      }
+                    >
+                      {tab.title}
+                    </Tab>
+                  ))}
+                </Tab.List>
+              </div>
               <Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
                 <Tab.Panel className="h-full w-full space-y-4">
                   <div className="flex gap-x-2 pt-7">
@@ -133,8 +188,78 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
                     </div>
                   )}
                 </Tab.Panel>
-                <Tab.Panel className="flex h-full w-full flex-col items-center justify-center">
-                  <p>Coming Soon...</p>
+                <Tab.Panel className="h-full w-full pt-5">
+                  <div className="w-full h-full flex flex-col gap-y-2">
+                    <div className="flex items-center gap-3 w-full flex-1">
+                      <div
+                        {...getRootProps()}
+                        className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
+                          (image === null && isDragActive) || !value
+                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
+                            : ""
+                        }`}
+                      >
+                        <button
+                          type="button"
+                          className="absolute top-0 right-0 z-40 -translate-y-1/2 rounded bg-custom-background-90 px-2 py-0.5 text-xs font-medium text-custom-text-200"
+                        >
+                          Edit
+                        </button>
+                        {image !== null || (value && value !== "") ? (
+                          <>
+                            <Image
+                              layout="fill"
+                              objectFit="cover"
+                              src={image ? URL.createObjectURL(image) : value ? value : ""}
+                              alt="image"
+                              className="rounded-lg"
+                            />
+                          </>
+                        ) : (
+                          <div>
+                            <span className="mt-2 block text-sm font-medium text-custom-text-200">
+                              {isDragActive
+                                ? "Drop image here to upload"
+                                : "Drag & drop image here"}
+                            </span>
+                          </div>
+                        )}
+
+                        <input {...getInputProps()} type="text" />
+                      </div>
+                    </div>
+                    {fileRejections.length > 0 && (
+                      <p className="text-sm text-red-500">
+                        {fileRejections[0].errors[0].code === "file-too-large"
+                          ? "The image size cannot exceed 5 MB."
+                          : "Please upload a file in a valid format."}
+                      </p>
+                    )}
+
+                    <p className="text-custom-text-200 text-sm">
+                      File formats supported- .jpeg, .jpg, .png, .webp, .svg
+                    </p>
+
+                    <div className="flex items-center justify-end gap-2">
+                      <SecondaryButton
+                        className="w-full"
+                        onClick={() => {
+                          setIsOpen(false);
+                          setImage(null);
+                        }}
+                      >
+                        Cancel
+                      </SecondaryButton>
+                      <PrimaryButton
+                        className="w-full"
+                        onClick={handleSubmit}
+                        disabled={!image}
+                        loading={isImageUploading}
+                      >
+                        {isImageUploading ? "Uploading..." : "Upload & Save"}
+                      </PrimaryButton>
+                    </div>
+                  </div>
                 </Tab.Panel>
               </Tab.Panels>
             </Tab.Group>

apps/app/components/core/index.ts

@@ -1,12 +1,9 @@
-export * from "./board-view";
-export * from "./calendar-view";
 export * from "./filters";
-export * from "./gantt-chart-view";
-export * from "./list-view";
 export * from "./modals";
-export * from "./spreadsheet-view";
-export * from "./theme";
 export * from "./sidebar";
-export * from "./issues-view";
-export * from "./image-picker-popover";
+export * from "./theme";
+export * from "./views";
+export * from "./activity";
 export * from "./feeds";
+export * from "./reaction-selector";
+export * from "./image-picker-popover";

apps/app/components/core/list-view/all-lists.tsx

@@ -1,72 +0,0 @@
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// components
-import { SingleList } from "components/core/list-view/single-list";
-// types
-import { ICurrentUserResponse, IIssue, IState, UserAuth } from "types";
-
-// types
-type Props = {
-  type: "issue" | "cycle" | "module";
-  states: IState[] | undefined;
-  addIssueToState: (groupTitle: string) => void;
-  makeIssueCopy: (issue: IIssue) => void;
-  handleEditIssue: (issue: IIssue) => void;
-  handleDeleteIssue: (issue: IIssue) => void;
-  openIssuesListModal?: (() => void) | null;
-  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
-  isCompleted?: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-};
-
-export const AllLists: React.FC<Props> = ({
-  type,
-  states,
-  addIssueToState,
-  makeIssueCopy,
-  openIssuesListModal,
-  handleEditIssue,
-  handleDeleteIssue,
-  removeIssue,
-  isCompleted = false,
-  user,
-  userAuth,
-}) => {
-  const { groupedByIssues, groupByProperty: selectedGroup, showEmptyGroups } = useIssuesView();
-
-  return (
-    <>
-      {groupedByIssues && (
-        <div className="h-full overflow-y-auto">
-          {Object.keys(groupedByIssues).map((singleGroup) => {
-            const currentState =
-              selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
-
-            if (!showEmptyGroups && groupedByIssues[singleGroup].length === 0) return null;
-
-            return (
-              <SingleList
-                key={singleGroup}
-                type={type}
-                groupTitle={singleGroup}
-                groupedByIssues={groupedByIssues}
-                selectedGroup={selectedGroup}
-                currentState={currentState}
-                addIssueToState={() => addIssueToState(singleGroup)}
-                makeIssueCopy={makeIssueCopy}
-                handleEditIssue={handleEditIssue}
-                handleDeleteIssue={handleDeleteIssue}
-                openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
-                removeIssue={removeIssue}
-                isCompleted={isCompleted}
-                user={user}
-                userAuth={userAuth}
-              />
-            );
-          })}
-        </div>
-      )}
-    </>
-  );
-};

apps/app/components/core/modals/bulk-delete-issues-modal.tsx

@@ -173,7 +173,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
+            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
               <form>
                 <Combobox
                   onChange={(val: string) => {
@@ -201,7 +201,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
 
                   <Combobox.Options
                     static
-                    className="max-h-80 scroll-py-2 divide-y divide-custom-border-100 overflow-y-auto"
+                    className="max-h-80 scroll-py-2 divide-y divide-custom-border-200 overflow-y-auto"
                   >
                     {filteredIssues.length > 0 ? (
                       <li className="p-2">

apps/app/components/core/modals/existing-issues-list-modal.tsx

@@ -13,8 +13,9 @@ import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 import useDebounce from "hooks/use-debounce";
 // ui
-import { Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Loader, PrimaryButton, SecondaryButton, ToggleSwitch, Tooltip } from "components/ui";
 // icons
+import { LaunchOutlined } from "@mui/icons-material";
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
 // types
@@ -32,6 +33,7 @@ type Props = {
   handleClose: () => void;
   searchParams: Partial<TProjectIssuesSearchParams>;
   handleOnSubmit: (data: ISearchIssueResponse[]) => Promise<void>;
+  workspaceLevelToggle?: boolean;
 };
 
 export const ExistingIssuesListModal: React.FC<Props> = ({
@@ -39,13 +41,14 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
   handleClose: onClose,
   searchParams,
   handleOnSubmit,
+  workspaceLevelToggle = false,
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
   const [isSearching, setIsSearching] = useState(false);
   const [selectedIssues, setSelectedIssues] = useState<ISearchIssueResponse[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
 
   const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
 
@@ -60,6 +63,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
     onClose();
     setSearchTerm("");
     setSelectedIssues([]);
+    setIsWorkspaceLevel(false);
   };
 
   const onSubmit = async () => {
@@ -97,31 +101,19 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
   };
 
   useEffect(() => {
-    if (!workspaceSlug || !projectId) return;
+    if (!isOpen || !workspaceSlug || !projectId) return;
 
-    setIsLoading(true);
+    setIsSearching(true);
 
-    if (debouncedSearchTerm) {
-      setIsSearching(true);
-
-      projectService
-        .projectIssuesSearch(workspaceSlug as string, projectId as string, {
-          search: debouncedSearchTerm,
-          ...searchParams,
-        })
-        .then((res) => {
-          setIssues(res);
-        })
-        .finally(() => {
-          setIsLoading(false);
-          setIsSearching(false);
-        });
-    } else {
-      setIssues([]);
-      setIsLoading(false);
-      setIsSearching(false);
-    }
-  }, [debouncedSearchTerm, workspaceSlug, projectId, searchParams]);
+    projectService
+      .projectIssuesSearch(workspaceSlug as string, projectId as string, {
+        search: debouncedSearchTerm,
+        ...searchParams,
+        workspace_search: isWorkspaceLevel,
+      })
+      .then((res) => setIssues(res))
+      .finally(() => setIsSearching(false));
+  }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, searchParams, workspaceSlug]);
 
   return (
     <>
@@ -154,7 +146,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-100 bg-custom-background-100 shadow-2xl transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
                 <Combobox
                   as="div"
                   onChange={(val: ISearchIssueResponse) => {
@@ -169,20 +161,20 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                       aria-hidden="true"
                     />
                     <Combobox.Input
-                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 text-sm placeholder:text-custom-text-400"
                       placeholder="Type to search..."
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
                     />
                   </div>
 
-                  <div className="text-custom-text-200 text-[0.825rem] p-2">
+                  <div className="flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between gap-4 text-custom-text-200 text-[0.825rem] p-2">
                     {selectedIssues.length > 0 ? (
                       <div className="flex items-center gap-2 flex-wrap mt-1">
                         {selectedIssues.map((issue) => (
                           <div
                             key={issue.id}
-                            className="flex items-center gap-1 text-xs border border-custom-border-100 bg-custom-background-80 pl-2 py-1 rounded-md text-custom-text-100 whitespace-nowrap"
+                            className="flex items-center gap-1 text-xs border border-custom-border-200 bg-custom-background-80 pl-2 py-1 rounded-md text-custom-text-100 whitespace-nowrap"
                           >
                             {issue.project__identifier}-{issue.sequence_id}
                             <button
@@ -200,26 +192,47 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         ))}
                       </div>
                     ) : (
-                      <div className="w-min text-xs border border-custom-border-100 bg-custom-background-80 p-2 rounded-md whitespace-nowrap">
+                      <div className="w-min text-xs border border-custom-border-200 bg-custom-background-80 p-2 rounded-md whitespace-nowrap">
                         No issues selected
                       </div>
                     )}
+                    {workspaceLevelToggle && (
+                      <Tooltip tooltipContent="Toggle workspace level search">
+                        <div
+                          className={`flex-shrink-0 flex items-center gap-1 text-xs cursor-pointer ${
+                            isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
+                          }`}
+                        >
+                          <ToggleSwitch
+                            value={isWorkspaceLevel}
+                            onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                          />
+                          <button
+                            type="button"
+                            onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                            className="flex-shrink-0"
+                          >
+                            workspace level
+                          </button>
+                        </div>
+                      </Tooltip>
+                    )}
                   </div>
 
-                  <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto mt-2">
-                    {debouncedSearchTerm !== "" && (
+                  <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
+                    {searchTerm !== "" && (
                       <h5 className="text-[0.825rem] text-custom-text-200 mx-2">
                         Search results for{" "}
                         <span className="text-custom-text-100">
                           {'"'}
-                          {debouncedSearchTerm}
+                          {searchTerm}
                           {'"'}
                         </span>{" "}
                         in project:
                       </h5>
                     )}
 
-                    {!isLoading &&
+                    {!isSearching &&
                       issues.length === 0 &&
                       searchTerm !== "" &&
                       debouncedSearchTerm !== "" && (
@@ -235,7 +248,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         </div>
                       )}
 
-                    {isLoading || isSearching ? (
+                    {isSearching ? (
                       <Loader className="space-y-3 p-3">
                         <Loader.Item height="40px" />
                         <Loader.Item height="40px" />
@@ -256,22 +269,37 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                               htmlFor={`issue-${issue.id}`}
                               value={issue}
                               className={({ active }) =>
-                                `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                                `group flex items-center justify-between gap-2 w-full cursor-pointer select-none rounded-md px-3 py-2 text-custom-text-200 ${
                                   active ? "bg-custom-background-80 text-custom-text-100" : ""
                                 } ${selected ? "text-custom-text-100" : ""}`
                               }
                             >
-                              <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 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="group-hover:block hidden relative z-1 text-custom-text-200 hover:text-custom-text-100"
+                                rel="noopener noreferrer"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                <LaunchOutlined
+                                  sx={{
+                                    fontSize: 16,
+                                  }}
+                                />
+                              </a>
                             </Combobox.Option>
                           );
                         })}

apps/app/components/core/modals/gpt-assistant-modal.tsx

@@ -117,18 +117,21 @@ export const GptAssistantModal: React.FC<Props> = ({
         else setInvalidResponse(false);
       })
       .catch((err) => {
+        const error = err?.data?.error;
+
         if (err.status === 429)
           setToastAlert({
             type: "error",
             title: "Error!",
             message:
+              error ||
               "You have reached the maximum number of requests of 50 requests per month per user.",
           });
         else
           setToastAlert({
             type: "error",
             title: "Error!",
-            message: "Some error occurred. Please try again.",
+            message: error || "Some error occurred. Please try again.",
           });
       });
   };
@@ -143,7 +146,7 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4 shadow ${
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
         isOpen ? "block" : "hidden"
       }`}
     >

apps/app/components/core/modals/image-upload-modal.tsx

@@ -43,8 +43,12 @@ export const ImageUploadModal: React.FC<Props> = ({
     setImage(acceptedFiles[0]);
   }, []);
 
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
     onDrop,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
+    },
+    maxSize: 5 * 1024 * 1024,
   });
 
   const handleSubmit = async () => {
@@ -118,7 +122,7 @@ export const ImageUploadModal: React.FC<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 overflow-hidden rounded-lg border border-custom-border-100 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
                   <Dialog.Title
                     as="h3"
@@ -132,7 +136,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                         {...getRootProps()}
                         className={`relative grid h-80 w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:outline-none focus:ring-2 focus:ring-custom-primary focus:ring-offset-2 ${
                           (image === null && isDragActive) || !value
-                            ? "border-2 border-dashed border-custom-border-100 hover:bg-custom-background-90"
+                            ? "border-2 border-dashed border-custom-border-200 hover:bg-custom-background-90"
                             : ""
                         }`}
                       >
@@ -166,9 +170,19 @@ export const ImageUploadModal: React.FC<Props> = ({
                         <input {...getInputProps()} type="text" />
                       </div>
                     </div>
+                    {fileRejections.length > 0 && (
+                      <p className="text-sm text-red-500">
+                        {fileRejections[0].errors[0].code === "file-too-large"
+                          ? "The image size cannot exceed 5 MB."
+                          : "Please upload a file in a valid format."}
+                      </p>
+                    )}
                   </div>
                 </div>
-                <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+                <p className="my-4 text-custom-text-200 text-sm">
+                  File formats supported- .jpeg, .jpg, .png, .webp, .svg
+                </p>
+                <div className="flex items-center justify-end gap-2">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <PrimaryButton
                     onClick={handleSubmit}

apps/app/components/core/modals/link-modal.tsx

@@ -15,7 +15,7 @@ type Props = {
   onFormSubmit: (formData: IIssueLink | ModuleLink) => Promise<void>;
 };
 
-const defaultValues: ModuleLink = {
+const defaultValues: IIssueLink | ModuleLink = {
   title: "",
   url: "",
 };
@@ -30,9 +30,8 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
     defaultValues,
   });
 
-  const onSubmit = async (formData: ModuleLink) => {
-    await onFormSubmit(formData);
-
+  const onSubmit = async (formData: IIssueLink | ModuleLink) => {
+    await onFormSubmit({ title: formData.title, url: formData.url });
     onClose();
   };
 
@@ -56,7 +55,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -70,7 +69,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
               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 overflow-hidden rounded-lg bg-custom-background-80 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-200 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
                     <div className="space-y-5">
@@ -87,7 +86,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
                             label="URL"
                             name="url"
                             type="url"
-                            placeholder="Enter URL"
+                            placeholder="https://..."
                             autoComplete="off"
                             error={errors.url}
                             register={register}
@@ -99,16 +98,13 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
                         <div>
                           <Input
                             id="title"
-                            label="Title"
+                            label="Title (optional)"
                             name="title"
                             type="text"
                             placeholder="Enter title"
                             autoComplete="off"
                             error={errors.title}
                             register={register}
-                            validations={{
-                              required: "Title is required",
-                            }}
                           />
                         </div>
                       </div>
@@ -116,7 +112,7 @@ export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
                     <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+                    <PrimaryButton type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Adding Link..." : "Add Link"}
                     </PrimaryButton>
                   </div>

apps/app/components/core/reaction-selector.tsx

@@ -0,0 +1,87 @@
+import { Fragment } from "react";
+
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+
+// helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+// icons
+import { Icon } from "components/ui";
+
+const reactionEmojis = [
+  "128077",
+  "128078",
+  "128516",
+  "128165",
+  "128533",
+  "129505",
+  "9992",
+  "128064",
+];
+
+interface Props {
+  size?: "sm" | "md" | "lg";
+  position?: "top" | "bottom";
+  value?: string | string[] | null;
+  onSelect: (emoji: string) => void;
+}
+
+export const ReactionSelector: React.FC<Props> = (props) => {
+  const { value, onSelect, position, size } = props;
+
+  return (
+    <Popover className="relative">
+      {({ open, close: closePopover }) => (
+        <>
+          <Popover.Button
+            className={`${
+              open ? "" : "text-opacity-90"
+            } group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none`}
+          >
+            <span
+              className={`flex justify-center items-center rounded-md px-2 ${
+                size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8"
+              }`}
+            >
+              <Icon iconName="add_reaction" className="text-custom-text-100 scale-125" />
+            </span>
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel
+              className={`bg-custom-sidebar-background-100 absolute -left-2 z-10 ${
+                position === "top" ? "-top-12" : "-bottom-12"
+              }`}
+            >
+              <div className="bg-custom-sidebar-background-100 border border-custom-border-200 rounded-md p-1">
+                <div className="flex gap-x-1">
+                  {reactionEmojis.map((emoji) => (
+                    <button
+                      key={emoji}
+                      type="button"
+                      onClick={() => {
+                        onSelect(emoji);
+                        closePopover();
+                      }}
+                      className="flex select-none items-center justify-between rounded-md text-sm p-1 hover:bg-custom-sidebar-background-90"
+                    >
+                      {renderEmoji(emoji)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+};

apps/app/components/core/sidebar/links-list.tsx

@@ -1,5 +1,3 @@
-import Link from "next/link";
-
 // icons
 import { ArrowTopRightOnSquareIcon, LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -30,14 +28,14 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
         <div key={link.id} className="relative">
           {!isNotAllowed && (
             <div className="absolute top-1.5 right-1.5 z-[1] flex items-center gap-1">
-              <Link href={link.url}>
-                <a
-                  className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
-                  target="_blank"
-                >
-                  <ArrowTopRightOnSquareIcon className="h-4 w-4 text-custom-text-200" />
-                </a>
-              </Link>
+              <a
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
+              >
+                <ArrowTopRightOnSquareIcon className="h-4 w-4 text-custom-text-200" />
+              </a>
               <button
                 type="button"
                 className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
@@ -47,27 +45,27 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
               </button>
             </div>
           )}
-          <Link href={link.url}>
-            <a
-              className="relative flex gap-2 rounded-md bg-custom-background-100 p-2"
-              target="_blank"
-            >
-              <div className="mt-0.5">
-                <LinkIcon className="h-3.5 w-3.5" />
-              </div>
-              <div>
-                <h5 className="w-4/5 break-words">{link.title}</h5>
-                <p className="mt-0.5 text-custom-text-200">
-                  Added {timeAgo(link.created_at)}
-                  <br />
-                  by{" "}
-                  {link.created_by_detail.is_bot
-                    ? link.created_by_detail.first_name + " Bot"
-                    : link.created_by_detail.email}
-                </p>
-              </div>
-            </a>
-          </Link>
+          <a
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="relative flex gap-2 rounded-md bg-custom-background-90 p-2"
+          >
+            <div className="mt-0.5">
+              <LinkIcon className="h-3.5 w-3.5" />
+            </div>
+            <div>
+              <h5 className="w-4/5 break-words">{link.title ?? link.url}</h5>
+              <p className="mt-0.5 text-custom-text-200">
+                Added {timeAgo(link.created_at)}
+                <br />
+                by{" "}
+                {link.created_by_detail.is_bot
+                  ? link.created_by_detail.first_name + " Bot"
+                  : link.created_by_detail.email}
+              </p>
+            </div>
+          </a>
         </div>
       ))}
     </>

apps/app/components/core/sidebar/progress-chart.tsx

@@ -119,7 +119,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
         gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
         enableSlices="x"
         sliceTooltip={(datum) => (
-          <div className="rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+          <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
             {datum.slice.points[0].data.yFormatted}
             <span className="text-custom-text-200"> issues pending on </span>
             {datum.slice.points[0].data.xFormatted}

apps/app/components/core/sidebar/sidebar-progress-stats.tsx

@@ -87,7 +87,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full  ${
-              roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded"
+              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
               selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
             }`
@@ -98,7 +98,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded"
+              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
               selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
             }`
@@ -109,7 +109,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         <Tab
           className={({ selected }) =>
             `w-full ${
-              roundedTab ? "rounded-3xl border border-custom-border-100" : "rounded"
+              roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
             } px-3 py-1  text-custom-text-100 ${
               selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
             }`
@@ -159,7 +159,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
                   key={`unassigned-${index}`}
                   title={
                     <div className="flex items-center gap-2">
-                      <div className="h-5 w-5 rounded-full border-2 border-custom-border-100 bg-custom-background-80">
+                      <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
                         <img
                           src="/user.png"
                           height="100%"

apps/app/components/core/theme/color-picker-input.tsx

@@ -81,7 +81,7 @@ export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error
               >
                 {watch(name) && watch(name) !== "" ? (
                   <span
-                    className="h-4 w-4 rounded border border-custom-border-100"
+                    className="h-4 w-4 rounded border border-custom-border-200"
                     style={{
                       backgroundColor: `${watch(name)}`,
                     }}

apps/app/components/core/theme/custom-theme-selector.tsx

@@ -21,11 +21,11 @@ type Props = {
 };
 
 const defaultValues: ICustomTheme = {
-  background: "#fff7f7",
-  text: "#ffc9c9",
-  primary: "#fe5050",
-  sidebarBackground: "#ffffff",
-  sidebarText: "#000000",
+  background: "#0d101b",
+  text: "#c5c5c5",
+  primary: "#3f76ff",
+  sidebarBackground: "#0d101b",
+  sidebarText: "#c5c5c5",
   darkPalette: false,
   palette: "",
 };
@@ -69,8 +69,8 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
           return { ...prevData, ...res };
         }, false);
 
-        applyTheme(payload.palette, darkPalette);
         setTheme("custom");
+        applyTheme(payload.palette, darkPalette);
       })
       .catch((err) => console.log(err));
   };

apps/app/components/core/theme/theme-switch.tsx

@@ -72,8 +72,21 @@ export const ThemeSwitch: React.FC<Props> = ({
         onChange={({ value, type }: { value: string; type: string }) => {
           if (value === "custom") {
             if (user?.theme.palette) {
-              setPreLoadedData(user.theme);
+              setPreLoadedData({
+                background: user.theme.background !== "" ? user.theme.background : "#0d101b",
+                text: user.theme.text !== "" ? user.theme.text : "#c5c5c5",
+                primary: user.theme.primary !== "" ? user.theme.primary : "#3f76ff",
+                sidebarBackground:
+                  user.theme.sidebarBackground !== "" ? user.theme.sidebarBackground : "#0d101b",
+                sidebarText: user.theme.sidebarText !== "" ? user.theme.sidebarText : "#c5c5c5",
+                darkPalette: false,
+                palette:
+                  user.theme.palette !== ",,,,"
+                    ? user.theme.palette
+                    : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+              });
             }
+
             if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
           } else {
             if (customThemeSelectorOptions) setCustomThemeSelectorOptions(false);
@@ -81,11 +94,14 @@ export const ThemeSwitch: React.FC<Props> = ({
             for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
               document.documentElement.style.removeProperty(`--color-background-${i}`);
               document.documentElement.style.removeProperty(`--color-text-${i}`);
+              document.documentElement.style.removeProperty(`--color-border-${i}`);
               document.documentElement.style.removeProperty(`--color-primary-${i}`);
               document.documentElement.style.removeProperty(`--color-sidebar-background-${i}`);
               document.documentElement.style.removeProperty(`--color-sidebar-text-${i}`);
+              document.documentElement.style.removeProperty(`--color-sidebar-border-${i}`);
             }
           }
+
           setTheme(value);
           document.documentElement.style.setProperty("color-scheme", type);
         }}

apps/app/components/core/views/all-views.tsx

@@ -0,0 +1,201 @@
+import React, { useCallback } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// react-beautiful-dnd
+import { DragDropContext, DropResult } from "react-beautiful-dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+// services
+import stateService from "services/state.service";
+// hooks
+import useUser from "hooks/use-user";
+import { useProjectMyMembership } from "contexts/project-member.context";
+// components
+import {
+  AllLists,
+  AllBoards,
+  CalendarView,
+  SpreadsheetView,
+  GanttChartView,
+} from "components/core";
+// ui
+import { EmptyState, Spinner } from "components/ui";
+// icons
+import { TrashIcon } from "@heroicons/react/24/outline";
+// images
+import emptyIssue from "public/empty-state/issue.svg";
+import emptyIssueArchive from "public/empty-state/issue-archive.svg";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// types
+import { IIssue, IIssueViewProps } from "types";
+// fetch-keys
+import { STATES_LIST } from "constants/fetch-keys";
+
+type Props = {
+  addIssueToDate: (date: string) => void;
+  addIssueToGroup: (groupTitle: string) => void;
+  disableUserActions: boolean;
+  dragDisabled?: boolean;
+  emptyState: {
+    title: string;
+    description?: string;
+    primaryButton?: {
+      icon: any;
+      text: string;
+      onClick: () => void;
+    };
+    secondaryButton?: React.ReactNode;
+  };
+  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  handleOnDragEnd: (result: DropResult) => Promise<void>;
+  openIssuesListModal: (() => void) | null;
+  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
+  trashBox: boolean;
+  setTrashBox: React.Dispatch<React.SetStateAction<boolean>>;
+  viewProps: IIssueViewProps;
+};
+
+export const AllViews: React.FC<Props> = ({
+  addIssueToDate,
+  addIssueToGroup,
+  disableUserActions,
+  dragDisabled = false,
+  emptyState,
+  handleIssueAction,
+  handleOnDragEnd,
+  openIssuesListModal,
+  removeIssue,
+  trashBox,
+  setTrashBox,
+  viewProps,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { user } = useUser();
+  const { memberRole } = useProjectMyMembership();
+
+  const { groupedIssues, isEmpty, issueView } = viewProps;
+
+  const { data: stateGroups } = useSWR(
+    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
+    workspaceSlug
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const states = getStatesList(stateGroups);
+
+  const handleTrashBox = useCallback(
+    (isDragging: boolean) => {
+      if (isDragging && !trashBox) setTrashBox(true);
+    },
+    [trashBox, setTrashBox]
+  );
+
+  return (
+    <DragDropContext onDragEnd={handleOnDragEnd}>
+      <StrictModeDroppable droppableId="trashBox">
+        {(provided, snapshot) => (
+          <div
+            className={`${
+              trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+            } fixed top-4 left-1/2 -translate-x-1/2 z-40 w-72 flex items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
+              snapshot.isDraggingOver ? "bg-red-500 blur-2xl opacity-70" : ""
+            } transition duration-300`}
+            ref={provided.innerRef}
+            {...provided.droppableProps}
+          >
+            <TrashIcon className="h-4 w-4" />
+            Drop here to delete the issue.
+          </div>
+        )}
+      </StrictModeDroppable>
+      {groupedIssues ? (
+        !isEmpty || issueView === "kanban" || issueView === "calendar" ? (
+          <>
+            {issueView === "list" ? (
+              <AllLists
+                states={states}
+                addIssueToGroup={addIssueToGroup}
+                handleIssueAction={handleIssueAction}
+                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
+                removeIssue={removeIssue}
+                disableUserActions={disableUserActions}
+                user={user}
+                userAuth={memberRole}
+                viewProps={viewProps}
+              />
+            ) : issueView === "kanban" ? (
+              <AllBoards
+                addIssueToGroup={addIssueToGroup}
+                disableUserActions={disableUserActions}
+                dragDisabled={dragDisabled}
+                handleIssueAction={handleIssueAction}
+                handleTrashBox={handleTrashBox}
+                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
+                removeIssue={removeIssue}
+                states={states}
+                user={user}
+                userAuth={memberRole}
+                viewProps={viewProps}
+              />
+            ) : issueView === "calendar" ? (
+              <CalendarView
+                handleIssueAction={handleIssueAction}
+                addIssueToDate={addIssueToDate}
+                disableUserActions={disableUserActions}
+                user={user}
+                userAuth={memberRole}
+              />
+            ) : issueView === "spreadsheet" ? (
+              <SpreadsheetView
+                handleIssueAction={handleIssueAction}
+                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
+                disableUserActions={disableUserActions}
+                user={user}
+                userAuth={memberRole}
+              />
+            ) : (
+              issueView === "gantt_chart" && <GanttChartView />
+            )}
+          </>
+        ) : router.pathname.includes("archived-issues") ? (
+          <EmptyState
+            title="Archived Issues will be shown here"
+            description="All the issues that have been in the completed or canceled groups for the configured period of time can be viewed here."
+            image={emptyIssueArchive}
+            primaryButton={{
+              text: "Go to Automation Settings",
+              onClick: () => {
+                router.push(`/${workspaceSlug}/projects/${projectId}/settings/automations`);
+              },
+            }}
+          />
+        ) : (
+          <EmptyState
+            title={emptyState.title}
+            description={emptyState.description}
+            image={emptyIssue}
+            primaryButton={
+              emptyState.primaryButton
+                ? {
+                    icon: emptyState.primaryButton.icon,
+                    text: emptyState.primaryButton.text,
+                    onClick: emptyState.primaryButton.onClick,
+                  }
+                : undefined
+            }
+            secondaryButton={emptyState.secondaryButton}
+          />
+        )
+      ) : (
+        <div className="flex h-full w-full items-center justify-center">
+          <Spinner />
+        </div>
+      )}
+    </DragDropContext>
+  );
+};

apps/app/components/core/views/board-view/all-boards.tsx

@@ -1,87 +1,78 @@
-// hooks
-import useProjectIssuesView from "hooks/use-issues-view";
 // components
-import { SingleBoard } from "components/core/board-view/single-board";
+import { SingleBoard } from "components/core/views/board-view/single-board";
 // icons
 import { getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { ICurrentUserResponse, IIssue, IState, UserAuth } from "types";
+import { ICurrentUserResponse, IIssue, IIssueViewProps, IState, UserAuth } from "types";
 
 type Props = {
-  type: "issue" | "cycle" | "module";
-  states: IState[] | undefined;
-  addIssueToState: (groupTitle: string) => void;
-  makeIssueCopy: (issue: IIssue) => void;
-  handleEditIssue: (issue: IIssue) => void;
-  openIssuesListModal?: (() => void) | null;
-  handleDeleteIssue: (issue: IIssue) => void;
+  addIssueToGroup: (groupTitle: string) => void;
+  disableUserActions: boolean;
+  dragDisabled: boolean;
+  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
   handleTrashBox: (isDragging: boolean) => void;
+  openIssuesListModal?: (() => void) | null;
   removeIssue: ((bridgeId: string, issueId: string) => void) | null;
-  isCompleted?: boolean;
+  states: IState[] | undefined;
   user: ICurrentUserResponse | undefined;
   userAuth: UserAuth;
+  viewProps: IIssueViewProps;
 };
 
 export const AllBoards: React.FC<Props> = ({
-  type,
-  states,
-  addIssueToState,
-  makeIssueCopy,
-  handleEditIssue,
-  openIssuesListModal,
-  handleDeleteIssue,
+  addIssueToGroup,
+  disableUserActions,
+  dragDisabled,
+  handleIssueAction,
   handleTrashBox,
+  openIssuesListModal,
   removeIssue,
-  isCompleted = false,
+  states,
   user,
   userAuth,
+  viewProps,
 }) => {
-  const {
-    groupedByIssues,
-    groupByProperty: selectedGroup,
-    showEmptyGroups,
-  } = useProjectIssuesView();
+  const { groupByProperty: selectedGroup, groupedIssues, showEmptyGroups } = viewProps;
 
   return (
     <>
-      {groupedByIssues ? (
+      {groupedIssues ? (
         <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8">
-          {Object.keys(groupedByIssues).map((singleGroup, index) => {
+          {Object.keys(groupedIssues).map((singleGroup, index) => {
             const currentState =
               selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
 
-            if (!showEmptyGroups && groupedByIssues[singleGroup].length === 0) return null;
+            if (!showEmptyGroups && groupedIssues[singleGroup].length === 0) return null;
 
             return (
               <SingleBoard
                 key={index}
-                type={type}
+                addIssueToGroup={() => addIssueToGroup(singleGroup)}
                 currentState={currentState}
+                disableUserActions={disableUserActions}
+                dragDisabled={dragDisabled}
                 groupTitle={singleGroup}
-                handleEditIssue={handleEditIssue}
-                makeIssueCopy={makeIssueCopy}
-                addIssueToState={() => addIssueToState(singleGroup)}
-                handleDeleteIssue={handleDeleteIssue}
-                openIssuesListModal={openIssuesListModal ?? null}
+                handleIssueAction={handleIssueAction}
                 handleTrashBox={handleTrashBox}
+                openIssuesListModal={openIssuesListModal ?? null}
                 removeIssue={removeIssue}
-                isCompleted={isCompleted}
                 user={user}
                 userAuth={userAuth}
+                viewProps={viewProps}
               />
             );
           })}
           {!showEmptyGroups && (
-            <div className="h-full w-96 flex-shrink-0 space-y-3 p-1">
+            <div className="h-full w-96 flex-shrink-0 space-y-2 p-1">
               <h2 className="text-lg font-semibold">Hidden groups</h2>
               <div className="space-y-3">
-                {Object.keys(groupedByIssues).map((singleGroup, index) => {
+                {Object.keys(groupedIssues).map((singleGroup, index) => {
                   const currentState =
                     selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
 
-                  if (groupedByIssues[singleGroup].length === 0)
+                  if (groupedIssues[singleGroup].length === 0)
                     return (
                       <div
                         key={index}

apps/app/components/core/views/board-view/board-header.tsx

@@ -8,7 +8,7 @@ import useSWR from "swr";
 import issuesService from "services/issues.service";
 import projectService from "services/project.service";
 // hooks
-import useIssuesView from "hooks/use-issues-view";
+import useProjects from "hooks/use-projects";
 // component
 import { Avatar } from "components/ui";
 // icons
@@ -16,47 +16,56 @@ import { ArrowsPointingInIcon, ArrowsPointingOutIcon, PlusIcon } from "@heroicon
 import { getPriorityIcon, getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
 // types
-import { IIssueLabels, IState } from "types";
+import { IIssueViewProps, IState } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   currentState?: IState | null;
   groupTitle: string;
-  addIssueToState: () => void;
+  addIssueToGroup: () => void;
   isCollapsed: boolean;
   setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-  isCompleted?: boolean;
+  disableUserActions: boolean;
+  viewProps: IIssueViewProps;
 };
 
 export const BoardHeader: React.FC<Props> = ({
   currentState,
   groupTitle,
-  addIssueToState,
+  addIssueToGroup,
   isCollapsed,
   setIsCollapsed,
-  isCompleted = false,
+  disableUserActions,
+  viewProps,
 }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { groupedByIssues, groupByProperty: selectedGroup } = useIssuesView();
+  const { groupedIssues, groupByProperty: selectedGroup } = viewProps;
 
-  const { data: issueLabels } = useSWR<IIssueLabels[]>(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+  const { data: issueLabels } = useSWR(
+    workspaceSlug && projectId && selectedGroup === "labels"
+      ? PROJECT_ISSUE_LABELS(projectId.toString())
+      : null,
+    workspaceSlug && projectId && selectedGroup === "labels"
+      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
   const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+    workspaceSlug && projectId && selectedGroup === "created_by"
+      ? PROJECT_MEMBERS(projectId.toString())
+      : null,
+    workspaceSlug && projectId && selectedGroup === "created_by"
+      ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
+  const { projects } = useProjects();
+
   const getGroupTitle = () => {
     let title = addSpaceIfCamelCase(groupTitle);
 
@@ -67,6 +76,9 @@ export const BoardHeader: React.FC<Props> = ({
       case "labels":
         title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
         break;
+      case "project":
+        title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
+        break;
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
         title =
@@ -87,9 +99,22 @@ export const BoardHeader: React.FC<Props> = ({
         icon =
           currentState && getStateGroupIcon(currentState.group, "16", "16", currentState.color);
         break;
+      case "state_detail.group":
+        icon = getStateGroupIcon(groupTitle as any, "16", "16");
+        break;
       case "priority":
         icon = getPriorityIcon(groupTitle, "text-lg");
         break;
+      case "project":
+        const project = projects?.find((p) => p.id === groupTitle);
+        icon =
+          project &&
+          (project.emoji !== null
+            ? renderEmoji(project.emoji)
+            : project.icon_prop !== null
+            ? renderEmoji(project.icon_prop)
+            : null);
+        break;
       case "labels":
         const labelColor =
           issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
@@ -116,7 +141,7 @@ export const BoardHeader: React.FC<Props> = ({
         !isCollapsed ? "flex-col rounded-md bg-custom-background-90" : ""
       }`}
     >
-      <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
+      <div className={`flex items-center ${isCollapsed ? "gap-1" : "flex-col gap-2"}`}>
         <div
           className={`flex cursor-pointer items-center gap-x-3 max-w-[316px] ${
             !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
@@ -126,7 +151,7 @@ export const BoardHeader: React.FC<Props> = ({
           <h2
             className="text-lg font-semibold capitalize truncate"
             style={{
-              writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
+              writingMode: isCollapsed ? "horizontal-tb" : "vertical-rl",
             }}
           >
             {getGroupTitle()}
@@ -136,7 +161,7 @@ export const BoardHeader: React.FC<Props> = ({
               isCollapsed ? "ml-0.5" : ""
             } min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs`}
           >
-            {groupedByIssues?.[groupTitle].length ?? 0}
+            {groupedIssues?.[groupTitle].length ?? 0}
           </span>
         </div>
       </div>
@@ -155,11 +180,11 @@ export const BoardHeader: React.FC<Props> = ({
             <ArrowsPointingOutIcon className="h-4 w-4" />
           )}
         </button>
-        {!isCompleted && selectedGroup !== "created_by" && (
+        {!disableUserActions && selectedGroup !== "created_by" && (
           <button
             type="button"
             className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
-            onClick={addIssueToState}
+            onClick={addIssueToGroup}
           >
             <PlusIcon className="h-4 w-4" />
           </button>