Merge pull request #2091 from makeplane/stage-release

promote: stage release to master

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
   extends: ["custom"],
   settings: {
     next: {
-      rootDir: ["web/", "deploy/"],
+      rootDir: ["web/", "space/"],
     },
   },
 };

.github/workflows/Build_Test_Pull_Request.yml

@@ -0,0 +1,55 @@
+name: Build Pull Request Contents
+
+on: 
+  pull_request:
+    types: ["opened", "synchronize"]
+
+jobs:
+  build-pull-request-contents:
+    name: Build Pull Request Contents
+    runs-on: ubuntu-20.04
+    permissions:
+      pull-requests: read
+
+    steps:
+      - name: Checkout Repository to Actions
+        uses: actions/checkout@v3.3.0
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+          cache: 'yarn'
+      
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v38
+        with:
+          files_yaml: |
+            apiserver:
+              - apiserver/**
+            web:
+              - web/**
+            deploy:
+              - space/**
+
+      - name: Setup .npmrc for repository
+        run: |
+            echo -e "@tiptap-pro:registry=https://registry.tiptap.dev/\n//registry.tiptap.dev/:_authToken=${{ secrets.TIPTAP_TOKEN }}" > .npmrc
+
+      - name: Build Plane's Main App
+        if: steps.changed-files.outputs.web_any_changed == 'true'
+        run: |
+          mv ./.npmrc ./web
+          cd web
+          yarn
+          yarn build
+
+      - name: Build Plane's Deploy App
+        if: steps.changed-files.outputs.deploy_any_changed == 'true'
+        run: |
+          cd space
+          yarn 
+          yarn build
+
+

.github/workflows/Update_Docker_Images.yml

@@ -0,0 +1,111 @@
+name: Update Docker Images for Plane on Release
+
+on:
+  release:
+    types: [released]
+
+jobs:
+  build_push_backend:
+    name: Build and Push Api Server Docker Image
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.3.0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Setup .npmrc for repository
+        run: |
+            echo -e "@tiptap-pro:registry=https://registry.tiptap.dev/\n//registry.tiptap.dev/:_authToken=${{ secrets.TIPTAP_TOKEN }}" > .npmrc
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaFrontend
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend
+          tags: |
+            type=ref,event=tag
+      
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaBackend
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend
+          tags: |
+            type=ref,event=tag
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaDeploy
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-deploy
+          tags: |
+            type=ref,event=tag
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
+        id: metaProxy
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy
+          tags: |
+            type=ref,event=tag
+
+      - name: Build and Push Frontend to Docker Container Registry
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./web/Dockerfile.web
+          platforms: linux/amd64
+          tags: ${{ steps.metaFrontend.outputs.tags }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and Push Backend to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: ./apiserver
+          file: ./apiserver/Dockerfile.api
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.metaBackend.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and Push Plane-Deploy to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./space/Dockerfile.space
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.metaDeploy.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and Push Plane-Proxy to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: ./nginx
+          file: ./nginx/Dockerfile
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.metaProxy.outputs.tags }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

.github/workflows/push-image-backend.yml

@@ -1,77 +0,0 @@
-name: Build and Push Backend Docker Image
-
-on:
-  push:
-    branches:
-      - 'develop'
-      - 'master'
-    tags:
-      - '*'
-
-jobs:
-  build_push_backend:
-    name: Build and Push Api Server Docker Image
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.1.0
-        with:
-          platforms: linux/arm64,linux/amd64
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.5.0
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2.1.0
-        with:
-          registry: "ghcr.io"
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2.1.0
-        with:
-          registry: "registry.hub.docker.com"
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_PASSWORD }}
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub)
-        id: ghmeta
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: makeplane/plane-backend
-
-      - name: Extract metadata (tags, labels) for Docker (Github)
-        id: dkrmeta
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ghcr.io/${{ github.repository }}-backend
-
-      - name: Build and Push to GitHub Container Registry
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: ./apiserver
-          file: ./apiserver/Dockerfile.api
-          platforms: linux/arm64,linux/amd64
-          push: true
-          cache-from: type=gha
-          cache-to: type=gha
-          tags: ${{ steps.ghmeta.outputs.tags }}
-          labels: ${{ steps.ghmeta.outputs.labels }}
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: ./apiserver
-          file: ./apiserver/Dockerfile.api
-          platforms: linux/arm64,linux/amd64
-          push: true
-          cache-from: type=gha
-          cache-to: type=gha
-          tags: ${{ steps.dkrmeta.outputs.tags }}
-          labels: ${{ steps.dkrmeta.outputs.labels }}
-

.github/workflows/push-image-frontend.yml

@@ -1,77 +0,0 @@
-name: Build and Push Frontend Docker Image
-
-on:
-  push:
-    branches:
-      - 'develop'
-      - 'master'
-    tags:
-      - '*'
-
-jobs:
-  build_push_frontend:
-    name: Build Frontend Docker Image
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.1.0
-        with:
-          platforms: linux/arm64,linux/amd64
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.5.0
-
-      - name: Login to Github Container Registry
-        uses: docker/login-action@v2.1.0
-        with:
-          registry: "ghcr.io"
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2.1.0
-        with:
-          registry: "registry.hub.docker.com"
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_PASSWORD }}
-      
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub)
-        id: ghmeta
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: makeplane/plane-frontend
-
-      - name: Extract metadata (tags, labels) for Docker (Github)
-        id: meta
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ghcr.io/${{ github.repository }}-frontend
-
-      - name: Build and Push to GitHub Container Registry
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: .
-          file: ./apps/app/Dockerfile.web
-          platforms: linux/arm64,linux/amd64
-          push: true
-          cache-from: type=gha
-          cache-to: type=gha
-          tags: ${{ steps.ghmeta.outputs.tags }}
-          labels: ${{ steps.ghmeta.outputs.labels }}
-      
-      - name: Build and Push to Docker Container Registry
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: .
-          file: ./apps/app/Dockerfile.web
-          platforms: linux/arm64,linux/amd64
-          push: true
-          cache-from: type=gha
-          cache-to: type=gha
-          tags: ${{ steps.dkrmeta.outputs.tags }}
-          labels: ${{ steps.dkrmeta.outputs.labels }}
-

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within
@@ -125,4 +125,4 @@ enforcement ladder](https://github.com/mozilla/diversity).
 
 For answers to common questions about this code of conduct, see the FAQ at
 https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.
+https://www.contributor-covenant.org/translations.

README.md

@@ -35,12 +35,10 @@
 
 Meet [Plane](https://plane.so). An open-source software development tool to manage issues, sprints, and product roadmaps with peace of mind 🧘‍♀️.
 
-
 > Plane is still in its early days, not everything will be perfect yet, and hiccups may happen. Please let us know of any suggestions, ideas, or bugs that you encounter on our [Discord](https://discord.com/invite/A92xrEGCge) or GitHub issues, and we will use your feedback to improve on our upcoming releases.
 
 The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account. Plane Cloud offers a hosted solution for Plane. If you prefer to self-host Plane, please refer to our [deployment documentation](https://docs.plane.so/self-hosting).
 
-
 ## ⚡️ Quick start with Docker Compose
 
 ### Docker Compose Setup
@@ -56,7 +54,7 @@ chmod +x setup.sh
 - Run setup.sh
 
 ```bash
-./setup.sh http://localhost 
+./setup.sh http://localhost
 ```
 
 > If running in a cloud env replace localhost with public facing IP address of the VM
@@ -65,31 +63,32 @@ chmod +x setup.sh
 
   Visit [Tiptap Pro](https://collab.tiptap.dev/pro-extensions) and signup (it is free).
 
-  Create a **`.npmrc`** file, copy the following and replace your registry token generated from Tiptap Pro. 
+  Create a **`.npmrc`** file, copy the following and replace your registry token generated from Tiptap Pro.
 
 ```
 @tiptap-pro:registry=https://registry.tiptap.dev/
 //registry.tiptap.dev/:_authToken=YOUR_REGISTRY_TOKEN
 ```
+
 - Run Docker compose up
 
 ```bash
 docker compose up -d
 ```
 
-<strong>You can use the default email and password for your first login `captain@plane.so` and `password123`.</strong> 
+<strong>You can use the default email and password for your first login `captain@plane.so` and `password123`.</strong>
 
 ## 🚀 Features
 
-* **Issue Planning and Tracking**: Quickly create issues and add details using a powerful rich text editor that supports file uploads. Add sub-properties and references to issues for better organization and tracking.
-* **Issue Attachments**: Collaborate effectively by attaching files to issues, making it easy for your team to find and share important project-related documents.
-* **Layouts**: Customize your project view with your preferred layout - choose from List, Kanban, or Calendar to visualize your project in a way that makes sense to you.
-* **Cycles**: Plan sprints with Cycles to keep your team on track and productive. Gain insights into your project's progress with burn-down charts and other useful features.
-* **Modules**: Break down your large projects into smaller, more manageable modules. Assign modules between teams to easily track and plan your project's progress.
-* **Views**: Create custom filters to display only the issues that matter to you. Save and share your filters in just a few clicks.
-* **Pages**: Plane pages function as an AI-powered notepad, allowing you to easily document issues, cycle plans, and module details, and then synchronize them with your issues.
-* **Command K**: Enjoy a better user experience with the new Command + K menu. Easily manage and navigate through your projects from one convenient location.
-* **GitHub Sync**: Streamline your planning process by syncing your GitHub issues with Plane. Keep all your issues in one place for better tracking and collaboration.
+- **Issue Planning and Tracking**: Quickly create issues and add details using a powerful rich text editor that supports file uploads. Add sub-properties and references to issues for better organization and tracking.
+- **Issue Attachments**: Collaborate effectively by attaching files to issues, making it easy for your team to find and share important project-related documents.
+- **Layouts**: Customize your project view with your preferred layout - choose from List, Kanban, or Calendar to visualize your project in a way that makes sense to you.
+- **Cycles**: Plan sprints with Cycles to keep your team on track and productive. Gain insights into your project's progress with burn-down charts and other useful features.
+- **Modules**: Break down your large projects into smaller, more manageable modules. Assign modules between teams to easily track and plan your project's progress.
+- **Views**: Create custom filters to display only the issues that matter to you. Save and share your filters in just a few clicks.
+- **Pages**: Plane pages function as an AI-powered notepad, allowing you to easily document issues, cycle plans, and module details, and then synchronize them with your issues.
+- **Command K**: Enjoy a better user experience with the new Command + K menu. Easily manage and navigate through your projects from one convenient location.
+- **GitHub Sync**: Streamline your planning process by syncing your GitHub issues with Plane. Keep all your issues in one place for better tracking and collaboration.
 
 ## 📸 Screenshots
 
@@ -150,7 +149,6 @@ docker compose up -d
   </p>
 </p>
 
-
 ## 📚Documentation
 
 For full documentation, visit [docs.plane.so](https://docs.plane.so/)

apiserver/Procfile

@@ -1,3 +1,3 @@
-web: gunicorn -w 4 -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:$PORT --config gunicorn.config.py --max-requests 10000 --max-requests-jitter 1000 --access-logfile -
+web: gunicorn -w 4 -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:$PORT --max-requests 10000 --max-requests-jitter 1000 --access-logfile -
 worker: celery -A plane worker -l info
 beat: celery -A plane beat -l INFO

apiserver/plane/api/serializers/__init__.py

@@ -20,6 +20,7 @@ from .project import (
     ProjectMemberLiteSerializer,
     ProjectDeployBoardSerializer,
     ProjectMemberAdminSerializer,
+    ProjectPublicMemberSerializer
 )
 from .state import StateSerializer, StateLiteSerializer
 from .view import IssueViewSerializer, IssueViewFavoriteSerializer
@@ -44,6 +45,7 @@ from .issue import (
     IssueReactionSerializer,
     CommentReactionSerializer,
     IssueVoteSerializer,
+    IssuePublicSerializer,
 )
 
 from .module import (

apiserver/plane/api/serializers/issue.py

@@ -113,7 +113,11 @@ class IssueCreateSerializer(BaseSerializer):
         ]
 
     def validate(self, data):
-        if data.get("start_date", None) is not None and data.get("target_date", None) is not None and data.get("start_date", None) > data.get("target_date", None):
+        if (
+            data.get("start_date", None) is not None
+            and data.get("target_date", None) is not None
+            and data.get("start_date", None) > data.get("target_date", None)
+        ):
             raise serializers.ValidationError("Start date cannot exceed target date")
         return data
 
@@ -510,6 +514,9 @@ class IssueAttachmentSerializer(BaseSerializer):
 
 
 class IssueReactionSerializer(BaseSerializer):
+    
+    actor_detail = UserLiteSerializer(read_only=True, source="actor")
+    
     class Meta:
         model = IssueReaction
         fields = "__all__"
@@ -521,19 +528,6 @@ class IssueReactionSerializer(BaseSerializer):
         ]
 
 
-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")
 
@@ -554,12 +548,13 @@ class CommentReactionSerializer(BaseSerializer):
         read_only_fields = ["workspace", "project", "comment", "actor"]
 
 
-
 class IssueVoteSerializer(BaseSerializer):
 
+    actor_detail = UserLiteSerializer(read_only=True, source="actor")
+
     class Meta:
         model = IssueVote
-        fields = ["issue", "vote", "workspace_id", "project_id", "actor"]
+        fields = ["issue", "vote", "workspace", "project", "actor", "actor_detail"]
         read_only_fields = fields
 
 
@@ -569,7 +564,7 @@ class IssueCommentSerializer(BaseSerializer):
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
     workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
     comment_reactions = CommentReactionLiteSerializer(read_only=True, many=True)
-
+    is_member = serializers.BooleanField(read_only=True)
 
     class Meta:
         model = IssueComment
@@ -582,7 +577,6 @@ class IssueCommentSerializer(BaseSerializer):
             "updated_by",
             "created_at",
             "updated_at",
-            "access",
         ]
 
 
@@ -632,7 +626,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)
+    issue_reactions = IssueReactionSerializer(read_only=True, many=True)
 
     class Meta:
         model = Issue
@@ -658,7 +652,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)
+    issue_reactions = IssueReactionSerializer(read_only=True, many=True)
 
     class Meta:
         model = Issue
@@ -676,6 +670,33 @@ class IssueLiteSerializer(BaseSerializer):
         ]
 
 
+class IssuePublicSerializer(BaseSerializer):
+    project_detail = ProjectLiteSerializer(read_only=True, source="project")
+    state_detail = StateLiteSerializer(read_only=True, source="state")
+    reactions = IssueReactionSerializer(read_only=True, many=True, source="issue_reactions")
+    votes = IssueVoteSerializer(read_only=True, many=True)
+
+    class Meta:
+        model = Issue
+        fields = [
+            "id",
+            "name",
+            "description_html",
+            "sequence_id",
+            "state",
+            "state_detail",
+            "project",
+            "project_detail",
+            "workspace",
+            "priority",
+            "target_date",
+            "reactions",
+            "votes",
+        ]
+        read_only_fields = fields
+
+
+
 class IssueSubscriberSerializer(BaseSerializer):
     class Meta:
         model = IssueSubscriber

apiserver/plane/api/serializers/project.py

@@ -15,6 +15,7 @@ from plane.db.models import (
     ProjectIdentifier,
     ProjectFavorite,
     ProjectDeployBoard,
+    ProjectPublicMember,
 )
 
 
@@ -112,7 +113,7 @@ class ProjectDetailSerializer(BaseSerializer):
 
 
 class ProjectMemberSerializer(BaseSerializer):
-    workspace = WorkSpaceSerializer(read_only=True)
+    workspace = WorkspaceLiteSerializer(read_only=True)
     project = ProjectLiteSerializer(read_only=True)
     member = UserLiteSerializer(read_only=True)
 
@@ -177,5 +178,17 @@ class ProjectDeployBoardSerializer(BaseSerializer):
         fields = "__all__"
         read_only_fields = [
             "workspace",
-            "project" "anchor",
+            "project", "anchor",
+        ]
+
+
+class ProjectPublicMemberSerializer(BaseSerializer):
+
+    class Meta:
+        model = ProjectPublicMember
+        fields = "__all__"
+        read_only_fields = [
+            "workspace",
+            "project",
+            "member",
         ]

apiserver/plane/api/urls.py

@@ -51,6 +51,7 @@ from plane.api.views import (
     WorkspaceUserProfileEndpoint,
     WorkspaceUserProfileIssuesEndpoint,
     WorkspaceLabelsEndpoint,
+    LeaveWorkspaceEndpoint,
     ## End Workspaces
     # File Assets
     FileAssetEndpoint,
@@ -68,6 +69,7 @@ from plane.api.views import (
     UserProjectInvitationsViewset,
     ProjectIdentifierEndpoint,
     ProjectFavoritesViewSet,
+    LeaveProjectEndpoint,
     ## End Projects
     # Issues
     IssueViewSet,
@@ -89,7 +91,6 @@ from plane.api.views import (
     IssueCommentPublicViewSet,
     IssueReactionViewSet,
     CommentReactionViewSet,
-    ExportIssuesEndpoint,
     ## End Issues
     # States
     StateViewSet,
@@ -165,16 +166,23 @@ from plane.api.views import (
     # Notification
     NotificationViewSet,
     UnreadNotificationEndpoint,
+    MarkAllReadNotificationViewSet,
     ## End Notification
     # Public Boards
     ProjectDeployBoardViewSet,
-    ProjectDeployBoardIssuesPublicEndpoint,
+    ProjectIssuesPublicEndpoint,
     ProjectDeployBoardPublicSettingsEndpoint,
     IssueReactionPublicViewSet,
     CommentReactionPublicViewSet,
     InboxIssuePublicViewSet,
     IssueVotePublicViewSet,
+    WorkspaceProjectDeployBoardEndpoint,
+    IssueRetrievePublicEndpoint,
     ## End Public Boards
+    ## Exporter
+    ExportIssuesEndpoint,
+    ## End Exporter
+
 )
 
 
@@ -231,7 +239,7 @@ urlpatterns = [
         UpdateUserTourCompletedEndpoint.as_view(),
         name="user-tour",
     ),
-    path("users/activities/", UserActivityEndpoint.as_view(), name="user-activities"),
+    path("users/workspaces/<str:slug>/activities/", UserActivityEndpoint.as_view(), name="user-activities"),
     # user workspaces
     path(
         "users/me/workspaces/",
@@ -435,6 +443,11 @@ urlpatterns = [
         WorkspaceLabelsEndpoint.as_view(),
         name="workspace-labels",
     ),
+    path(
+        "workspaces/<str:slug>/members/leave/",
+        LeaveWorkspaceEndpoint.as_view(),
+        name="workspace-labels",
+    ),
     ## End Workspaces ##
     # Projects
     path(
@@ -548,6 +561,11 @@ urlpatterns = [
         ),
         name="project",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/leave/",
+        LeaveProjectEndpoint.as_view(),
+        name="project",
+    ),
     # End Projects
     #  States
     path(
@@ -1490,6 +1508,15 @@ urlpatterns = [
         UnreadNotificationEndpoint.as_view(),
         name="unread-notifications",
     ),
+    path(
+        "workspaces/<str:slug>/users/notifications/mark-all-read/",
+        MarkAllReadNotificationViewSet.as_view(
+            {
+                "post": "create",
+            }
+        ),
+        name="mark-all-read-notifications",
+    ),
     ## End Notification
     # Public Boards
     path(
@@ -1520,9 +1547,14 @@ urlpatterns = [
     ),
     path(
         "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/",
-        ProjectDeployBoardIssuesPublicEndpoint.as_view(),
+        ProjectIssuesPublicEndpoint.as_view(),
         name="project-deploy-board",
     ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/",
+        IssueRetrievePublicEndpoint.as_view(),
+        name="workspace-project-boards",
+    ),
     path(
         "public/workspaces/<str:slug>/project-boards/<uuid:project_id>/issues/<uuid:issue_id>/comments/",
         IssueCommentPublicViewSet.as_view(
@@ -1614,5 +1646,10 @@ urlpatterns = [
         ),
         name="issue-vote-project-board",
     ),
+    path(
+        "public/workspaces/<str:slug>/project-boards/",
+        WorkspaceProjectDeployBoardEndpoint.as_view(),
+        name="workspace-project-boards",
+    ),
     ## End Public Boards
 ]

apiserver/plane/api/views/__init__.py

@@ -12,10 +12,11 @@ from .project import (
     ProjectUserViewsEndpoint,
     ProjectMemberUserEndpoint,
     ProjectFavoritesViewSet,
-    ProjectDeployBoardIssuesPublicEndpoint,
     ProjectDeployBoardViewSet,
     ProjectDeployBoardPublicSettingsEndpoint,
     ProjectMemberEndpoint,
+    WorkspaceProjectDeployBoardEndpoint,
+    LeaveProjectEndpoint,
 )
 from .user import (
     UserEndpoint,
@@ -52,6 +53,7 @@ from .workspace import (
     WorkspaceUserProfileIssuesEndpoint,
     WorkspaceLabelsEndpoint,
     WorkspaceMembersEndpoint,
+    LeaveWorkspaceEndpoint,
 )
 from .state import StateViewSet
 from .view import IssueViewViewSet, ViewIssuesEndpoint, IssueViewFavoriteViewSet
@@ -84,6 +86,8 @@ from .issue import (
     IssueReactionPublicViewSet,
     CommentReactionPublicViewSet,
     IssueVotePublicViewSet,
+    IssueRetrievePublicEndpoint,
+    ProjectIssuesPublicEndpoint,
 )
 
 from .auth_extended import (
@@ -161,7 +165,7 @@ from .analytic import (
     DefaultAnalyticsEndpoint,
 )
 
-from .notification import NotificationViewSet, UnreadNotificationEndpoint
+from .notification import NotificationViewSet, UnreadNotificationEndpoint, MarkAllReadNotificationViewSet
 
 from .exporter import (
     ExportIssuesEndpoint,

apiserver/plane/api/views/asset.py

@@ -18,10 +18,21 @@ class FileAssetEndpoint(BaseAPIView):
     """
 
     def get(self, request, workspace_id, asset_key):
-        asset_key = str(workspace_id) + "/" + asset_key
-        files = FileAsset.objects.filter(asset=asset_key)
-        serializer = FileAssetSerializer(files, context={"request": request}, many=True)
-        return Response(serializer.data)
+        try:
+            asset_key = str(workspace_id) + "/" + asset_key
+            files = FileAsset.objects.filter(asset=asset_key)
+            if files.exists():
+                serializer = FileAssetSerializer(files, context={"request": request}, many=True)
+                return Response({"data": serializer.data, "status": True}, status=status.HTTP_200_OK)
+            else:
+                return Response({"error": "Asset key does not exist", "status": False}, 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,
+            )
+
 
     def post(self, request, slug):
         try:
@@ -68,11 +79,16 @@ class UserAssetsEndpoint(BaseAPIView):
     def get(self, request, asset_key):
         try:
             files = FileAsset.objects.filter(asset=asset_key, created_by=request.user)
-            serializer = FileAssetSerializer(files, context={"request": request})
-            return Response(serializer.data)
-        except FileAsset.DoesNotExist:
+            if files.exists():
+                serializer = FileAssetSerializer(files, context={"request": request})
+                return Response({"data": serializer.data, "status": True}, status=status.HTTP_200_OK)
+            else:
+                return Response({"error": "Asset key does not exist", "status": False}, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
             return Response(
-                {"error": "File Asset does not exist"}, status=status.HTTP_404_NOT_FOUND
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
     def post(self, request):

apiserver/plane/api/views/base.py

@@ -1,24 +1,41 @@
+# Python imports
+import zoneinfo
+
 # Django imports
 from django.urls import resolve
 from django.conf import settings
-
+from django.utils import timezone
 # Third part imports
+
 from rest_framework import status
 from rest_framework.viewsets import ModelViewSet
 from rest_framework.exceptions import APIException
 from rest_framework.views import APIView
 from rest_framework.filters import SearchFilter
 from rest_framework.permissions import IsAuthenticated
-from rest_framework.exceptions import NotFound
 from sentry_sdk import capture_exception
 from django_filters.rest_framework import DjangoFilterBackend
 
 # Module imports
-from plane.db.models import Workspace, Project
 from plane.utils.paginator import BasePaginator
 
 
-class BaseViewSet(ModelViewSet, BasePaginator):
+class TimezoneMixin:
+    """
+    This enables timezone conversion according
+    to the user set timezone
+    """
+    def initial(self, request, *args, **kwargs):
+        super().initial(request, *args, **kwargs)
+        if request.user.is_authenticated:
+            timezone.activate(zoneinfo.ZoneInfo(request.user.user_timezone))
+        else:
+            timezone.deactivate()
+
+
+
+
+class BaseViewSet(TimezoneMixin, ModelViewSet, BasePaginator):
 
     model = None
 
@@ -67,7 +84,7 @@ class BaseViewSet(ModelViewSet, BasePaginator):
             return self.kwargs.get("pk", None)
 
 
-class BaseAPIView(APIView, BasePaginator):
+class BaseAPIView(TimezoneMixin, APIView, BasePaginator):
 
     permission_classes = [
         IsAuthenticated,

apiserver/plane/api/views/cycle.py

@@ -191,11 +191,10 @@ class CycleViewSet(BaseViewSet):
                             workspace__slug=slug,
                             project_id=project_id,
                         )
-                        .annotate(first_name=F("assignees__first_name"))
-                        .annotate(last_name=F("assignees__last_name"))
+                        .annotate(display_name=F("assignees__display_name"))
                         .annotate(assignee_id=F("assignees__id"))
                         .annotate(avatar=F("assignees__avatar"))
-                        .values("first_name", "last_name", "assignee_id", "avatar")
+                        .values("display_name", "assignee_id", "avatar")
                         .annotate(total_issues=Count("assignee_id"))
                         .annotate(
                             completed_issues=Count(
@@ -209,7 +208,7 @@ class CycleViewSet(BaseViewSet):
                                 filter=Q(completed_at__isnull=True),
                             )
                         )
-                        .order_by("first_name", "last_name")
+                        .order_by("display_name")
                     )
 
                     label_distribution = (
@@ -334,13 +333,21 @@ class CycleViewSet(BaseViewSet):
                 workspace__slug=slug, project_id=project_id, pk=pk
             )
 
+            request_data = request.data
+
             if cycle.end_date is not None and cycle.end_date < timezone.now().date():
-                return Response(
-                    {
-                        "error": "The Cycle has already been completed so it cannot be edited"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+                if "sort_order" in request_data:
+                    # Can only change sort order
+                    request_data = {
+                        "sort_order": request_data.get("sort_order", cycle.sort_order)
+                    }
+                else:
+                    return Response(
+                        {
+                            "error": "The Cycle has already been completed so it cannot be edited"
+                        },
+                        status=status.HTTP_400_BAD_REQUEST,
+                    )
 
             serializer = CycleWriteSerializer(cycle, data=request.data, partial=True)
             if serializer.is_valid():
@@ -374,7 +381,9 @@ class CycleViewSet(BaseViewSet):
                 .annotate(assignee_id=F("assignees__id"))
                 .annotate(avatar=F("assignees__avatar"))
                 .annotate(display_name=F("assignees__display_name"))
-                .values("first_name", "last_name", "assignee_id", "avatar", "display_name")
+                .values(
+                    "first_name", "last_name", "assignee_id", "avatar", "display_name"
+                )
                 .annotate(total_issues=Count("assignee_id"))
                 .annotate(
                     completed_issues=Count(
@@ -710,7 +719,6 @@ class CycleDateCheckEndpoint(BaseAPIView):
 
 
 class CycleFavoriteViewSet(BaseViewSet):
-
     serializer_class = CycleFavoriteSerializer
     model = CycleFavorite
 

apiserver/plane/api/views/issue.py

@@ -17,17 +17,19 @@ from django.db.models import (
     When,
     Exists,
     Max,
+    IntegerField,
 )
 from django.core.serializers.json import DjangoJSONEncoder
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
-from django.db.models.functions import Coalesce
+from django.db import IntegrityError
 from django.conf import settings
 
 # Third Party imports
 from rest_framework.response import Response
 from rest_framework import status
 from rest_framework.parsers import MultiPartParser, FormParser
+from rest_framework.permissions import AllowAny, IsAuthenticated
 from sentry_sdk import capture_exception
 
 # Module imports
@@ -49,6 +51,7 @@ from plane.api.serializers import (
     IssueReactionSerializer,
     CommentReactionSerializer,
     IssueVoteSerializer,
+    IssuePublicSerializer,
 )
 from plane.api.permissions import (
     WorkspaceEntityPermission,
@@ -73,10 +76,12 @@ from plane.db.models import (
     CommentReaction,
     ProjectDeployBoard,
     IssueVote,
+    ProjectPublicMember,
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.grouper import group_results
 from plane.utils.issue_filters import issue_filters
+from plane.bgtasks.export_task import issue_export_task
 
 
 class IssueViewSet(BaseViewSet):
@@ -333,7 +338,11 @@ class UserWorkSpaceIssues(BaseAPIView):
 
             issue_queryset = (
                 Issue.issue_objects.filter(
-                    (Q(assignees__in=[request.user]) | Q(created_by=request.user)),
+                    (
+                        Q(assignees__in=[request.user])
+                        | Q(created_by=request.user)
+                        | Q(issue_subscribers__subscriber=request.user)
+                    ),
                     workspace__slug=slug,
                 )
                 .annotate(
@@ -482,7 +491,7 @@ class IssueActivityEndpoint(BaseAPIView):
             issue_activities = (
                 IssueActivity.objects.filter(issue_id=issue_id)
                 .filter(
-                    ~Q(field="comment"),
+                    ~Q(field__in=["comment", "vote", "reaction"]),
                     project__project_projectmember__member=self.request.user,
                 )
                 .select_related("actor", "workspace", "issue", "project")
@@ -492,6 +501,12 @@ class IssueActivityEndpoint(BaseAPIView):
                 .filter(project__project_projectmember__member=self.request.user)
                 .order_by("created_at")
                 .select_related("actor", "issue", "project", "workspace")
+                .prefetch_related(
+                    Prefetch(
+                        "comment_reactions",
+                        queryset=CommentReaction.objects.select_related("actor"),
+                    )
+                )
             )
             issue_activities = IssueActivitySerializer(issue_activities, many=True).data
             issue_comments = IssueCommentSerializer(issue_comments, many=True).data
@@ -588,6 +603,15 @@ class IssueCommentViewSet(BaseViewSet):
             .select_related("project")
             .select_related("workspace")
             .select_related("issue")
+            .annotate(
+                is_member=Exists(
+                    ProjectMember.objects.filter(
+                        workspace__slug=self.kwargs.get("slug"),
+                        project_id=self.kwargs.get("project_id"),
+                        member_id=self.request.user.id,
+                    )
+                )
+            )
             .distinct()
         )
 
@@ -769,7 +793,9 @@ class SubIssuesEndpoint(BaseAPIView):
                 .order_by("state_group")
             )
 
-            result = {item["state_group"]: item["state_count"] for item in state_distribution}
+            result = {
+                item["state_group"]: item["state_count"] for item in state_distribution
+            }
 
             serializer = IssueLiteSerializer(
                 sub_issues,
@@ -1384,6 +1410,14 @@ class IssueReactionViewSet(BaseViewSet):
             project_id=self.kwargs.get("project_id"),
             actor=self.request.user,
         )
+        issue_activity.delay(
+            type="issue_reaction.activity.created",
+            requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+            actor_id=str(self.request.user.id),
+            issue_id=str(self.kwargs.get("issue_id", None)),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=None,
+        )
 
     def destroy(self, request, slug, project_id, issue_id, reaction_code):
         try:
@@ -1394,6 +1428,19 @@ class IssueReactionViewSet(BaseViewSet):
                 reaction=reaction_code,
                 actor=request.user,
             )
+            issue_activity.delay(
+                type="issue_reaction.activity.deleted",
+                requested_data=None,
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    {
+                        "reaction": str(reaction_code),
+                        "identifier": str(issue_reaction.id),
+                    }
+                ),
+            )
             issue_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except IssueReaction.DoesNotExist:
@@ -1434,6 +1481,14 @@ class CommentReactionViewSet(BaseViewSet):
             comment_id=self.kwargs.get("comment_id"),
             project_id=self.kwargs.get("project_id"),
         )
+        issue_activity.delay(
+            type="comment_reaction.activity.created",
+            requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+            actor_id=str(self.request.user.id),
+            issue_id=None,
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=None,
+        )
 
     def destroy(self, request, slug, project_id, comment_id, reaction_code):
         try:
@@ -1444,6 +1499,20 @@ class CommentReactionViewSet(BaseViewSet):
                 reaction=reaction_code,
                 actor=request.user,
             )
+            issue_activity.delay(
+                type="comment_reaction.activity.deleted",
+                requested_data=None,
+                actor_id=str(self.request.user.id),
+                issue_id=None,
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    {
+                        "reaction": str(reaction_code),
+                        "identifier": str(comment_reaction.id),
+                        "comment_id": str(comment_id),
+                    }
+                ),
+            )
             comment_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except CommentReaction.DoesNotExist:
@@ -1468,23 +1537,48 @@ class IssueCommentPublicViewSet(BaseViewSet):
         "workspace__id",
     ]
 
-    def get_queryset(self):
-        project_deploy_board = ProjectDeployBoard.objects.get(
-            workspace__slug=self.kwargs.get("slug"),
-            project_id=self.kwargs.get("project_id"),
-        )
-        if project_deploy_board.comments:
-            return self.filter_queryset(
-                super()
-                .get_queryset()
-                .filter(workspace__slug=self.kwargs.get("slug"))
-                .filter(issue_id=self.kwargs.get("issue_id"))
-                .select_related("project")
-                .select_related("workspace")
-                .select_related("issue")
-                .distinct()
-            )
+    def get_permissions(self):
+        if self.action in ["list", "retrieve"]:
+            self.permission_classes = [
+                AllowAny,
+            ]
         else:
+            self.permission_classes = [
+                IsAuthenticated,
+            ]
+
+        return super(IssueCommentPublicViewSet, self).get_permissions()
+
+    def get_queryset(self):
+        try:
+            project_deploy_board = ProjectDeployBoard.objects.get(
+                workspace__slug=self.kwargs.get("slug"),
+                project_id=self.kwargs.get("project_id"),
+            )
+            if project_deploy_board.comments:
+                return self.filter_queryset(
+                    super()
+                    .get_queryset()
+                    .filter(workspace__slug=self.kwargs.get("slug"))
+                    .filter(issue_id=self.kwargs.get("issue_id"))
+                    .filter(access="EXTERNAL")
+                    .select_related("project")
+                    .select_related("workspace")
+                    .select_related("issue")
+                    .annotate(
+                        is_member=Exists(
+                            ProjectMember.objects.filter(
+                                workspace__slug=self.kwargs.get("slug"),
+                                project_id=self.kwargs.get("project_id"),
+                                member_id=self.request.user.id,
+                            )
+                        )
+                    )
+                    .distinct()
+                )
+            else:
+                return IssueComment.objects.none()
+        except ProjectDeployBoard.DoesNotExist:
             return IssueComment.objects.none()
 
     def create(self, request, slug, project_id, issue_id):
@@ -1499,21 +1593,13 @@ class IssueCommentPublicViewSet(BaseViewSet):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            access = (
-                "INTERNAL"
-                if ProjectMember.objects.filter(
-                    project_id=project_id, member=request.user
-                ).exists()
-                else "EXTERNAL"
-            )
-
             serializer = IssueCommentSerializer(data=request.data)
             if serializer.is_valid():
                 serializer.save(
                     project_id=project_id,
                     issue_id=issue_id,
                     actor=request.user,
-                    access=access,
+                    access="EXTERNAL",
                 )
                 issue_activity.delay(
                     type="comment.activity.created",
@@ -1523,6 +1609,16 @@ class IssueCommentPublicViewSet(BaseViewSet):
                     project_id=str(project_id),
                     current_instance=None,
                 )
+                if not ProjectMember.objects.filter(
+                    project_id=project_id,
+                    member=request.user,
+                ).exists():
+                    # Add the user for workspace tracking
+                    _ = ProjectPublicMember.objects.get_or_create(
+                        project_id=project_id,
+                        member=request.user,
+                    )
+
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except Exception as e:
@@ -1567,7 +1663,8 @@ class IssueCommentPublicViewSet(BaseViewSet):
         except (IssueComment.DoesNotExist, ProjectDeployBoard.DoesNotExist):
             return Response(
                 {"error": "IssueComent Does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,)
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
     def destroy(self, request, slug, project_id, issue_id, pk):
         try:
@@ -1614,21 +1711,24 @@ class IssueReactionPublicViewSet(BaseViewSet):
     model = IssueReaction
 
     def get_queryset(self):
-        project_deploy_board = ProjectDeployBoard.objects.get(
-            workspace__slug=self.kwargs.get("slug"),
-            project_id=self.kwargs.get("project_id"),
-        )
-        if project_deploy_board.reactions:
-            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"))
-                .order_by("-created_at")
-                .distinct()
+        try:
+            project_deploy_board = ProjectDeployBoard.objects.get(
+                workspace__slug=self.kwargs.get("slug"),
+                project_id=self.kwargs.get("project_id"),
             )
-        else:
+            if project_deploy_board.reactions:
+                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"))
+                    .order_by("-created_at")
+                    .distinct()
+                )
+            else:
+                return IssueReaction.objects.none()
+        except ProjectDeployBoard.DoesNotExist:
             return IssueReaction.objects.none()
 
     def create(self, request, slug, project_id, issue_id):
@@ -1648,6 +1748,23 @@ class IssueReactionPublicViewSet(BaseViewSet):
                 serializer.save(
                     project_id=project_id, issue_id=issue_id, actor=request.user
                 )
+                if not ProjectMember.objects.filter(
+                    project_id=project_id,
+                    member=request.user,
+                ).exists():
+                    # Add the user for workspace tracking
+                    _ = ProjectPublicMember.objects.get_or_create(
+                        project_id=project_id,
+                        member=request.user,
+                    )
+                issue_activity.delay(
+                    type="issue_reaction.activity.created",
+                    requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                    actor_id=str(self.request.user.id),
+                    issue_id=str(self.kwargs.get("issue_id", None)),
+                    project_id=str(self.kwargs.get("project_id", None)),
+                    current_instance=None,
+                )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         except ProjectDeployBoard.DoesNotExist:
@@ -1679,6 +1796,19 @@ class IssueReactionPublicViewSet(BaseViewSet):
                 reaction=reaction_code,
                 actor=request.user,
             )
+            issue_activity.delay(
+                type="issue_reaction.activity.deleted",
+                requested_data=None,
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    {
+                        "reaction": str(reaction_code),
+                        "identifier": str(issue_reaction.id),
+                    }
+                ),
+            )
             issue_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except IssueReaction.DoesNotExist:
@@ -1699,21 +1829,24 @@ class CommentReactionPublicViewSet(BaseViewSet):
     model = CommentReaction
 
     def get_queryset(self):
-        project_deploy_board = ProjectDeployBoard.objects.get(
-            workspace__slug=self.kwargs.get("slug"),
-            project_id=self.kwargs.get("project_id"),
-        )
-        if project_deploy_board.reactions:
-            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"))
-                .order_by("-created_at")
-                .distinct()
+        try:
+            project_deploy_board = ProjectDeployBoard.objects.get(
+                workspace__slug=self.kwargs.get("slug"),
+                project_id=self.kwargs.get("project_id"),
             )
-        else:
+            if project_deploy_board.reactions:
+                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"))
+                    .order_by("-created_at")
+                    .distinct()
+                )
+            else:
+                return CommentReaction.objects.none()
+        except ProjectDeployBoard.DoesNotExist:
             return CommentReaction.objects.none()
 
     def create(self, request, slug, project_id, comment_id):
@@ -1733,8 +1866,29 @@ class CommentReactionPublicViewSet(BaseViewSet):
                 serializer.save(
                     project_id=project_id, comment_id=comment_id, actor=request.user
                 )
+                if not ProjectMember.objects.filter(
+                    project_id=project_id, member=request.user
+                ).exists():
+                    # Add the user for workspace tracking
+                    _ = ProjectPublicMember.objects.get_or_create(
+                        project_id=project_id,
+                        member=request.user,
+                    )
+                issue_activity.delay(
+                    type="comment_reaction.activity.created",
+                    requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                    actor_id=str(self.request.user.id),
+                    issue_id=None,
+                    project_id=str(self.kwargs.get("project_id", None)),
+                    current_instance=None,
+                )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except IssueComment.DoesNotExist:
+            return Response(
+                {"error": "Comment does not exist"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
         except ProjectDeployBoard.DoesNotExist:
             return Response(
                 {"error": "Project board does not exist"},
@@ -1765,6 +1919,20 @@ class CommentReactionPublicViewSet(BaseViewSet):
                 reaction=reaction_code,
                 actor=request.user,
             )
+            issue_activity.delay(
+                type="comment_reaction.activity.deleted",
+                requested_data=None,
+                actor_id=str(self.request.user.id),
+                issue_id=None,
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    {
+                        "reaction": str(reaction_code),
+                        "identifier": str(comment_reaction.id),
+                        "comment_id": str(comment_id),
+                    }
+                ),
+            )
             comment_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except CommentReaction.DoesNotExist:
@@ -1785,13 +1953,23 @@ class IssueVotePublicViewSet(BaseViewSet):
     serializer_class = IssueVoteSerializer
 
     def get_queryset(self):
-        return (
-            super()
-            .get_queryset()
-            .filter(issue_id=self.kwargs.get("issue_id"))
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(project_id=self.kwargs.get("project_id"))
-        )
+        try:
+            project_deploy_board = ProjectDeployBoard.objects.get(
+                workspace__slug=self.kwargs.get("slug"),
+                project_id=self.kwargs.get("project_id"),
+            )
+            if project_deploy_board.votes:
+                return (
+                    super()
+                    .get_queryset()
+                    .filter(issue_id=self.kwargs.get("issue_id"))
+                    .filter(workspace__slug=self.kwargs.get("slug"))
+                    .filter(project_id=self.kwargs.get("project_id"))
+                )
+            else:
+                return IssueVote.objects.none()
+        except ProjectDeployBoard.DoesNotExist:
+            return IssueVote.objects.none()
 
     def create(self, request, slug, project_id, issue_id):
         try:
@@ -1799,10 +1977,31 @@ class IssueVotePublicViewSet(BaseViewSet):
                 actor_id=request.user.id,
                 project_id=project_id,
                 issue_id=issue_id,
-                vote=request.data.get("vote", 1),
+            )
+            # Add the user for workspace tracking
+            if not ProjectMember.objects.filter(
+                project_id=project_id, member=request.user
+            ).exists():
+                _ = ProjectPublicMember.objects.get_or_create(
+                    project_id=project_id,
+                    member=request.user,
+                )
+            issue_vote.vote = request.data.get("vote", 1)
+            issue_vote.save()
+            issue_activity.delay(
+                type="issue_vote.activity.created",
+                requested_data=json.dumps(self.request.data, cls=DjangoJSONEncoder),
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=None,
             )
             serializer = IssueVoteSerializer(issue_vote)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
+        except IntegrityError:
+            return Response(
+                {"error": "Reaction already exists"}, status=status.HTTP_400_BAD_REQUEST
+            )
         except Exception as e:
             capture_exception(e)
             return Response(
@@ -1818,6 +2017,19 @@ class IssueVotePublicViewSet(BaseViewSet):
                 issue_id=issue_id,
                 actor_id=request.user.id,
             )
+            issue_activity.delay(
+                type="issue_vote.activity.deleted",
+                requested_data=None,
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("issue_id", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    {
+                        "vote": str(issue_vote.vote),
+                        "identifier": str(issue_vote.id),
+                    }
+                ),
+            )
             issue_vote.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except Exception as e:
@@ -1828,27 +2040,196 @@ class IssueVotePublicViewSet(BaseViewSet):
             )
 
 
-class ExportIssuesEndpoint(BaseAPIView):
+class IssueRetrievePublicEndpoint(BaseAPIView):
     permission_classes = [
-        WorkSpaceAdminPermission,
+        AllowAny,
     ]
 
-    def post(self, request, slug):
+    def get(self, request, slug, project_id, issue_id):
         try:
-
-            issue_export_task.delay(
-                email=request.user.email, data=request.data, slug=slug ,exporter_name=request.user.first_name
+            issue = Issue.objects.get(
+                workspace__slug=slug, project_id=project_id, pk=issue_id
             )
+            serializer = IssuePublicSerializer(issue)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        except Issue.DoesNotExist:
+            return Response(
+                {"error": "Issue Does not exist"}, status=status.HTTP_400_BAD_REQUEST
+            )
+        except Exception as e:
+            print(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
+class ProjectIssuesPublicEndpoint(BaseAPIView):
+    permission_classes = [
+        AllowAny,
+    ]
+
+    def get(self, request, slug, project_id):
+        try:
+            project_deploy_board = ProjectDeployBoard.objects.get(
+                workspace__slug=slug, project_id=project_id
+            )
+
+            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.annotate(
+                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                    .order_by()
+                    .annotate(count=Func(F("id"), function="Count"))
+                    .values("count")
+                )
+                .filter(project_id=project_id)
+                .filter(workspace__slug=slug)
+                .select_related("project", "workspace", "state", "parent")
+                .prefetch_related("assignees", "labels")
+                .prefetch_related(
+                    Prefetch(
+                        "issue_reactions",
+                        queryset=IssueReaction.objects.select_related("actor"),
+                    )
+                )
+                .filter(**filters)
+                .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()
+                    .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")
+                )
+            )
+
+            # 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 = IssuePublicSerializer(issue_queryset, many=True).data
+
+            state_group_order = [
+                "backlog",
+                "unstarted",
+                "started",
+                "completed",
+                "cancelled",
+            ]
+
+            states = (
+                State.objects.filter(
+                    workspace__slug=slug,
+                    project_id=project_id,
+                )
+                .annotate(
+                    custom_order=Case(
+                        *[
+                            When(group=value, then=Value(index))
+                            for index, value in enumerate(state_group_order)
+                        ],
+                        default=Value(len(state_group_order)),
+                        output_field=IntegerField(),
+                    ),
+                )
+                .values("name", "group", "color", "id")
+                .order_by("custom_order", "sequence")
+            )
+
+            labels = Label.objects.filter(
+                workspace__slug=slug, project_id=project_id
+            ).values("id", "name", "color", "parent")
+
+            ## Grouping the results
+            group_by = request.GET.get("group_by", False)
+            if group_by:
+                issues = group_results(issues, group_by)
 
             return Response(
                 {
-                    "message": f"Once the export is ready it will be emailed to you at {str(request.user.email)}"
+                    "issues": issues,
+                    "states": states,
+                    "labels": labels,
                 },
                 status=status.HTTP_200_OK,
             )
+        except ProjectDeployBoard.DoesNotExist:
+            return Response(
+                {"error": "Board does not exists"}, status=status.HTTP_404_NOT_FOUND
+            )
         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/notification.py

@@ -10,7 +10,13 @@ from plane.utils.paginator import BasePaginator
 
 # Module imports
 from .base import BaseViewSet, BaseAPIView
-from plane.db.models import Notification, IssueAssignee, IssueSubscriber, Issue, WorkspaceMember
+from plane.db.models import (
+    Notification,
+    IssueAssignee,
+    IssueSubscriber,
+    Issue,
+    WorkspaceMember,
+)
 from plane.api.serializers import NotificationSerializer
 
 
@@ -83,13 +89,17 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
 
             # Created issues
             if type == "created":
-                if WorkspaceMember.objects.filter(workspace__slug=slug, member=request.user, role__lt=15).exists():
+                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)
+                    notifications = notifications.filter(
+                        entity_identifier__in=issue_ids
+                    )
 
             # Pagination
             if request.GET.get("per_page", False) and request.GET.get("cursor", False):
@@ -274,3 +284,80 @@ class UnreadNotificationEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+
+class MarkAllReadNotificationViewSet(BaseViewSet):
+    def create(self, request, slug):
+        try:
+            snoozed = request.data.get("snoozed", False)
+            archived = request.data.get("archived", False)
+            type = request.data.get("type", "all")
+
+            notifications = (
+                Notification.objects.filter(
+                    workspace__slug=slug,
+                    receiver_id=request.user.id,
+                    read_at__isnull=True,
+                )
+                .select_related("workspace", "project", "triggered_by", "receiver")
+                .order_by("snoozed_till", "-created_at")
+            )
+
+            # Filter for snoozed notifications
+            if snoozed:
+                notifications = notifications.filter(
+                    Q(snoozed_till__lt=timezone.now()) | Q(snoozed_till__isnull=False)
+                )
+            else:
+                notifications = notifications.filter(
+                    Q(snoozed_till__gte=timezone.now()) | Q(snoozed_till__isnull=True),
+                )
+
+            # Filter for archived or unarchive
+            if archived:
+                notifications = notifications.filter(archived_at__isnull=False)
+            else:
+                notifications = notifications.filter(archived_at__isnull=True)
+
+            # Subscribed issues
+            if type == "watching":
+                issue_ids = IssueSubscriber.objects.filter(
+                    workspace__slug=slug, subscriber_id=request.user.id
+                ).values_list("issue_id", flat=True)
+                notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+            # Assigned Issues
+            if type == "assigned":
+                issue_ids = IssueAssignee.objects.filter(
+                    workspace__slug=slug, assignee_id=request.user.id
+                ).values_list("issue_id", flat=True)
+                notifications = notifications.filter(entity_identifier__in=issue_ids)
+
+            # Created issues
+            if type == "created":
+                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
+                    )
+
+            updated_notifications = []
+            for notification in notifications:
+                notification.read_at = timezone.now()
+                updated_notifications.append(notification)
+            Notification.objects.bulk_update(
+                updated_notifications, ["read_at"], batch_size=100
+            )
+            return Response({"message": "Successful"}, 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/project.py

@@ -11,14 +11,8 @@ from django.db.models import (
     OuterRef,
     Func,
     F,
-    Max,
-    CharField,
     Func,
     Subquery,
-    Prefetch,
-    When,
-    Case,
-    Value,
 )
 from django.core.validators import validate_email
 from django.conf import settings
@@ -47,6 +41,7 @@ from plane.api.permissions import (
     ProjectBasePermission,
     ProjectEntityPermission,
     ProjectMemberPermission,
+    ProjectLitePermission,
 )
 
 from plane.db.models import (
@@ -71,16 +66,9 @@ from plane.db.models import (
     ModuleMember,
     Inbox,
     ProjectDeployBoard,
-    Issue,
-    IssueReaction,
-    IssueLink,
-    IssueAttachment,
-    Label,
 )
 
 from plane.bgtasks.project_invitation_task import project_invitation
-from plane.utils.grouper import group_results
-from plane.utils.issue_filters import issue_filters
 
 
 class ProjectViewSet(BaseViewSet):
@@ -287,7 +275,10 @@ class ProjectViewSet(BaseViewSet):
                 )
 
                 data = serializer.data
+                # Additional fields of the member
                 data["sort_order"] = project_member.sort_order
+                data["member_role"] = project_member.role
+                data["is_member"] = True
                 return Response(data, status=status.HTTP_201_CREATED)
             return Response(
                 serializer.errors,
@@ -626,7 +617,7 @@ class ProjectMemberViewSet(BaseViewSet):
             return Response(status=status.HTTP_204_NO_CONTENT)
         except ProjectMember.DoesNotExist:
             return Response(
-                {"error": "Project Member does not exist"}, status=status.HTTP_400
+                {"error": "Project Member does not exist"}, status=status.HTTP_400_BAD_REQUEST
             )
         except Exception as e:
             capture_exception(e)
@@ -1140,145 +1131,78 @@ class ProjectDeployBoardPublicSettingsEndpoint(BaseAPIView):
             )
 
 
-class ProjectDeployBoardIssuesPublicEndpoint(BaseAPIView):
+class WorkspaceProjectDeployBoardEndpoint(BaseAPIView):
     permission_classes = [
         AllowAny,
     ]
 
-    def get(self, request, slug, project_id):
+    def get(self, request, slug):
         try:
-            project_deploy_board = ProjectDeployBoard.objects.get(
-                workspace__slug=slug, project_id=project_id
-            )
-
-            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.annotate(
-                    sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
-                )
-                .filter(project_id=project_id)
-                .filter(workspace__slug=slug)
-                .select_related("project", "workspace", "state", "parent")
-                .prefetch_related("assignees", "labels")
-                .prefetch_related(
-                    Prefetch(
-                        "issue_reactions",
-                        queryset=IssueReaction.objects.select_related("actor"),
-                    )
-                )
-                .filter(**filters)
-                .annotate(cycle_id=F("issue_cycle__cycle_id"))
-                .annotate(module_id=F("issue_module__module_id"))
+            projects = (
+                Project.objects.filter(workspace__slug=slug)
                 .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")
+                    is_public=Exists(
+                        ProjectDeployBoard.objects.filter(
+                            workspace__slug=slug, project_id=OuterRef("pk")
+                        )
                     )
-                    .order_by()
-                    .annotate(count=Func(F("id"), function="Count"))
-                    .values("count")
                 )
+                .filter(is_public=True)
+            ).values(
+                "id",
+                "identifier",
+                "name",
+                "description",
+                "emoji",
+                "icon_prop",
+                "cover_image",
             )
 
-            # 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
-
-            states = State.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).values("name", "group", "color", "id")
-
-            labels = Label.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).values("id", "name", "color", "parent")
-
-            ## Grouping the results
-            group_by = request.GET.get("group_by", False)
-            if group_by:
-                issues = group_results(issues, group_by)
-
+            return Response(projects, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
             return Response(
-                {
-                    "issues": issues,
-                    "states": states,
-                    "labels": labels,
-                },
-                status=status.HTTP_200_OK,
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
-        except ProjectDeployBoard.DoesNotExist:
+
+
+class LeaveProjectEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectLitePermission,
+    ]
+
+    def delete(self, request, slug, project_id):
+        try:
+            project_member = ProjectMember.objects.get(
+                workspace__slug=slug,
+                member=request.user,
+                project_id=project_id,
+            )
+
+            # Only Admin case
+            if (
+                project_member.role == 20
+                and ProjectMember.objects.filter(
+                    workspace__slug=slug,
+                    role=20,
+                    project_id=project_id,
+                ).count()
+                == 1
+            ):
+                return Response(
+                    {
+                        "error": "You cannot leave the project since you are the only admin of the project you should delete the project"
+                    },
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+            # Delete the member from workspace
+            project_member.delete()
+            return Response(status=status.HTTP_204_NO_CONTENT)
+        except ProjectMember.DoesNotExist:
             return Response(
-                {"error": "Board does not exists"}, status=status.HTTP_404_NOT_FOUND
+                {"error": "Workspace member does not exists"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
         except Exception as e:
             capture_exception(e)

apiserver/plane/api/views/user.py

@@ -137,11 +137,11 @@ class UpdateUserTourCompletedEndpoint(BaseAPIView):
 
 
 class UserActivityEndpoint(BaseAPIView, BasePaginator):
-    def get(self, request):
+    def get(self, request, slug):
         try:
-            queryset = IssueActivity.objects.filter(actor=request.user).select_related(
-                "actor", "workspace", "issue", "project"
-            )
+            queryset = IssueActivity.objects.filter(
+                actor=request.user, workspace__slug=slug
+            ).select_related("actor", "workspace", "issue", "project")
 
             return self.paginate(
                 request=request,

apiserver/plane/api/views/workspace.py

@@ -1100,7 +1100,6 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
             created_issues = (
                 Issue.issue_objects.filter(
                     workspace__slug=slug,
-                    assignees__in=[user_id],
                     project__project_projectmember__member=request.user,
                     created_by_id=user_id,
                 )
@@ -1198,6 +1197,7 @@ class WorkspaceUserActivityEndpoint(BaseAPIView):
             projects = request.query_params.getlist("project", [])
 
             queryset = IssueActivity.objects.filter(
+                ~Q(field__in=["comment", "vote", "reaction"]),
                 workspace__slug=slug,
                 project__project_projectmember__member=request.user,
                 actor=user_id,
@@ -1473,3 +1473,44 @@ class WorkspaceMembersEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+
+class LeaveWorkspaceEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    def delete(self, request, slug):
+        try:
+            workspace_member = WorkspaceMember.objects.get(
+                workspace__slug=slug, member=request.user
+            )
+
+            # Only Admin case
+            if (
+                workspace_member.role == 20
+                and WorkspaceMember.objects.filter(
+                    workspace__slug=slug, role=20
+                ).count()
+                == 1
+            ):
+                return Response(
+                    {
+                        "error": "You cannot leave the workspace since you are the only admin of the workspace you should delete the workspace"
+                    },
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+            # Delete the member from workspace
+            workspace_member.delete()
+            return Response(status=status.HTTP_204_NO_CONTENT)
+        except WorkspaceMember.DoesNotExist:
+            return Response(
+                {"error": "Workspace member does not exists"},
+                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/bgtasks/export_task.py

@@ -4,6 +4,7 @@ import io
 import json
 import boto3
 import zipfile
+from urllib.parse import urlparse, urlunparse
 
 # Django imports
 from django.conf import settings
@@ -23,9 +24,11 @@ def dateTimeConverter(time):
     if time:
         return time.strftime("%a, %d %b %Y %I:%M:%S %Z%z")
 
+
 def dateConverter(time):
     if time:
-        return time.strftime("%a, %d %b %Y")    
+        return time.strftime("%a, %d %b %Y")
+
 
 def create_csv_file(data):
     csv_buffer = io.StringIO()
@@ -66,28 +69,53 @@ def create_zip_file(files):
 
 
 def upload_to_s3(zip_file, workspace_id, token_id, slug):
-    s3 = boto3.client(
-        "s3",
-        region_name=settings.AWS_REGION,
-        aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
-        aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
-        config=Config(signature_version="s3v4"),
-    )
     file_name = f"{workspace_id}/export-{slug}-{token_id[:6]}-{timezone.now()}.zip"
-
-    s3.upload_fileobj(
-        zip_file,
-        settings.AWS_S3_BUCKET_NAME,
-        file_name,
-        ExtraArgs={"ACL": "public-read", "ContentType": "application/zip"},
-    )
-
     expires_in = 7 * 24 * 60 * 60
-    presigned_url = s3.generate_presigned_url(
-        "get_object",
-        Params={"Bucket": settings.AWS_S3_BUCKET_NAME, "Key": file_name},
-        ExpiresIn=expires_in,
-    )
+
+    if settings.DOCKERIZED and settings.USE_MINIO:
+        s3 = boto3.client(
+            "s3",
+            endpoint_url=settings.AWS_S3_ENDPOINT_URL,
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+            config=Config(signature_version="s3v4"),
+        )
+        s3.upload_fileobj(
+            zip_file,
+            settings.AWS_STORAGE_BUCKET_NAME,
+            file_name,
+            ExtraArgs={"ACL": "public-read", "ContentType": "application/zip"},
+        )
+        presigned_url = s3.generate_presigned_url(
+            "get_object",
+            Params={"Bucket": settings.AWS_STORAGE_BUCKET_NAME, "Key": file_name},
+            ExpiresIn=expires_in,
+        )
+        # Create the new url with updated domain and protocol
+        presigned_url = presigned_url.replace(
+            "http://plane-minio:9000/uploads/",
+            f"{settings.AWS_S3_URL_PROTOCOL}//{settings.AWS_S3_CUSTOM_DOMAIN}/",
+        )
+    else:
+        s3 = boto3.client(
+            "s3",
+            region_name=settings.AWS_REGION,
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+            config=Config(signature_version="s3v4"),
+        )
+        s3.upload_fileobj(
+            zip_file,
+            settings.AWS_S3_BUCKET_NAME,
+            file_name,
+            ExtraArgs={"ACL": "public-read", "ContentType": "application/zip"},
+        )
+
+        presigned_url = s3.generate_presigned_url(
+            "get_object",
+            Params={"Bucket": settings.AWS_S3_BUCKET_NAME, "Key": file_name},
+            ExpiresIn=expires_in,
+        )
 
     exporter_instance = ExporterHistory.objects.get(token=token_id)
 
@@ -98,7 +126,7 @@ def upload_to_s3(zip_file, workspace_id, token_id, slug):
     else:
         exporter_instance.status = "failed"
 
-    exporter_instance.save(update_fields=["status", "url","key"])
+    exporter_instance.save(update_fields=["status", "url", "key"])
 
 
 def generate_table_row(issue):
@@ -145,7 +173,7 @@ def generate_json_row(issue):
         else "",
         "Labels": issue["labels__name"],
         "Cycle Name": issue["issue_cycle__cycle__name"],
-        "Cycle Start Date":  dateConverter(issue["issue_cycle__cycle__start_date"]),
+        "Cycle Start Date": dateConverter(issue["issue_cycle__cycle__start_date"]),
         "Cycle End Date": dateConverter(issue["issue_cycle__cycle__end_date"]),
         "Module Name": issue["issue_module__module__name"],
         "Module Start Date": dateConverter(issue["issue_module__module__start_date"]),
@@ -242,7 +270,9 @@ def issue_export_task(provider, workspace_id, project_ids, token_id, multiple, s
         workspace_issues = (
             (
                 Issue.objects.filter(
-                    workspace__id=workspace_id, project_id__in=project_ids
+                    workspace__id=workspace_id,
+                    project_id__in=project_ids,
+                    project__project_projectmember__member=exporter_instance.initiated_by_id,
                 )
                 .select_related("project", "workspace", "state", "parent", "created_by")
                 .prefetch_related(
@@ -275,7 +305,7 @@ def issue_export_task(provider, workspace_id, project_ids, token_id, multiple, s
                     "labels__name",
                 )
             )
-            .order_by("project__identifier","sequence_id")
+            .order_by("project__identifier", "sequence_id")
             .distinct()
         )
         # CSV header
@@ -338,7 +368,6 @@ def issue_export_task(provider, workspace_id, project_ids, token_id, multiple, s
         exporter_instance.status = "failed"
         exporter_instance.reason = str(e)
         exporter_instance.save(update_fields=["status", "reason"])
-
         # Print logs if in DEBUG mode
         if settings.DEBUG:
             print(e)

apiserver/plane/bgtasks/exporter_expired_task.py

@@ -21,18 +21,29 @@ def delete_old_s3_link():
     expired_exporter_history = ExporterHistory.objects.filter(
         Q(url__isnull=False) & Q(created_at__lte=timezone.now() - timedelta(days=8))
     ).values_list("key", "id")
-
-    s3 = boto3.client(
-        "s3",
-        region_name="ap-south-1",
-        aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
-        aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
-        config=Config(signature_version="s3v4"),
-    )
+    if settings.DOCKERIZED and settings.USE_MINIO:
+        s3 = boto3.client(
+            "s3",
+            endpoint_url=settings.AWS_S3_ENDPOINT_URL,
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+            config=Config(signature_version="s3v4"),
+        )
+    else:
+        s3 = boto3.client(
+            "s3",
+            region_name="ap-south-1",
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+            config=Config(signature_version="s3v4"),
+        )
 
     for file_name, exporter_id in expired_exporter_history:
         # Delete object from S3
         if file_name:
-            s3.delete_object(Bucket=settings.AWS_S3_BUCKET_NAME, Key=file_name)
+            if settings.DOCKERIZED and settings.USE_MINIO:
+                s3.delete_object(Bucket=settings.AWS_STORAGE_BUCKET_NAME, Key=file_name)
+            else:
+                s3.delete_object(Bucket=settings.AWS_S3_BUCKET_NAME, Key=file_name)
 
         ExporterHistory.objects.filter(id=exporter_id).update(url=None)

apiserver/plane/bgtasks/issue_activites_task.py

@@ -24,6 +24,9 @@ from plane.db.models import (
     IssueSubscriber,
     Notification,
     IssueAssignee,
+    IssueReaction,
+    CommentReaction,
+    IssueComment,
 )
 from plane.api.serializers import IssueActivitySerializer
 
@@ -629,7 +632,7 @@ def update_issue_activity(
         "parent": track_parent,
         "priority": track_priority,
         "state": track_state,
-        "description": track_description,
+        "description_html": track_description,
         "target_date": track_target_date,
         "start_date": track_start_date,
         "labels_list": track_labels,
@@ -1022,6 +1025,150 @@ def delete_attachment_activity(
         )
     )
 
+def create_issue_reaction_activity(
+    requested_data, current_instance, issue_id, project, actor, issue_activities
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    if requested_data and requested_data.get("reaction") is not None:
+        issue_reaction = IssueReaction.objects.filter(reaction=requested_data.get("reaction"), project=project, actor=actor).values_list('id', flat=True).first()
+        if issue_reaction is not None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="created",
+                    old_value=None,
+                    new_value=requested_data.get("reaction"),
+                    field="reaction",
+                    project=project,
+                    workspace=project.workspace,
+                    comment="added the reaction",
+                    old_identifier=None,
+                    new_identifier=issue_reaction,
+                )
+            )
+
+
+def delete_issue_reaction_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
+    )
+    if current_instance and current_instance.get("reaction") is not None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="deleted",
+                old_value=current_instance.get("reaction"),
+                new_value=None,
+                field="reaction",
+                project=project,
+                workspace=project.workspace,
+                comment="removed the reaction",
+                old_identifier=current_instance.get("identifier"),
+                new_identifier=None,
+            )
+        )
+
+
+def create_comment_reaction_activity(
+    requested_data, current_instance, issue_id, project, actor, issue_activities
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    if requested_data and requested_data.get("reaction") is not None:
+        comment_reaction_id, comment_id = CommentReaction.objects.filter(reaction=requested_data.get("reaction"), project=project, actor=actor).values_list('id', 'comment__id').first()
+        comment = IssueComment.objects.get(pk=comment_id,project=project)
+        if comment is not None and comment_reaction_id is not None and comment_id is not None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=comment.issue_id,
+                    actor=actor,
+                    verb="created",
+                    old_value=None,
+                    new_value=requested_data.get("reaction"),
+                    field="reaction",
+                    project=project,
+                    workspace=project.workspace,
+                    comment="added the reaction",
+                    old_identifier=None,
+                    new_identifier=comment_reaction_id,
+                )
+            )
+
+
+def delete_comment_reaction_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
+    )
+    if current_instance and current_instance.get("reaction") is not None:
+        issue_id = IssueComment.objects.filter(pk=current_instance.get("comment_id"), project=project).values_list('issue_id', flat=True).first()
+        if issue_id is not None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="deleted",
+                    old_value=current_instance.get("reaction"),
+                    new_value=None,
+                    field="reaction",
+                    project=project,
+                    workspace=project.workspace,
+                    comment="removed the reaction",
+                    old_identifier=current_instance.get("identifier"),
+                    new_identifier=None,
+                )
+            )
+
+
+def create_issue_vote_activity(
+    requested_data, current_instance, issue_id, project, actor, issue_activities
+):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
+    if requested_data and requested_data.get("vote") is not None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="created",
+                old_value=None,
+                new_value=requested_data.get("vote"),
+                field="vote",
+                project=project,
+                workspace=project.workspace,
+                comment="added the vote",
+                old_identifier=None,
+                new_identifier=None,
+            )
+        )
+
+
+def delete_issue_vote_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
+    )
+    if current_instance and current_instance.get("vote") is not None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="deleted",
+                old_value=current_instance.get("vote"),
+                new_value=None,
+                field="vote",
+                project=project,
+                workspace=project.workspace,
+                comment="removed the vote",
+                old_identifier=current_instance.get("identifier"),
+                new_identifier=None,
+            )
+        )
+
 
 # Receive message from room group
 @shared_task
@@ -1045,6 +1192,12 @@ def issue_activity(
             "cycle.activity.deleted",
             "module.activity.created",
             "module.activity.deleted",
+            "issue_reaction.activity.created",
+            "issue_reaction.activity.deleted",
+            "comment_reaction.activity.created",
+            "comment_reaction.activity.deleted",
+            "issue_vote.activity.created",
+            "issue_vote.activity.deleted",
         ]:
             issue = Issue.objects.filter(pk=issue_id).first()
 
@@ -1080,6 +1233,12 @@ def issue_activity(
             "link.activity.deleted": delete_link_activity,
             "attachment.activity.created": create_attachment_activity,
             "attachment.activity.deleted": delete_attachment_activity,
+            "issue_reaction.activity.created": create_issue_reaction_activity,
+            "issue_reaction.activity.deleted": delete_issue_reaction_activity,
+            "comment_reaction.activity.created": create_comment_reaction_activity,
+            "comment_reaction.activity.deleted": delete_comment_reaction_activity,
+            "issue_vote.activity.created": create_issue_vote_activity,
+            "issue_vote.activity.deleted": delete_issue_vote_activity,
         }
 
         func = ACTIVITY_MAPPER.get(type)
@@ -1119,6 +1278,12 @@ def issue_activity(
             "cycle.activity.deleted",
             "module.activity.created",
             "module.activity.deleted",
+            "issue_reaction.activity.created",
+            "issue_reaction.activity.deleted",
+            "comment_reaction.activity.created",
+            "comment_reaction.activity.deleted",
+            "issue_vote.activity.created",
+            "issue_vote.activity.deleted",
         ]:
             # Create Notifications
             bulk_notifications = []

apiserver/plane/bgtasks/issue_automation_task.py

@@ -64,7 +64,7 @@ def archive_old_issues():
                     issues_to_update.append(issue)
 
                 # Bulk Update the issues and log the activity
-                Issue.objects.bulk_update(
+                updated_issues = Issue.objects.bulk_update(
                     issues_to_update, ["archived_at"], batch_size=100
                 )
                 [
@@ -77,7 +77,7 @@ def archive_old_issues():
                         current_instance=None,
                         subscriber=False,
                     )
-                    for issue in issues_to_update
+                    for issue in updated_issues
                 ]
         return
     except Exception as e:
@@ -136,7 +136,7 @@ def close_old_issues():
                     issues_to_update.append(issue)
 
                 # Bulk Update the issues and log the activity
-                Issue.objects.bulk_update(issues_to_update, ["state"], batch_size=100)
+                updated_issues = Issue.objects.bulk_update(issues_to_update, ["state"], batch_size=100)
                 [
                     issue_activity.delay(
                         type="issue.activity.updated",
@@ -147,7 +147,7 @@ def close_old_issues():
                         current_instance=None,
                         subscriber=False,
                     )
-                    for issue in issues_to_update
+                    for issue in updated_issues
                 ]
         return
     except Exception as e:

apiserver/plane/db/models/__init__.py

@@ -19,6 +19,7 @@ from .project import (
     ProjectIdentifier,
     ProjectFavorite,
     ProjectDeployBoard,
+    ProjectPublicMember,
 )
 
 from .issue import (

apiserver/plane/db/models/issue.py

@@ -293,7 +293,7 @@ class IssueComment(ProjectBaseModel):
     comment_json = models.JSONField(blank=True, default=dict)
     comment_html = models.TextField(blank=True, default="<p></p>")
     attachments = ArrayField(models.URLField(), size=10, blank=True, default=list)
-    issue = models.ForeignKey(Issue, on_delete=models.CASCADE)
+    issue = models.ForeignKey(Issue, on_delete=models.CASCADE, related_name="issue_comments")
     # System can also create comment
     actor = models.ForeignKey(
         settings.AUTH_USER_MODEL,
@@ -476,10 +476,12 @@ class IssueVote(ProjectBaseModel):
         choices=(
             (-1, "DOWNVOTE"),
             (1, "UPVOTE"),
-        )
+        ),
+        default=1,
     )
+
     class Meta:
-        unique_together = ["issue", "actor"]
+        unique_together = ["issue", "actor",]
         verbose_name = "Issue Vote"
         verbose_name_plural = "Issue Votes"
         db_table = "issue_votes"

apiserver/plane/db/models/project.py

@@ -254,3 +254,18 @@ class ProjectDeployBoard(ProjectBaseModel):
     def __str__(self):
         """Return project and anchor"""
         return f"{self.anchor} <{self.project.name}>"
+
+
+class ProjectPublicMember(ProjectBaseModel):
+    member = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="public_project_members",
+    )
+
+    class Meta:
+        unique_together = ["project", "member"]
+        verbose_name = "Project Public Member"
+        verbose_name_plural = "Project Public Members"
+        db_table = "project_public_members"
+        ordering = ("-created_at",)

apiserver/plane/db/models/user.py

@@ -2,6 +2,7 @@
 import uuid
 import string
 import random
+import pytz
 
 # Django imports
 from django.db import models
@@ -9,9 +10,6 @@ from django.db.models.signals import post_save
 from django.dispatch import receiver
 from django.contrib.auth.models import AbstractBaseUser, UserManager, PermissionsMixin
 from django.utils import timezone
-from django.core.mail import EmailMultiAlternatives
-from django.template.loader import render_to_string
-from django.utils.html import strip_tags
 from django.conf import settings
 
 # Third party imports
@@ -66,7 +64,8 @@ class User(AbstractBaseUser, PermissionsMixin):
     billing_address = models.JSONField(null=True)
     has_billing_address = models.BooleanField(default=False)
 
-    user_timezone = models.CharField(max_length=255, default="Asia/Kolkata")
+    USER_TIMEZONE_CHOICES = tuple(zip(pytz.all_timezones, pytz.all_timezones))
+    user_timezone = models.CharField(max_length=255, default="UTC", choices=USER_TIMEZONE_CHOICES)
 
     last_active = models.DateTimeField(default=timezone.now, null=True)
     last_login_time = models.DateTimeField(null=True)

apiserver/plane/settings/common.py

@@ -49,7 +49,7 @@ MIDDLEWARE = [
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
     "crum.CurrentRequestUserMiddleware",
     "django.middleware.gzip.GZipMiddleware",
-]
+ ]
 
 REST_FRAMEWORK = {
     "DEFAULT_AUTHENTICATION_CLASSES": (
@@ -161,7 +161,7 @@ MEDIA_URL = "/media/"
 
 LANGUAGE_CODE = "en-us"
 
-TIME_ZONE = "Asia/Kolkata"
+TIME_ZONE = "UTC"
 
 USE_I18N = True
 

apiserver/runtime.txt

@@ -1 +1 @@
-python-3.11.4
+python-3.11.5

app.json

@@ -0,0 +1,85 @@
+{
+  "name": "Plane",
+  "description": "Plane helps you track your issues, epics, and product roadmaps.",
+  "repository": "http://github.com/makeplane/plane",
+  "logo": "https://avatars.githubusercontent.com/u/115727700?s=200&v=4",
+  "website": "https://plane.so/",
+  "success_url": "/",
+  "stack": "heroku-22",
+  "keywords": [
+    "plane",
+    "project management",
+    "django",
+    "next"
+  ],
+  "addons": [
+    "heroku-postgresql:mini",
+    "heroku-redis:mini"
+  ],
+  "buildpacks": [
+    {
+      "url": "https://github.com/heroku/heroku-buildpack-python.git"
+    },
+    {
+      "url": "https://github.com/heroku/heroku-buildpack-nodejs#v176"
+    }
+  ],
+  "env": {
+    "EMAIL_HOST": {
+      "description": "Email host to send emails from",
+      "value": ""
+    },
+    "EMAIL_HOST_USER": {
+      "description": "Email host to send emails from",
+      "value": ""
+    },
+    "EMAIL_HOST_PASSWORD": {
+      "description": "Email host to send emails from",
+      "value": ""
+    },
+    "EMAIL_FROM": {
+      "description": "Email Sender",
+      "value": ""
+    },
+    "EMAIL_PORT": {
+      "description": "The default Email PORT to use",
+      "value": "587"
+    },
+    "AWS_REGION": {
+      "description": "AWS Region to use for S3",
+      "value": "false"
+    },
+    "AWS_ACCESS_KEY_ID": {
+      "description": "AWS Access Key ID to use for S3",
+      "value": ""
+    },
+    "AWS_SECRET_ACCESS_KEY": {
+      "description": "AWS Secret Access Key to use for S3",
+      "value": ""
+    },
+    "AWS_S3_BUCKET_NAME": {
+      "description": "AWS Bucket Name to use for S3",
+      "value": ""
+    },
+    "SENTRY_DSN": {
+      "description": "",
+      "value": ""
+    },
+    "WEB_URL": {
+      "description": "Web URL for Plane this will be used for redirections in the emails",
+      "value": ""
+    },
+    "GITHUB_CLIENT_SECRET": {
+      "description": "Github Client Secret",
+      "value": ""
+    },
+    "NEXT_PUBLIC_API_BASE_URL": {
+      "description": "Next Public API Base URL",
+      "value": ""
+    },
+    "SECRET_KEY": {
+      "description": "Django Secret Key",
+      "value": ""
+    }
+  }
+}

deploy/heroku/Dockerfile

@@ -0,0 +1,4 @@
+# Deploy the Plane image
+FROM makeplane/plane
+
+LABEL maintainer="engineering@plane.so"

docker-compose-hub.yml

@@ -38,7 +38,7 @@ services:
                 container_name: planefrontend
                 image: makeplane/plane-frontend:latest
                 restart: always
-                command: /usr/local/bin/start.sh apps/app/server.js app
+                command: /usr/local/bin/start.sh web/server.js web
                 env_file:
                         - .env
                 environment:
@@ -56,6 +56,20 @@ services:
                         - plane-api
                         - plane-worker
 
+        plane-deploy:
+                container_name: planedeploy
+                image: makeplane/plane-deploy:latest
+                restart: always
+                command: /usr/local/bin/start.sh space/server.js space
+                env_file:
+                        - .env
+                environment:
+                        NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
+                depends_on:
+                        - plane-api
+                        - plane-worker
+                        - plane-web
+
         plane-api:
                 container_name: planebackend
                 image: makeplane/plane-backend:latest

docker-compose.yml

@@ -1,176 +1,204 @@
 version: "3.8"
 
-x-api-and-worker-env:
-        &api-and-worker-env
-        DEBUG: ${DEBUG}
-        SENTRY_DSN: ${SENTRY_DSN}
-        DJANGO_SETTINGS_MODULE: plane.settings.production
-        DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
-        REDIS_URL: redis://plane-redis:6379/
-        EMAIL_HOST: ${EMAIL_HOST}
-        EMAIL_HOST_USER: ${EMAIL_HOST_USER}
-        EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
-        EMAIL_PORT: ${EMAIL_PORT}
-        EMAIL_FROM: ${EMAIL_FROM}
-        EMAIL_USE_TLS: ${EMAIL_USE_TLS}
-        EMAIL_USE_SSL: ${EMAIL_USE_SSL}
-        AWS_REGION: ${AWS_REGION}
-        AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
-        AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
-        AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-        AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
-        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
-        WEB_URL: ${WEB_URL}
-        GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
-        DISABLE_COLLECTSTATIC: 1
-        DOCKERIZED: 1
-        OPENAI_API_BASE: ${OPENAI_API_BASE}
-        OPENAI_API_KEY: ${OPENAI_API_KEY}
-        GPT_ENGINE: ${GPT_ENGINE}
-        SECRET_KEY: ${SECRET_KEY}
-        DEFAULT_EMAIL: ${DEFAULT_EMAIL}
-        DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
-        USE_MINIO: ${USE_MINIO}
-        ENABLE_SIGNUP: ${ENABLE_SIGNUP}
+x-api-and-worker-env: &api-and-worker-env
+  DEBUG: ${DEBUG}
+  SENTRY_DSN: ${SENTRY_DSN}
+  DJANGO_SETTINGS_MODULE: plane.settings.production
+  DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
+  REDIS_URL: redis://plane-redis:6379/
+  EMAIL_HOST: ${EMAIL_HOST}
+  EMAIL_HOST_USER: ${EMAIL_HOST_USER}
+  EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
+  EMAIL_PORT: ${EMAIL_PORT}
+  EMAIL_FROM: ${EMAIL_FROM}
+  EMAIL_USE_TLS: ${EMAIL_USE_TLS}
+  EMAIL_USE_SSL: ${EMAIL_USE_SSL}
+  AWS_REGION: ${AWS_REGION}
+  AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
+  AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
+  AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
+  AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
+  FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
+  WEB_URL: ${WEB_URL}
+  GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
+  DISABLE_COLLECTSTATIC: 1
+  DOCKERIZED: 1
+  OPENAI_API_BASE: ${OPENAI_API_BASE}
+  OPENAI_API_KEY: ${OPENAI_API_KEY}
+  GPT_ENGINE: ${GPT_ENGINE}
+  SECRET_KEY: ${SECRET_KEY}
+  DEFAULT_EMAIL: ${DEFAULT_EMAIL}
+  DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
+  USE_MINIO: ${USE_MINIO}
+  ENABLE_SIGNUP: ${ENABLE_SIGNUP}
 
 services:
-        plane-web:
-                container_name: planefrontend
-                build:
-                        context: .
-                        dockerfile: ./apps/app/Dockerfile.web
-                        args:
-                                NEXT_PUBLIC_API_BASE_URL: http://localhost:8000
-                                NEXT_PUBLIC_DEPLOY_URL: http://localhost/spaces
-                restart: always
-                command: /usr/local/bin/start.sh apps/app/server.js app
-                env_file:
-                        - .env
-                environment:
-                        NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
-                        NEXT_PUBLIC_DEPLOY_URL: ${NEXT_PUBLIC_DEPLOY_URL}
-                        NEXT_PUBLIC_GOOGLE_CLIENTID: "0"
-                        NEXT_PUBLIC_GITHUB_APP_NAME: "0"
-                        NEXT_PUBLIC_GITHUB_ID: "0"
-                        NEXT_PUBLIC_SENTRY_DSN: "0"
-                        NEXT_PUBLIC_ENABLE_OAUTH: "0"
-                        NEXT_PUBLIC_ENABLE_SENTRY: "0"
-                        NEXT_PUBLIC_ENABLE_SESSION_RECORDER: "0"
-                        NEXT_PUBLIC_TRACK_EVENTS: "0"
-                depends_on:
-                        - plane-api
-                        - plane-worker
+  plane-web:
+    container_name: planefrontend
+    build:
+      context: .
+      dockerfile: ./web/Dockerfile.web
+      args:
+        DOCKER_BUILDKIT: 1
+        NEXT_PUBLIC_API_BASE_URL: http://localhost:8000
+        NEXT_PUBLIC_DEPLOY_URL: http://localhost/spaces
+    restart: always
+    command: /usr/local/bin/start.sh web/server.js web
+    env_file:
+      - .env
+    environment:
+      NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
+      NEXT_PUBLIC_DEPLOY_URL: ${NEXT_PUBLIC_DEPLOY_URL}
+      NEXT_PUBLIC_GOOGLE_CLIENTID: "0"
+      NEXT_PUBLIC_GITHUB_APP_NAME: "0"
+      NEXT_PUBLIC_GITHUB_ID: "0"
+      NEXT_PUBLIC_SENTRY_DSN: "0"
+      NEXT_PUBLIC_ENABLE_OAUTH: "0"
+      NEXT_PUBLIC_ENABLE_SENTRY: "0"
+      NEXT_PUBLIC_ENABLE_SESSION_RECORDER: "0"
+      NEXT_PUBLIC_TRACK_EVENTS: "0"
+    depends_on:
+      - plane-api
+      - plane-worker
 
-        plane-api:
-                container_name: planebackend
-                build:
-                        context: ./apiserver
-                        dockerfile: Dockerfile.api
-                restart: always
-                command: ./bin/takeoff
-                env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
-                depends_on:
-                        - plane-db
-                        - plane-redis
+  plane-deploy:
+    container_name: planedeploy
+    build:
+      context: .
+      dockerfile: ./space/Dockerfile.space
+      args:
+        DOCKER_BUILDKIT: 1
+        NEXT_PUBLIC_DEPLOY_WITH_NGINX: 1
+        NEXT_PUBLIC_API_BASE_URL: http://localhost:8000
+    restart: always
+    command: /usr/local/bin/start.sh space/server.js space
+    env_file:
+      - .env
+    environment:
+      - NEXT_PUBLIC_API_BASE_URL=${NEXT_PUBLIC_API_BASE_URL}
+    depends_on:
+      - plane-api
+      - plane-worker
+      - plane-web
 
-        plane-worker:
-                container_name: planebgworker
-                build:
-                        context: ./apiserver
-                        dockerfile: Dockerfile.api
-                restart: always
-                command: ./bin/worker
-                env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
-                depends_on:
-                        - plane-api
-                        - plane-db
-                        - plane-redis
+  plane-api:
+    container_name: planebackend
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.api
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    command: ./bin/takeoff
+    ports:
+      - 8000:8000
+    env_file:
+      - .env
+    environment:
+      <<: *api-and-worker-env
+    depends_on:
+      - plane-db
+      - plane-redis
 
-        plane-beat-worker:
-                container_name: planebeatworker
-                build:
-                        context: ./apiserver
-                        dockerfile: Dockerfile.api
-                restart: always
-                command: ./bin/beat
-                env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
-                depends_on:
-                        - plane-api
-                        - plane-db
-                        - plane-redis
+  plane-worker:
+    container_name: planebgworker
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.api
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    command: ./bin/worker
+    env_file:
+      - .env
+    environment:
+      <<: *api-and-worker-env
+    depends_on:
+      - plane-api
+      - plane-db
+      - plane-redis
 
-        plane-db:
-                container_name: plane-db
-                image: postgres:15.2-alpine
-                restart: always
-                command: postgres -c 'max_connections=1000'
-                volumes:
-                        - pgdata:/var/lib/postgresql/data
-                env_file:
-                        - .env
-                environment:
-                        POSTGRES_USER: ${PGUSER}
-                        POSTGRES_DB: ${PGDATABASE}
-                        POSTGRES_PASSWORD: ${PGPASSWORD}
-                        PGDATA: /var/lib/postgresql/data
+  plane-beat-worker:
+    container_name: planebeatworker
+    build:
+      context: ./apiserver
+      dockerfile: Dockerfile.api
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    command: ./bin/beat
+    env_file:
+      - .env
+    environment:
+      <<: *api-and-worker-env
+    depends_on:
+      - plane-api
+      - plane-db
+      - plane-redis
 
-        plane-redis:
-                container_name: plane-redis
-                image: redis:6.2.7-alpine
-                restart: always
-                volumes:
-                        - redisdata:/data
+  plane-db:
+    container_name: plane-db
+    image: postgres:15.2-alpine
+    restart: always
+    command: postgres -c 'max_connections=1000'
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    env_file:
+      - .env
+    environment:
+      POSTGRES_USER: ${PGUSER}
+      POSTGRES_DB: ${PGDATABASE}
+      POSTGRES_PASSWORD: ${PGPASSWORD}
+      PGDATA: /var/lib/postgresql/data
 
-        plane-minio:
-                container_name: plane-minio
-                image: minio/minio
-                restart: always
-                command: server /export --console-address ":9090"
-                volumes:
-                        - uploads:/export
-                env_file:
-                        - .env
-                environment:
-                        MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
-                        MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
+  plane-redis:
+    container_name: plane-redis
+    image: redis:6.2.7-alpine
+    restart: always
+    volumes:
+      - redisdata:/data
 
-        createbuckets:
-                image: minio/mc
-                entrypoint: >
-                        /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
-                env_file:
-                        - .env
-                depends_on:
-                        - plane-minio
+  plane-minio:
+    container_name: plane-minio
+    image: minio/minio
+    restart: always
+    command: server /export --console-address ":9090"
+    volumes:
+      - uploads:/export
+    env_file:
+      - .env
+    environment:
+      MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
+      MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
 
-        # Comment this if you already have a reverse proxy running
-        plane-proxy:
-                container_name: planeproxy
-                build:
-                        context: ./nginx
-                        dockerfile: Dockerfile
-                restart: always
-                ports:
-                        - ${NGINX_PORT}:80
-                env_file:
-                        - .env
-                environment:
-                        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
-                        BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
-                depends_on:
-                        - plane-web
-                        - plane-api
+  createbuckets:
+    image: minio/mc
+    entrypoint: >
+      /bin/sh -c " /usr/bin/mc config host add plane-minio http://plane-minio:9000 \$AWS_ACCESS_KEY_ID \$AWS_SECRET_ACCESS_KEY; /usr/bin/mc mb plane-minio/\$AWS_S3_BUCKET_NAME; /usr/bin/mc anonymous set download plane-minio/\$AWS_S3_BUCKET_NAME; exit 0; "
+    env_file:
+      - .env
+    depends_on:
+      - plane-minio
+
+  # Comment this if you already have a reverse proxy running
+  plane-proxy:
+    container_name: planeproxy
+    build:
+      context: ./nginx
+      dockerfile: Dockerfile
+    restart: always
+    ports:
+      - ${NGINX_PORT}:80
+    env_file:
+      - .env
+    environment:
+      FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
+      BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
+    depends_on:
+      - plane-web
+      - plane-api
 
 volumes:
-        pgdata:
-        redisdata:
-        uploads:
+  pgdata:
+  redisdata:
+  uploads:

heroku.yml

@@ -0,0 +1,3 @@
+build:
+  docker:
+    web: deploy/heroku/Dockerfile

nginx/nginx.conf.template

@@ -19,6 +19,10 @@ server {
         proxy_pass http://planebackend:8000/api/;
     }
 
+    location /spaces/ {
+        proxy_pass http://planedeploy:3000/spaces/;
+    }
+
    location /${BUCKET_NAME}/ {
         proxy_pass http://plane-minio:9000/uploads/;
     }

package.json

@@ -1,16 +1,25 @@
 {
-  "name": "plane",
   "repository": "https://github.com/makeplane/plane.git",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [
-    "web/",
-    "space/",
+    "web",
+    "space",
     "packages/*"
   ],
+  "scripts": {
+    "prepare": "husky install",
+    "build": "turbo run build",
+    "dev": "turbo run dev",
+    "start": "turbo run start",
+    "lint": "turbo run lint",
+    "clean": "turbo run clean",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+  },
   "devDependencies": {
     "eslint-config-custom": "*",
-    "prettier": "latest"
+    "prettier": "latest",
+    "turbo": "latest"
   },
   "packageManager": "yarn@1.22.19"
 }

packages/eslint-config-custom/index.js

@@ -4,7 +4,7 @@ module.exports = {
   plugins: ["react", "@typescript-eslint"],
   settings: {
     next: {
-      rootDir: ["app/", "docs/", "packages/*/"],
+      rootDir: ["web/", "space/", "packages/*/"],
     },
   },
   rules: {

space/.env.example

@@ -1 +1,8 @@
-NEXT_PUBLIC_API_BASE_URL=''
+# Base url for the API requests
+NEXT_PUBLIC_API_BASE_URL=""
+# Public boards deploy URL
+NEXT_PUBLIC_DEPLOY_URL=""
+# Google Client ID for Google OAuth
+NEXT_PUBLIC_GOOGLE_CLIENTID=""
+# Flag to toggle OAuth
+NEXT_PUBLIC_ENABLE_OAUTH=1

space/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: ["custom"],
+  rules: {
+    "@next/next/no-img-element": "off",
+  },
+};

space/Dockerfile.legacy

@@ -1,70 +0,0 @@
-FROM node:18-alpine AS builder
-RUN apk add --no-cache libc6-compat
-# Set working directory
-WORKDIR /app
-ENV NEXT_PUBLIC_API_BASE_URL=http://NEXT_PUBLIC_API_BASE_URL_PLACEHOLDER
-
-RUN yarn global add turbo
-COPY . .
-
-RUN turbo prune --scope=space --docker
-
-# Add lockfile and package.json's of isolated subworkspace
-FROM node:18-alpine AS installer
-
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
-ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
-
-# First install the dependencies (as they change less often)
-COPY .gitignore .gitignore
-COPY --from=builder /app/out/json/ .
-COPY --from=builder /app/out/yarn.lock ./yarn.lock
-RUN yarn install --network-timeout 500000
-
-# Build the project
-COPY --from=builder /app/out/full/ .
-COPY turbo.json turbo.json
-COPY replace-env-vars.sh /usr/local/bin/
-USER root
-RUN chmod +x /usr/local/bin/replace-env-vars.sh
-
-RUN yarn turbo run build --filter=space
-
-ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
-    BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
-
-RUN /usr/local/bin/replace-env-vars.sh http://NEXT_PUBLIC_WEBAPP_URL_PLACEHOLDER ${NEXT_PUBLIC_API_BASE_URL} space
-
-FROM node:18-alpine AS runner
-WORKDIR /app
-
-# Don't run production as root
-RUN addgroup --system --gid 1001 plane
-RUN adduser --system --uid 1001 captain
-USER captain
-
-COPY --from=installer /app/apps/space/next.config.js .
-COPY --from=installer /app/apps/space/package.json .
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=installer --chown=captain:plane /app/apps/space/.next/standalone ./
-
-COPY --from=installer --chown=captain:plane /app/apps/space/.next ./apps/space/.next
-
-ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
-ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
-    BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
-
-USER root
-COPY replace-env-vars.sh /usr/local/bin/
-COPY start.sh /usr/local/bin/
-RUN chmod +x /usr/local/bin/replace-env-vars.sh
-RUN chmod +x /usr/local/bin/start.sh
-
-USER captain
-
-ENV NEXT_TELEMETRY_DISABLED 1
-
-EXPOSE 3000

space/Dockerfile.space

@@ -1,56 +1,65 @@
-FROM node:18-alpine AS base
-
-# Install dependencies only when needed
-FROM base AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+FROM node:18-alpine AS builder
 RUN apk add --no-cache libc6-compat
-WORKDIR /space
-
-# Install dependencies based on the preferred package manager
-COPY package.json yarn.lock* ./
-RUN yarn
-
-
-# Rebuild the source code only when needed
-FROM base AS builder
-WORKDIR /space
+WORKDIR /app
+ENV NEXT_PUBLIC_API_BASE_URL=http://NEXT_PUBLIC_API_BASE_URL_PLACEHOLDER
 
+RUN yarn global add turbo
 COPY . .
 
-COPY --from=deps /space/node_modules ./node_modules
-COPY --from=deps /space/yarn.lock .
+RUN turbo prune --scope=space --docker
+
+FROM node:18-alpine AS installer
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/yarn.lock ./yarn.lock
+RUN yarn install --network-timeout 500000
+
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+COPY replace-env-vars.sh /usr/local/bin/
+USER root
+RUN chmod +x /usr/local/bin/replace-env-vars.sh
+
+ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
+ARG NEXT_PUBLIC_DEPLOY_WITH_NGINX=1
+
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL NEXT_PUBLIC_DEPLOY_WITH_NGINX=$NEXT_PUBLIC_DEPLOY_WITH_NGINX
+
+RUN yarn turbo run build --filter=space
+
+RUN /usr/local/bin/replace-env-vars.sh http://NEXT_PUBLIC_WEBAPP_URL_PLACEHOLDER ${NEXT_PUBLIC_API_BASE_URL} space
+
+FROM node:18-alpine AS runner
+WORKDIR /app
+
+RUN addgroup --system --gid 1001 plane
+RUN adduser --system --uid 1001 captain
+USER captain
+
+COPY --from=installer /app/space/next.config.js .
+COPY --from=installer /app/space/package.json .
+
+COPY --from=installer --chown=captain:plane /app/space/.next/standalone ./
+
+COPY --from=installer --chown=captain:plane /app/space/.next ./space/.next
+COPY --from=installer --chown=captain:plane /app/space/public ./space/public
+
+ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
+ARG NEXT_PUBLIC_DEPLOY_WITH_NGINX=1
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL NEXT_PUBLIC_DEPLOY_WITH_NGINX=$NEXT_PUBLIC_DEPLOY_WITH_NGINX
+
+USER root
+COPY replace-env-vars.sh /usr/local/bin/
+COPY start.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/replace-env-vars.sh
+RUN chmod +x /usr/local/bin/start.sh
+
+USER captain
 
 ENV NEXT_TELEMETRY_DISABLED 1
 
-RUN yarn build
-
-# If using npm comment out above and use below instead
-# RUN npm run build
-
-# Production image, copy all the files and run next
-FROM base AS runner
-WORKDIR /space
-
-ENV NODE_ENV production
-# Uncomment the following line in case you want to disable telemetry during runtime.
-# ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-COPY --from=builder /space/public ./public
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /space/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /space/.next/static ./.next/static
-
-USER nextjs
-
 EXPOSE 3000
-
-ENV PORT 3000
-# set hostname to localhost
-ENV HOSTNAME "0.0.0.0"
-
-CMD ["node", "space/server.js"]

space/app/[workspace_slug]/[project_slug]/layout.tsx

@@ -1,66 +0,0 @@
-// next imports
-import Link from "next/link";
-import Image from "next/image";
-import { Metadata, ResolvingMetadata } from "next";
-// components
-import IssueNavbar from "components/issues/navbar";
-import IssueFilter from "components/issues/filters-render";
-// service
-import ProjectService from "services/project.service";
-import { redirect } from "next/navigation";
-
-type LayoutProps = {
-  params: { workspace_slug: string; project_slug: string };
-};
-
-export async function generateMetadata({ params }: LayoutProps): Promise<Metadata> {
-  // read route params
-  const { workspace_slug, project_slug } = params;
-  const projectServiceInstance = new ProjectService();
-
-  try {
-    const project = await projectServiceInstance?.getProjectSettingsAsync(workspace_slug, project_slug);
-
-    return {
-      title: `${project?.project_details?.name} | ${workspace_slug}`,
-      description: `${
-        project?.project_details?.description || `${project?.project_details?.name} | ${workspace_slug}`
-      }`,
-      icons: `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${
-        typeof project?.project_details?.emoji != "object"
-          ? String.fromCodePoint(parseInt(project?.project_details?.emoji))
-          : "✈️"
-      }</text></svg>`,
-    };
-  } catch (error: any) {
-    if (error?.data?.error) {
-      redirect(`/project-not-published`);
-    }
-    return {};
-  }
-}
-
-const RootLayout = ({ children }: { children: React.ReactNode }) => (
-  <div className="relative w-screen min-h-[500px] h-screen overflow-hidden flex flex-col">
-    <div className="flex-shrink-0 h-[60px] border-b border-gray-300 relative flex items-center bg-white select-none">
-      <IssueNavbar />
-    </div>
-    {/* <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-gray-300 relative flex items-center shadow-md bg-white select-none">
-      <IssueFilter />
-    </div> */}
-    <div className="w-full h-full relative bg-gray-100/50 overflow-hidden">{children}</div>
-
-    <div className="absolute z-[99999] bottom-[10px] right-[10px] bg-white rounded-sm shadow-lg border border-gray-100">
-      <Link href="https://plane.so" className="p-1 px-2 flex items-center gap-1" target="_blank">
-        <div className="w-[24px] h-[24px] relative flex justify-center items-center">
-          <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
-        </div>
-        <div className="text-xs">
-          Powered by <b>Plane Deploy</b>
-        </div>
-      </Link>
-    </div>
-  </div>
-);
-
-export default RootLayout;

space/app/[workspace_slug]/[project_slug]/page.tsx

@@ -1,113 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-// next imports
-import { useRouter, useParams, useSearchParams } from "next/navigation";
-// mobx
-import { observer } from "mobx-react-lite";
-// components
-import { IssueListView } from "components/issues/board-views/list";
-import { IssueKanbanView } from "components/issues/board-views/kanban";
-import { IssueCalendarView } from "components/issues/board-views/calendar";
-import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
-import { IssueGanttView } from "components/issues/board-views/gantt";
-// mobx store
-import { RootStore } from "store/root";
-import { useMobxStore } from "lib/mobx/store-provider";
-// types
-import { TIssueBoardKeys } from "store/types";
-
-const WorkspaceProjectPage = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const routerParams = useParams();
-  const routerSearchparams = useSearchParams();
-
-  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
-  const board =
-    routerSearchparams &&
-    routerSearchparams.get("board") != null &&
-    (routerSearchparams.get("board") as TIssueBoardKeys | "");
-
-  // updating default board view when we are in the issues page
-  useEffect(() => {
-    if (workspace_slug && project_slug && store?.project?.workspaceProjectSettings) {
-      const workspacePRojectSettingViews = store?.project?.workspaceProjectSettings?.views;
-      const userAccessViews: TIssueBoardKeys[] = [];
-
-      Object.keys(workspacePRojectSettingViews).filter((_key) => {
-        if (_key === "list" && workspacePRojectSettingViews.list === true) userAccessViews.push(_key);
-        if (_key === "kanban" && workspacePRojectSettingViews.kanban === true) userAccessViews.push(_key);
-        if (_key === "calendar" && workspacePRojectSettingViews.calendar === true) userAccessViews.push(_key);
-        if (_key === "spreadsheet" && workspacePRojectSettingViews.spreadsheet === true) userAccessViews.push(_key);
-        if (_key === "gantt" && workspacePRojectSettingViews.gantt === true) userAccessViews.push(_key);
-      });
-
-      if (userAccessViews && userAccessViews.length > 0) {
-        if (!board) {
-          store.issue.setCurrentIssueBoardView(userAccessViews[0]);
-          router.replace(`/${workspace_slug}/${project_slug}?board=${userAccessViews[0]}`);
-        } else {
-          if (userAccessViews.includes(board)) {
-            if (store.issue.currentIssueBoardView === null) store.issue.setCurrentIssueBoardView(board);
-            else {
-              if (board === store.issue.currentIssueBoardView)
-                router.replace(`/${workspace_slug}/${project_slug}?board=${board}`);
-              else {
-                store.issue.setCurrentIssueBoardView(board);
-                router.replace(`/${workspace_slug}/${project_slug}?board=${board}`);
-              }
-            }
-          } else {
-            store.issue.setCurrentIssueBoardView(userAccessViews[0]);
-            router.replace(`/${workspace_slug}/${project_slug}?board=${userAccessViews[0]}`);
-          }
-        }
-      }
-    }
-  }, [workspace_slug, project_slug, board, router, store?.issue, store?.project?.workspaceProjectSettings]);
-
-  useEffect(() => {
-    if (workspace_slug && project_slug) {
-      store?.project?.getProjectSettingsAsync(workspace_slug, project_slug);
-      store?.issue?.getIssuesAsync(workspace_slug, project_slug);
-    }
-  }, [workspace_slug, project_slug, store?.project, store?.issue]);
-
-  return (
-    <div className="relative w-full h-full overflow-hidden">
-      {store?.issue?.loader && !store.issue.issues ? (
-        <div className="text-sm text-center py-10 text-gray-500">Loading...</div>
-      ) : (
-        <>
-          {store?.issue?.error ? (
-            <div className="text-sm text-center py-10 text-gray-500">Something went wrong.</div>
-          ) : (
-            store?.issue?.currentIssueBoardView && (
-              <>
-                {store?.issue?.currentIssueBoardView === "list" && (
-                  <div className="relative w-full h-full overflow-y-auto">
-                    <div className="container mx-auto px-5 py-3">
-                      <IssueListView />
-                    </div>
-                  </div>
-                )}
-                {store?.issue?.currentIssueBoardView === "kanban" && (
-                  <div className="relative w-full h-full mx-auto px-5">
-                    <IssueKanbanView />
-                  </div>
-                )}
-                {store?.issue?.currentIssueBoardView === "calendar" && <IssueCalendarView />}
-                {store?.issue?.currentIssueBoardView === "spreadsheet" && <IssueSpreadsheetView />}
-                {store?.issue?.currentIssueBoardView === "gantt" && <IssueGanttView />}
-              </>
-            )
-          )}
-        </>
-      )}
-    </div>
-  );
-});
-
-export default WorkspaceProjectPage;

space/app/layout.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-// root styles
-import "styles/globals.css";
-// mobx store provider
-import { MobxStoreProvider } from "lib/mobx/store-provider";
-import MobxStoreInit from "lib/mobx/store-init";
-
-const RootLayout = ({ children }: { children: React.ReactNode }) => (
-  <html lang="en">
-    <body className="antialiased w-100">
-      <MobxStoreProvider>
-        <MobxStoreInit />
-        <main>{children}</main>
-      </MobxStoreProvider>
-    </body>
-  </html>
-);
-
-export default RootLayout;

space/app/page.tsx

@@ -1,9 +0,0 @@
-"use client";
-
-import React from "react";
-
-const HomePage = () => (
-  <div className="relative w-screen h-screen flex justify-center items-center text-5xl">Plane Deploy</div>
-);
-
-export default HomePage;

space/components/accounts/email-code-form.tsx

@@ -0,0 +1,216 @@
+import React, { useEffect, useState, useCallback } from "react";
+
+// react hook form
+import { useForm } from "react-hook-form";
+
+// services
+import authenticationService from "services/authentication.service";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useTimer from "hooks/use-timer";
+
+// ui
+import { Input, PrimaryButton } from "components/ui";
+
+// types
+type EmailCodeFormValues = {
+  email: string;
+  key?: string;
+  token?: string;
+};
+
+export const EmailCodeForm = ({ handleSignIn }: any) => {
+  const [codeSent, setCodeSent] = useState(false);
+  const [codeResent, setCodeResent] = useState(false);
+  const [isCodeResending, setIsCodeResending] = useState(false);
+  const [errorResendingCode, setErrorResendingCode] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { setToastAlert } = useToast();
+  const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    setValue,
+    getValues,
+    watch,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailCodeFormValues>({
+    defaultValues: {
+      email: "",
+      key: "",
+      token: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const isResendDisabled = resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
+
+  const onSubmit = useCallback(
+    async ({ email }: EmailCodeFormValues) => {
+      setErrorResendingCode(false);
+      await authenticationService
+        .emailCode({ email })
+        .then((res) => {
+          setValue("key", res.key);
+          setCodeSent(true);
+        })
+        .catch((err) => {
+          setErrorResendingCode(true);
+          setToastAlert({
+            title: "Oops!",
+            type: "error",
+            message: err?.error,
+          });
+        });
+    },
+    [setToastAlert, setValue]
+  );
+
+  const handleSignin = async (formData: EmailCodeFormValues) => {
+    setIsLoading(true);
+    await authenticationService
+      .magicSignIn(formData)
+      .then((response) => {
+        setIsLoading(false);
+        handleSignIn(response);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.response?.data?.error ?? "Enter the correct code to sign in",
+        });
+        setError("token" as keyof EmailCodeFormValues, {
+          type: "manual",
+          message: error?.error,
+        });
+      });
+  };
+
+  const emailOld = getValues("email");
+
+  useEffect(() => {
+    setErrorResendingCode(false);
+  }, [emailOld]);
+
+  useEffect(() => {
+    const submitForm = (e: KeyboardEvent) => {
+      if (!codeSent && e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit(onSubmit)().then(() => {
+          setResendCodeTimer(30);
+        });
+      }
+    };
+
+    if (!codeSent) {
+      window.addEventListener("keydown", submitForm);
+    }
+
+    return () => {
+      window.removeEventListener("keydown", submitForm);
+    };
+  }, [handleSubmit, codeSent, onSubmit, setResendCodeTimer]);
+
+  return (
+    <>
+      {(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"
+            placeholder="Enter your email address..."
+            className="border-custom-border-300 h-[46px]"
+            {...register("email", {
+              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 address is not valid",
+            })}
+          />
+          {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+        </div>
+
+        {codeSent && (
+          <>
+            <Input
+              id="token"
+              type="token"
+              {...register("token", {
+                required: "Code is required",
+              })}
+              placeholder="Enter code..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.token && <div className="text-sm text-red-500">{errors.token.message}</div>}
+            <button
+              type="button"
+              className={`flex w-full justify-end text-xs outline-none ${
+                isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
+              } `}
+              onClick={() => {
+                setIsCodeResending(true);
+                onSubmit({ email: getValues("email") }).then(() => {
+                  setCodeResent(true);
+                  setIsCodeResending(false);
+                  setResendCodeTimer(30);
+                });
+              }}
+              disabled={isResendDisabled}
+            >
+              {resendCodeTimer > 0 ? (
+                <span className="text-right">Request new code in {resendCodeTimer} seconds</span>
+              ) : isCodeResending ? (
+                "Sending new code..."
+              ) : errorResendingCode ? (
+                "Please try again later"
+              ) : (
+                <span className="font-medium">Resend code</span>
+              )}
+            </button>
+          </>
+        )}
+        {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>
+        )}
+      </form>
+    </>
+  );
+};

space/components/accounts/email-password-form.tsx

@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+// react hook form
+import { useForm } from "react-hook-form";
+// components
+import { EmailResetPasswordForm } from "./email-reset-password-form";
+// ui
+import { Input, PrimaryButton } from "components/ui";
+// types
+type EmailPasswordFormValues = {
+  email: string;
+  password?: string;
+  medium?: string;
+};
+
+type Props = {
+  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+};
+
+export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+
+  const router = useRouter();
+  const isSignUpPage = router.pathname === "/sign-up";
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailPasswordFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      medium: "email",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  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="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"
+              {...register("email", {
+                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 address is not valid",
+              })}
+              placeholder="Enter your email address..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+          </div>
+          <div className="space-y-1">
+            <Input
+              id="password"
+              type="password"
+              {...register("password", {
+                required: "Password is required",
+              })}
+              placeholder="Enter your password..."
+              className="border-custom-border-300 h-[46px]"
+            />
+            {errors.password && <div className="text-sm text-red-500">{errors.password.message}</div>}
+          </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>
+            <PrimaryButton
+              type="submit"
+              className="w-full text-center h-[46px]"
+              disabled={!isValid && isDirty}
+              loading={isSubmitting}
+            >
+              {isSignUpPage ? (isSubmitting ? "Signing up..." : "Sign up") : isSubmitting ? "Signing in..." : "Sign in"}
+            </PrimaryButton>
+            {!isSignUpPage && (
+              <Link href="/sign-up">
+                <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>
+            )}
+          </div>
+        </form>
+      )}
+    </>
+  );
+};

space/components/accounts/email-reset-password-form.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+
+// react hook form
+import { useForm } from "react-hook-form";
+// services
+import userService from "services/user.service";
+// hooks
+// import useToast from "hooks/use-toast";
+// ui
+import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+// types
+type Props = {
+  setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword }) => {
+  // const { setToastAlert } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    defaultValues: {
+      email: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const forgotPassword = async (formData: any) => {
+    const payload = {
+      email: formData.email,
+    };
+
+    // await userService
+    //   .forgotPassword(payload)
+    //   .then(() =>
+    //     setToastAlert({
+    //       type: "success",
+    //       title: "Success!",
+    //       message: "Password reset link has been sent to your email address.",
+    //     })
+    //   )
+    //   .catch((err) => {
+    //     if (err.status === 400)
+    //       setToastAlert({
+    //         type: "error",
+    //         title: "Error!",
+    //         message: "Please check the Email ID entered.",
+    //       });
+    //     else
+    //       setToastAlert({
+    //         type: "error",
+    //         title: "Error!",
+    //         message: "Something went wrong. Please try again.",
+    //       });
+    //   });
+  };
+
+  return (
+    <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"
+          {...register("email", {
+            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 address is not valid",
+          })}
+          placeholder="Enter registered email address.."
+          className="border-custom-border-300 h-[46px]"
+        />
+        {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
+      </div>
+      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
+        <SecondaryButton className="w-full text-center h-[46px]" onClick={() => setIsResettingPassword(false)}>
+          Go Back
+        </SecondaryButton>
+        <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
+          {isSubmitting ? "Sending link..." : "Send reset link"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};

space/components/accounts/github-login-button.tsx

@@ -0,0 +1,55 @@
+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 githubBlackImage from "public/logos/github-black.svg";
+import githubWhiteImage from "public/logos/github-white.svg";
+
+export interface GithubLoginButtonProps {
+  handleSignIn: React.Dispatch<string>;
+}
+
+export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
+  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
+  const [gitCode, setGitCode] = useState<null | string>(null);
+
+  const router = useRouter();
+
+  const { code } = router.query;
+
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (code && !gitCode) {
+      setGitCode(code.toString());
+      handleSignIn(code.toString());
+    }
+  }, [code, gitCode, handleSignIn]);
+
+  useEffect(() => {
+    const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    setLoginCallBackURL(`${origin}/` as any);
+  }, []);
+
+  return (
+    <div className="w-full flex justify-center items-center">
+      <Link
+        className="w-full"
+        href={`https://github.com/login/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
+      >
+        <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>
+  );
+};

space/components/accounts/google-login.tsx

@@ -0,0 +1,59 @@
+import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
+
+import Script from "next/script";
+
+export interface IGoogleLoginButton {
+  text?: string;
+  handleSignIn: React.Dispatch<any>;
+  styles?: CSSProperties;
+}
+
+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 as any)?.google?.accounts.id.initialize({
+      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
+      callback: handleSignIn,
+    });
+
+    try {
+      (window as any)?.google?.accounts.id.renderButton(
+        googleSignInButton.current,
+        {
+          type: "standard",
+          theme: "outline",
+          size: "large",
+          logo_alignment: "center",
+          width: 360,
+          text: "signin_with",
+        } as any // customization attributes
+      );
+    } catch (err) {
+      console.log(err);
+    }
+
+    (window as any)?.google?.accounts.id.prompt(); // also display the One Tap dialog
+
+    setGsiScriptLoaded(true);
+  }, [handleSignIn, gsiScriptLoaded]);
+
+  useEffect(() => {
+    if ((window as any)?.google?.accounts?.id) {
+      loadScript();
+    }
+    return () => {
+      (window as any)?.google?.accounts.id.cancel();
+    };
+  }, [loadScript]);
+
+  return (
+    <>
+      <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
+      <div className="overflow-hidden rounded w-full" id="googleSignInButton" ref={googleSignInButton} />
+    </>
+  );
+};

space/components/accounts/index.ts

@@ -0,0 +1,8 @@
+export * from "./email-code-form";
+export * from "./email-password-form";
+export * from "./email-reset-password-form";
+export * from "./github-login-button";
+export * from "./google-login";
+export * from "./onboarding-form";
+export * from "./sign-in";
+export * from "./user-logged-in";

space/components/accounts/onboarding-form.tsx

@@ -0,0 +1,187 @@
+import { useEffect, Fragment } from "react";
+import { useRouter } from "next/router";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid";
+// constants
+import { USER_ROLES } from "constants/workspace";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import UserService from "services/user.service";
+// ui
+import { Input, PrimaryButton } from "components/ui";
+
+const defaultValues = {
+  first_name: "",
+  last_name: "",
+  role: "",
+};
+
+type Props = {
+  user?: any;
+};
+
+export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { next_path } = router.query;
+
+  const { user: userStore } = useMobxStore();
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm({
+    defaultValues,
+  });
+
+  const onSubmit = async (formData: any) => {
+    const payload = {
+      ...formData,
+      onboarding_step: {
+        ...user.onboarding_step,
+        profile_complete: true,
+      },
+    };
+
+    const userService = new UserService();
+
+    await userService
+      .updateMe(payload)
+      .then((response) => {
+        userStore.setCurrentUser(response);
+        router.push(next_path?.toString() || "/");
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Details updated successfully.",
+        });
+      })
+      .catch((err) => {});
+  };
+
+  useEffect(() => {
+    if (user) {
+      reset({
+        first_name: user.first_name,
+        last_name: user.last_name,
+        role: user.role,
+      });
+    }
+  }, [user, reset]);
+
+  return (
+    <form
+      className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto sm:flex sm:flex-col sm:items-start sm:justify-center"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div className="relative sm:text-lg">
+        <div className="text-gray-800 absolute -top-1 -left-3">{'"'}</div>
+        <h5>Hey there 👋🏻</h5>
+        <h5 className="mt-5 mb-6">Let{"'"}s get you onboard!</h5>
+        <h4 className="text-xl sm:text-2xl font-semibold">Set up your Plane profile.</h4>
+      </div>
+
+      <div className="space-y-7 sm:w-3/4 md:w-2/5">
+        <div className="space-y-1 text-sm">
+          <label htmlFor="firstName">First Name</label>
+          <Input
+            id="firstName"
+            autoComplete="off"
+            placeholder="Enter your first name..."
+            {...register("first_name", {
+              required: "First name is required",
+            })}
+          />
+          {errors.first_name && <div className="text-sm text-red-500">{errors.first_name.message}</div>}
+        </div>
+        <div className="space-y-1 text-sm">
+          <label htmlFor="lastName">Last Name</label>
+          <Input
+            id="lastName"
+            autoComplete="off"
+            placeholder="Enter your last name..."
+            {...register("last_name", {
+              required: "Last name is required",
+            })}
+          />
+          {errors.last_name && <div className="text-sm text-red-500">{errors.last_name.message}</div>}
+        </div>
+        <div className="space-y-1 text-sm">
+          <span>What{"'"}s your role?</span>
+          <div className="w-full">
+            <Controller
+              name="role"
+              control={control}
+              rules={{ required: "This field is required" }}
+              render={({ field: { value, onChange } }) => (
+                <Listbox as="div" value={value} onChange={onChange} className="relative flex-shrink-0 text-left">
+                  <Listbox.Button
+                    type="button"
+                    className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none px-3 py-2 text-sm`}
+                  >
+                    <span className="text-custom-text-400">{value || "Select your role..."}</span>
+                    <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                  </Listbox.Button>
+
+                  <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-100"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95"
+                  >
+                    <Listbox.Options
+                      className={`absolute z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none w-full max-h-36 left-0 origin-top-left`}
+                    >
+                      <div className="space-y-1 p-2">
+                        {USER_ROLES.map((role) => (
+                          <Listbox.Option
+                            key={role.value}
+                            value={role.value}
+                            className={({ active, selected }) =>
+                              `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                active || selected ? "bg-custom-background-80" : ""
+                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                            }
+                          >
+                            {({ selected }) => (
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <span>{role.label}</span>
+                                </div>
+                                {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
+                              </div>
+                            )}
+                          </Listbox.Option>
+                        ))}
+                      </div>
+                    </Listbox.Options>
+                  </Transition>
+                </Listbox>
+              )}
+            />
+            {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+          </div>
+        </div>
+      </div>
+
+      <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+        {isSubmitting ? "Updating..." : "Continue"}
+      </PrimaryButton>
+    </form>
+  );
+});

space/components/accounts/sign-in.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import authenticationService from "services/authentication.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.svg";
+
+export const SignInView = observer(() => {
+  const { user: userStore } = useMobxStore();
+
+  const router = useRouter();
+  const { next_path } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const onSignInError = (error: any) => {
+    setToastAlert({
+      title: "Error signing in!",
+      type: "error",
+      message: error?.error || "Something went wrong. Please try again later or contact the support team.",
+    });
+  };
+
+  const onSignInSuccess = (response: any) => {
+    const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
+
+    userStore.setCurrentUser(response?.user);
+
+    if (!isOnboarded) {
+      router.push(`/onboarding?next_path=${next_path}`);
+      return;
+    }
+    router.push((next_path ?? "/").toString());
+  };
+
+  const handleGoogleSignIn = async ({ clientId, credential }: any) => {
+    try {
+      if (clientId && credential) {
+        const socialAuthPayload = {
+          medium: "google",
+          credential,
+          clientId,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+
+        onSignInSuccess(response);
+      } else {
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  const handleGitHubSignIn = async (credential: string) => {
+    try {
+      if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
+        const socialAuthPayload = {
+          medium: "github",
+          credential,
+          clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+        onSignInSuccess(response);
+      } else {
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  const handlePasswordSignIn = async (formData: any) => {
+    await authenticationService
+      .emailLogin(formData)
+      .then((response) => {
+        try {
+          if (response) {
+            onSignInSuccess(response);
+          }
+        } catch (err: any) {
+          onSignInError(err);
+        }
+      })
+      .catch((err) => onSignInError(err));
+  };
+
+  const handleEmailCodeSignIn = async (response: any) => {
+    try {
+      if (response) {
+        onSignInSuccess(response);
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  return (
+    <div className="h-screen w-full overflow-hidden">
+      <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+      <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+        <div className="grid place-items-center bg-custom-background-100">
+          <div className="h-[30px] w-[30px]">
+            <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+          </div>
+        </div>
+      </div>
+      <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
+        <div>
+          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+            <>
+              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+                Sign in to Plane
+              </h1>
+              <div className="flex flex-col divide-y divide-custom-border-200">
+                <div className="pb-7">
+                  <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+                </div>
+                <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
+                  <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
+                  {/* <GithubLoginButton handleSignIn={handleGitHubSignIn} /> */}
+                </div>
+              </div>
+            </>
+          ) : (
+            <EmailPasswordForm onSubmit={handlePasswordSignIn} />
+          )}
+
+          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+            <p className="pt-16 text-custom-text-200 text-sm text-center">
+              By signing up, you agree to the{" "}
+              <a
+                href="https://plane.so/terms-and-conditions"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium underline"
+              >
+                Terms & Conditions
+              </a>
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+});

space/components/accounts/user-logged-in.tsx

@@ -0,0 +1,51 @@
+import Image from "next/image";
+
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+// assets
+import UserLoggedInImage from "public/user-logged-in.svg";
+import PlaneLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+
+export const UserLoggedIn = () => {
+  const { user: userStore } = useMobxStore();
+  const user = userStore.currentUser;
+
+  if (!user) return null;
+
+  return (
+    <div className="h-screen w-screen flex flex-col">
+      <div className="px-6 py-5 relative w-full flex items-center justify-between gap-4 border-b border-custom-border-200">
+        <div>
+          <Image src={PlaneLogo} alt="User already logged in" />
+        </div>
+        <div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
+          {user.avatar && user.avatar !== "" ? (
+            <div className="h-5 w-5 rounded-full">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
+            </div>
+          ) : (
+            <div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
+              {(user.display_name ?? "U")[0]}
+            </div>
+          )}
+          <h6 className="text-xs font-medium">{user.display_name}</h6>
+        </div>
+      </div>
+
+      <div className="h-full w-full grid place-items-center p-6">
+        <div className="text-center">
+          <div className="h-52 w-52 bg-custom-background-80 rounded-full grid place-items-center mx-auto">
+            <div className="h-32 w-32">
+              <Image src={UserLoggedInImage} alt="User already logged in" />
+            </div>
+          </div>
+          <h1 className="text-3xl font-semibold mt-12">Logged in Successfully!</h1>
+          <p className="mt-4">
+            You{"'"}ve successfully logged in. Please enter the appropriate project URL to view the issue board.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

space/components/icons/index.ts

@@ -1,5 +1 @@
-export * from "./issue-group/backlog-state-icon";
-export * from "./issue-group/unstarted-state-icon";
-export * from "./issue-group/started-state-icon";
-export * from "./issue-group/completed-state-icon";
-export * from "./issue-group/cancelled-state-icon";
+export * from "./state-group";

space/components/icons/state-group/index.ts

@@ -0,0 +1,6 @@
+export * from "./backlog-state-icon";
+export * from "./cancelled-state-icon";
+export * from "./completed-state-icon";
+export * from "./started-state-icon";
+export * from "./state-group-icon";
+export * from "./unstarted-state-icon";

space/components/icons/state-group/state-group-icon.tsx

@@ -0,0 +1,29 @@
+// icons
+import {
+  BacklogStateIcon,
+  CancelledStateIcon,
+  CompletedStateIcon,
+  StartedStateIcon,
+  UnstartedStateIcon,
+} from "components/icons";
+import { TIssueGroupKey } from "types/issue";
+
+type Props = {
+  stateGroup: TIssueGroupKey;
+  color: string;
+  className?: string;
+  height?: string;
+  width?: string;
+};
+
+export const StateGroupIcon: React.FC<Props> = ({ stateGroup, className, color, height = "12px", width = "12px" }) => {
+  if (stateGroup === "backlog")
+    return <BacklogStateIcon className={className} color={color} height={height} width={width} />;
+  else if (stateGroup === "cancelled")
+    return <CancelledStateIcon className={className} color={color} height={height} width={width} />;
+  else if (stateGroup === "completed")
+    return <CompletedStateIcon className={className} color={color} height={height} width={width} />;
+  else if (stateGroup === "started")
+    return <StartedStateIcon className={className} color={color} height={height} width={width} />;
+  else return <UnstartedStateIcon className={className} color={color} height={height} width={width} />;
+};

space/components/issues/board-views/block-downvotes.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export const IssueBlockDownVotes = ({ number }: { number: number }) => (
+  <div className="h-6 rounded flex px-1.5 pl-1 py-1 items-center border-[0.5px] border-custom-border-300 text-custom-text-300 text-xs">
+    <span className="material-symbols-rounded text-base !p-0 !m-0 rotate-180 text-custom-text-300">
+      arrow_upward_alt
+    </span>
+    {number}
+  </div>
+);

space/components/issues/board-views/block-due-date.tsx

@@ -1,32 +1,60 @@
 "use client";
 
 // helpers
-import { renderDateFormat } from "constants/helpers";
+import { renderFullDate } from "constants/helpers";
 
 export const findHowManyDaysLeft = (date: string | Date) => {
   const today = new Date();
   const eventDate = new Date(date);
   const timeDiff = Math.abs(eventDate.getTime() - today.getTime());
+
   return Math.ceil(timeDiff / (1000 * 3600 * 24));
 };
 
-const validDate = (date: any, state: string): string => {
-  if (date === null || ["backlog", "unstarted", "cancelled"].includes(state))
-    return `bg-gray-500/10 text-gray-500 border-gray-500/50`;
-  else {
+const dueDateIcon = (
+  date: string,
+  stateGroup: string
+): {
+  iconName: string;
+  className: string;
+} => {
+  let iconName = "calendar_today";
+  let className = "";
+
+  if (!date || ["completed", "cancelled"].includes(stateGroup)) {
+    iconName = "calendar_today";
+    className = "";
+  } else {
     const today = new Date();
     const dueDate = new Date(date);
 
-    if (dueDate < today) return `bg-red-500/10 text-red-500 border-red-500/50`;
-    else return `bg-green-500/10 text-green-500 border-green-500/50`;
+    if (dueDate < today) {
+      iconName = "event_busy";
+      className = "text-red-500";
+    } else if (dueDate > today) {
+      iconName = "calendar_today";
+      className = "";
+    } else {
+      iconName = "today";
+      className = "text-red-500";
+    }
   }
+
+  return {
+    iconName,
+    className,
+  };
 };
 
-export const IssueBlockDueDate = ({ due_date, state }: any) => (
-  <div
-    className={`h-[24px] rounded-sm flex px-2 items-center border border-gray-300 gap-1 text-gray-700 text-xs font-medium 
-    ${validDate(due_date, state)}`}
-  >
-    {renderDateFormat(due_date)}
-  </div>
-);
+export const IssueBlockDueDate = ({ due_date, group }: { due_date: string; group: string }) => {
+  const iconDetails = dueDateIcon(due_date, group);
+
+  return (
+    <div className="rounded flex px-2.5 py-1 items-center border-[0.5px] border-custom-border-300 gap-1 text-custom-text-100 text-xs">
+      <span className={`material-symbols-rounded text-sm -my-0.5 ${iconDetails.className}`}>
+        {iconDetails.iconName}
+      </span>
+      {renderFullDate(due_date)}
+    </div>
+  );
+};

space/components/issues/board-views/block-labels.tsx

@@ -6,11 +6,13 @@ export const IssueBlockLabels = ({ labels }: any) => (
       labels.length > 0 &&
       labels.map((_label: any) => (
         <div
-          className={`h-[24px] rounded-sm flex px-1 items-center border gap-1 !bg-transparent !text-gray-700`}
-          style={{ backgroundColor: `${_label?.color}10`, borderColor: `${_label?.color}50` }}
+          key={_label?.id}
+          className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
         >
-          <div className="w-[10px] h-[10px] rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
-          <div className="text-sm">{_label?.name}</div>
+          <div className="flex items-center gap-1.5 text-custom-text-200">
+            <div className="w-2 h-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
+            <div className="text-xs">{_label?.name}</div>
+          </div>
         </div>
       ))}
   </div>

space/components/issues/board-views/block-priority.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 // types
-import { TIssuePriorityKey } from "store/types/issue";
+import { TIssuePriorityKey } from "types/issue";
 // constants
 import { issuePriorityFilter } from "constants/data";
 
@@ -9,9 +9,10 @@ export const IssueBlockPriority = ({ priority }: { priority: TIssuePriorityKey |
   const priority_detail = priority != null ? issuePriorityFilter(priority) : null;
 
   if (priority_detail === null) return <></>;
+
   return (
-    <div className={`w-[24px] h-[24px] rounded-sm flex justify-center items-center ${priority_detail?.className}`}>
-      <span className="material-symbols-rounded text-[16px]">{priority_detail?.icon}</span>
+    <div className={`h-6 w-6 rounded grid place-items-center border-[0.5px] ${priority_detail?.className}`}>
+      <span className="material-symbols-rounded text-sm">{priority_detail?.icon}</span>
     </div>
   );
 };

space/components/issues/board-views/block-state.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 // constants
 import { issueGroupFilter } from "constants/data";
 
@@ -8,11 +6,11 @@ export const IssueBlockState = ({ state }: any) => {
 
   if (stateGroup === null) return <></>;
   return (
-    <div
-      className={`h-[24px] rounded-sm flex px-1 items-center border ${stateGroup?.className} gap-1 !bg-transparent !text-gray-700`}
-    >
-      <stateGroup.icon />
-      <div className="text-sm">{state?.name}</div>
+    <div className="flex items-center justify-between gap-1 w-full rounded shadow-sm border-[0.5px] border-custom-border-300 duration-300 focus:outline-none px-2.5 py-1 text-xs">
+      <div className="flex items-center w-full gap-1.5 text-custom-text-200">
+        <stateGroup.icon />
+        <div className="text-xs">{state?.name}</div>
+      </div>
     </div>
   );
 };

space/components/issues/board-views/block-upvotes.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+export const IssueBlockUpVotes = ({ number }: { number: number }) => (
+  <div className="h-6 rounded flex px-1.5 pl-1 py-1 items-center border-[0.5px] border-custom-border-300 text-custom-text-300 text-xs">
+    <span className="material-symbols-rounded text-base !p-0 !m-0 text-custom-text-300">arrow_upward_alt</span>
+    {number}
+  </div>
+);

space/components/issues/board-views/kanban/block.tsx

@@ -2,32 +2,54 @@
 
 // mobx react lite
 import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 // components
 import { IssueBlockPriority } from "components/issues/board-views/block-priority";
 import { IssueBlockState } from "components/issues/board-views/block-state";
 import { IssueBlockLabels } from "components/issues/board-views/block-labels";
 import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
-import { IIssue } from "store/types/issue";
+import { IIssue } from "types/issue";
 import { RootStore } from "store/root";
+import { useRouter } from "next/router";
 
-export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
-  const store: RootStore = useMobxStore();
+export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
+  const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug, board } = router.query;
+
+  const handleBlockClick = () => {
+    issueDetailStore.setPeekId(issue.id);
+    router.push(
+      {
+        pathname: `/${workspace_slug?.toString()}/${project_slug}`,
+        query: {
+          board: board?.toString(),
+          peekId: issue.id,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
 
   return (
-    <div className="p-2 px-3 bg-white space-y-2 rounded-sm shadow">
+    <div className="py-3 px-4 h-[118px] flex flex-col gap-1.5 bg-custom-background-100 rounded shadow-custom-shadow-sm border-[0.5px] border-custom-border-200">
       {/* id */}
-      <div className="flex-shrink-0 text-sm text-gray-600 w-[60px]">
-        {store?.project?.project?.identifier}-{issue?.sequence_id}
+      <div className="text-xs text-custom-text-300 break-words">
+        {projectStore?.project?.identifier}-{issue?.sequence_id}
       </div>
 
       {/* name */}
-      <div className="font-medium text-gray-800 h-full line-clamp-2">{issue.name}</div>
+      <h6 onClick={handleBlockClick} className="text-sm font-medium break-words line-clamp-2 cursor-pointer">
+        {issue.name}
+      </h6>
 
-      {/* priority */}
-      <div className="relative flex flex-wrap items-center gap-2 w-full">
+      <div className="relative flex-grow flex items-end gap-2 w-full overflow-x-scroll hide-horizontal-scrollbar">
+        {/* priority */}
         {issue?.priority && (
           <div className="flex-shrink-0">
             <IssueBlockPriority priority={issue?.priority} />
@@ -39,12 +61,6 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
             <IssueBlockState state={issue?.state_detail} />
           </div>
         )}
-        {/* labels */}
-        {issue?.label_details && issue?.label_details.length > 0 && (
-          <div className="flex-shrink-0">
-            <IssueBlockLabels labels={issue?.label_details} />
-          </div>
-        )}
         {/* due date */}
         {issue?.target_date && (
           <div className="flex-shrink-0">
@@ -54,4 +70,4 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
       </div>
     </div>
   );
-};
+});

space/components/issues/board-views/kanban/header.tsx

@@ -1,11 +1,11 @@
-"use client";
-
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // interfaces
-import { IIssueState } from "store/types/issue";
+import { IIssueState } from "types/issue";
 // constants
 import { issueGroupFilter } from "constants/data";
+// icons
+import { StateGroupIcon } from "components/icons";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -18,14 +18,14 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   if (stateGroup === null) return <></>;
 
   return (
-    <div className="py-2 flex items-center gap-2">
-      <div className="w-[28px] h-[28px] flex justify-center items-center">
-        <stateGroup.icon />
+    <div className="pb-2 px-2 flex items-center">
+      <div className="w-4 h-4 flex justify-center items-center flex-shrink-0">
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
       </div>
-      <div className="font-medium capitalize">{state?.name}</div>
-      <div className="bg-gray-200/50 text-gray-700 font-medium text-xs w-full max-w-[26px] h-[20px] flex justify-center items-center rounded-full">
+      <div className="font-semibold text-custom-text-200 capitalize ml-2 mr-3 truncate">{state?.name}</div>
+      <span className="text-custom-text-300 rounded-full flex-shrink-0">
         {store.issue.getCountOfIssuesByState(state.id)}
-      </div>
+      </span>
     </div>
   );
 });

space/components/issues/board-views/kanban/index.tsx

@@ -5,8 +5,10 @@ import { observer } from "mobx-react-lite";
 // components
 import { IssueListHeader } from "components/issues/board-views/kanban/header";
 import { IssueListBlock } from "components/issues/board-views/kanban/block";
+// ui
+import { Icon } from "components/ui";
 // interfaces
-import { IIssueState, IIssue } from "store/types/issue";
+import { IIssueState, IIssue } from "types/issue";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -19,21 +21,22 @@ export const IssueKanbanView = observer(() => {
       {store?.issue?.states &&
         store?.issue?.states.length > 0 &&
         store?.issue?.states.map((_state: IIssueState) => (
-          <div className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
+          <div key={_state.id} className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
             <div className="flex-shrink-0">
               <IssueListHeader state={_state} />
             </div>
-            <div className="w-full h-full overflow-hidden overflow-y-auto">
+            <div className="w-full h-full overflow-hidden overflow-y-auto hide-vertical-scrollbar">
               {store.issue.getFilteredIssuesByState(_state.id) &&
               store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
-                <div className="space-y-3 pb-2">
+                <div className="space-y-3 pb-2 px-2">
                   {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                    <IssueListBlock issue={_issue} />
+                    <IssueListBlock key={_issue.id} issue={_issue} />
                   ))}
                 </div>
               ) : (
-                <div className="relative w-full h-full flex justify-center items-center p-10 text-center text-sm text-gray-600">
-                  No Issues are available.
+                <div className="flex justify-center items-center gap-2 pt-10 text-center text-sm text-custom-text-200 font-medium">
+                  <Icon iconName="stack" />
+                  No issues in this state
                 </div>
               )}
             </div>

space/components/issues/board-views/list/block.tsx

@@ -1,6 +1,5 @@
-"use client";
-
-// mobx react lite
+import { FC } from "react";
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // components
 import { IssueBlockPriority } from "components/issues/board-views/block-priority";
@@ -10,50 +9,76 @@ import { IssueBlockDueDate } from "components/issues/board-views/block-due-date"
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
-import { IIssue } from "store/types/issue";
+import { IIssue } from "types/issue";
+// store
 import { RootStore } from "store/root";
 
-export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
-  const store: RootStore = useMobxStore();
+export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
+  const { issue } = props;
+  // store
+  const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug, board } = router.query;
+
+  const handleBlockClick = () => {
+    issueDetailStore.setPeekId(issue.id);
+    router.push(
+      {
+        pathname: `/${workspace_slug?.toString()}/${project_slug}`,
+        query: {
+          board: board?.toString(),
+          peekId: issue.id,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+    // router.push(`/${workspace_slug?.toString()}/${project_slug}?board=${board?.toString()}&peekId=${issue.id}`);
+  };
 
   return (
-    <div className="p-2 px-3 relative flex items-center gap-3">
-      <div className="relative flex items-center gap-3 w-full">
+    <div className="flex items-center px-6 py-3.5 relative gap-10 bg-custom-background-100">
+      <div className="relative flex items-center gap-5 w-full flex-grow overflow-hidden">
         {/* id */}
-        <div className="flex-shrink-0 text-sm text-gray-600 w-[60px]">
-          {store?.project?.project?.identifier}-{issue?.sequence_id}
+        <div className="flex-shrink-0 text-sm text-custom-text-300">
+          {projectStore?.project?.identifier}-{issue?.sequence_id}
         </div>
         {/* name */}
-        <div className="font-medium text-gray-800 h-full line-clamp-1">{issue.name}</div>
+        <div onClick={handleBlockClick} className="font-medium text-sm truncate flex-grow cursor-pointer">
+          {issue.name}
+        </div>
       </div>
 
-      {/* priority */}
-      {issue?.priority && (
-        <div className="flex-shrink-0">
-          <IssueBlockPriority priority={issue?.priority} />
-        </div>
-      )}
+      <div className="inline-flex flex-shrink-0 items-center gap-2 text-xs">
+        {/* priority */}
+        {issue?.priority && (
+          <div className="flex-shrink-0">
+            <IssueBlockPriority priority={issue?.priority} />
+          </div>
+        )}
 
-      {/* state */}
-      {issue?.state_detail && (
-        <div className="flex-shrink-0">
-          <IssueBlockState state={issue?.state_detail} />
-        </div>
-      )}
+        {/* state */}
+        {issue?.state_detail && (
+          <div className="flex-shrink-0">
+            <IssueBlockState state={issue?.state_detail} />
+          </div>
+        )}
 
-      {/* labels */}
-      {issue?.label_details && issue?.label_details.length > 0 && (
-        <div className="flex-shrink-0">
-          <IssueBlockLabels labels={issue?.label_details} />
-        </div>
-      )}
+        {/* labels */}
+        {issue?.label_details && issue?.label_details.length > 0 && (
+          <div className="flex-shrink-0">
+            <IssueBlockLabels labels={issue?.label_details} />
+          </div>
+        )}
 
-      {/* due date */}
-      {issue?.target_date && (
-        <div className="flex-shrink-0">
-          <IssueBlockDueDate due_date={issue?.target_date} group={issue?.state_detail?.group} />
-        </div>
-      )}
+        {/* due date */}
+        {issue?.target_date && (
+          <div className="flex-shrink-0">
+            <IssueBlockDueDate due_date={issue?.target_date} group={issue?.state_detail?.group} />
+          </div>
+        )}
+      </div>
     </div>
   );
-};
+});

space/components/issues/board-views/list/header.tsx

@@ -1,9 +1,9 @@
-"use client";
-
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // interfaces
-import { IIssueState } from "store/types/issue";
+import { IIssueState } from "types/issue";
+// icons
+import { StateGroupIcon } from "components/icons";
 // constants
 import { issueGroupFilter } from "constants/data";
 // mobx hook
@@ -18,14 +18,12 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   if (stateGroup === null) return <></>;
 
   return (
-    <div className="py-2 px-3 flex items-center gap-2">
-      <div className="w-[28px] h-[28px] flex justify-center items-center">
-        <stateGroup.icon />
-      </div>
-      <div className="font-medium capitalize">{state?.name}</div>
-      <div className="bg-gray-200/50 text-gray-700 font-medium text-xs w-full max-w-[26px] h-[20px] flex justify-center items-center rounded-full">
-        {store.issue.getCountOfIssuesByState(state.id)}
+    <div className="px-6 py-2 flex items-center">
+      <div className="w-4 h-4 flex justify-center items-center">
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
       </div>
+      <div className="font-semibold capitalize ml-2 mr-3">{state?.name}</div>
+      <div className="text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>
     </div>
   );
 });

space/components/issues/board-views/list/index.tsx

@@ -1,35 +1,35 @@
-"use client";
-
-// mobx react lite
 import { observer } from "mobx-react-lite";
 // components
 import { IssueListHeader } from "components/issues/board-views/list/header";
 import { IssueListBlock } from "components/issues/board-views/list/block";
 // interfaces
-import { IIssueState, IIssue } from "store/types/issue";
+import { IIssueState, IIssue } from "types/issue";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
+// store
 import { RootStore } from "store/root";
 
 export const IssueListView = observer(() => {
-  const store: RootStore = useMobxStore();
+  const { issue: issueStore }: RootStore = useMobxStore();
 
   return (
     <>
-      {store?.issue?.states &&
-        store?.issue?.states.length > 0 &&
-        store?.issue?.states.map((_state: IIssueState) => (
-          <div className="relative w-full">
+      {issueStore?.states &&
+        issueStore?.states.length > 0 &&
+        issueStore?.states.map((_state: IIssueState) => (
+          <div key={_state.id} className="relative w-full">
             <IssueListHeader state={_state} />
-            {store.issue.getFilteredIssuesByState(_state.id) &&
-            store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
-              <div className="bg-white divide-y">
-                {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                  <IssueListBlock issue={_issue} />
+            {issueStore.getFilteredIssuesByState(_state.id) &&
+            issueStore.getFilteredIssuesByState(_state.id).length > 0 ? (
+              <div className="divide-y divide-custom-border-200">
+                {issueStore.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
+                  <IssueListBlock key={_issue.id} issue={_issue} />
                 ))}
               </div>
             ) : (
-              <div className="bg-white p-5 text-sm text-gray-600">No Issues are available.</div>
+              <div className="px-6 py-3.5 text-sm text-custom-text-200 bg-custom-background-100">
+                No Issues are available.
+              </div>
             )}
           </div>
         ))}

space/components/issues/filters-render/date.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-
-const IssueDateFilter = observer(() => {
-  const store = useMobxStore();
-
-  return (
-    <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">Due Date</div>
-        <div className="relative flex flex-wrap items-center gap-1">
-          {/* <div className="flex items-center gap-1 border border-gray-300 px-[2px] py-0.5 rounded-full">
-            <div className="w-[18px] h-[18px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full border border-gray-300">
-              <span className={`material-symbols-rounded text-[16px]`}>close</span>
-            </div>
-            <div>Backlog</div>
-            <div
-              className={`w-[18px] h-[18px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600`}
-            >
-              <span className={`material-symbols-rounded text-[16px]`}>close</span>
-            </div>
-          </div> */}
-        </div>
-        <div
-          className={`w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600`}
-        >
-          <span className={`material-symbols-rounded text-[16px]`}>close</span>
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default IssueDateFilter;

space/components/issues/filters-render/index.tsx

@@ -1,12 +1,10 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
 import IssueStateFilter from "./state";
 import IssueLabelFilter from "./label";
 import IssuePriorityFilter from "./priority";
-import IssueDateFilter from "./date";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -14,24 +12,39 @@ import { RootStore } from "store/root";
 const IssueFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  const clearAllFilters = () => {};
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearAllFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "all",
+    //     removeAll: true,
+    //   })
+    // );
+  };
+
+  // if (store.issue.getIfFiltersIsEmpty()) return null;
 
   return (
-    <div className="container mx-auto px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
-      {/* state */}
-      {store?.issue?.states && <IssueStateFilter />}
-      {/* labels */}
-      {store?.issue?.labels && <IssueLabelFilter />}
-      {/* priority */}
-      <IssuePriorityFilter />
-      {/* due date */}
-      <IssueDateFilter />
-      {/* clear all filters */}
-      <div
-        className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded cursor-pointer hover:bg-gray-200/60"
-        onClick={clearAllFilters}
-      >
-        <div>Clear all filters</div>
+    <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-custom-border-200 relative flex items-center shadow-md bg-whiate select-none">
+      <div className="px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
+        {/* state */}
+        {/* {store.issue.checkIfFilterExistsForKey("state") && <IssueStateFilter />} */}
+        {/* labels */}
+        {/* {store.issue.checkIfFilterExistsForKey("label") && <IssueLabelFilter />} */}
+        {/* priority */}
+        {/* {store.issue.checkIfFilterExistsForKey("priority") && <IssuePriorityFilter />} */}
+        {/* clear all filters */}
+        <div
+          className="flex items-center gap-2 border border-custom-border-200 px-2 py-1 cursor-pointer text-xs rounded-full"
+          onClick={clearAllFilters}
+        >
+          <div>Clear all filters</div>
+          <div className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm">
+            <span className="material-symbols-rounded text-[12px]">close</span>
+          </div>
+        </div>
       </div>
     </div>
   );

space/components/issues/filters-render/label/filter-label-block.tsx

@@ -1,33 +1,42 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
-import { IIssueLabel } from "store/types/issue";
-// constants
-import { issueGroupFilter } from "constants/data";
+import { IIssueLabel } from "types/issue";
 
 export const RenderIssueLabel = observer(({ label }: { label: IIssueLabel }) => {
   const store = useMobxStore();
 
-  const removeLabelFromFilter = () => {};
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const removeLabelFromFilter = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "label",
+    //     value: label?.id,
+    //   })
+    // );
+  };
 
   return (
     <div
-      className="flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none"
-      style={{ color: label?.color, backgroundColor: `${label?.color}10`, borderColor: `${label?.color}50` }}
+      className="flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 rounded-full select-none"
+      style={{ color: label?.color, backgroundColor: `${label?.color}10` }}
     >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
-        <div className="w-[10px] h-[10px] rounded-full" style={{ backgroundColor: `${label?.color}` }} />
-      </div>
-      <div className="text-sm font-medium whitespace-nowrap">{label?.name}</div>
       <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+        className="flex-shrink-0 w-1.5 h-1.5 flex justify-center items-center overflow-hidden rounded-full"
+        style={{ backgroundColor: `${label?.color}` }}
+      />
+
+      <div className="font-medium whitespace-nowrap text-xs">{label?.name}</div>
+      <div
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
         onClick={removeLabelFromFilter}
       >
-        <span className="material-symbols-rounded text-[14px]">close</span>
+        <span className="material-symbols-rounded text-xs">close</span>
       </div>
     </div>
   );

space/components/issues/filters-render/label/index.tsx

@@ -1,11 +1,10 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
 import { RenderIssueLabel } from "./filter-label-block";
 // interfaces
-import { IIssueLabel } from "store/types/issue";
+import { IIssueLabel } from "types/issue";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -13,21 +12,36 @@ import { RootStore } from "store/root";
 const IssueLabelFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  const clearLabelFilters = () => {};
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearLabelFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "label",
+    //     removeAll: true,
+    //   })
+    // );
+  };
 
   return (
     <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">Labels</div>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">Labels</div>
         <div className="relative flex flex-wrap items-center gap-1">
-          {store?.issue?.labels &&
-            store?.issue?.labels.map((_label: IIssueLabel, _index: number) => <RenderIssueLabel label={_label} />)}
+          {/* {store?.issue?.labels &&
+            store?.issue?.labels.map(
+              (_label: IIssueLabel, _index: number) =>
+                store.issue.getUserSelectedFilter("label", _label.id) && (
+                  <RenderIssueLabel key={_label.id} label={_label} />
+                )
+            )} */}
         </div>
         <div
-          className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
           onClick={clearLabelFilters}
         >
-          <span className="material-symbols-rounded text-[16px]">close</span>
+          <span className="material-symbols-rounded text-[12px]">close</span>
         </div>
       </div>
     </>

space/components/issues/filters-render/priority/filter-priority-block.tsx

@@ -1,32 +1,41 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
-import { IIssuePriorityFilters } from "store/types/issue";
+import { IIssuePriorityFilters } from "types/issue";
 
 export const RenderIssuePriority = observer(({ priority }: { priority: IIssuePriorityFilters }) => {
   const store = useMobxStore();
 
-  const removePriorityFromFilter = () => {};
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const removePriorityFromFilter = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "priority",
+    //     value: priority?.key,
+    //   })
+    // );
+  };
 
   return (
     <div
-      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none ${
+      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 text-xs rounded-full select-none ${
         priority.className || ``
       }`}
     >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
-        <span className="material-symbols-rounded text-[14px]">{priority?.icon}</span>
+      <div className="flex-shrink-0 flex justify-center items-center overflow-hidden rounded-full">
+        <span className="material-symbols-rounded text-xs">{priority?.icon}</span>
       </div>
-      <div className="text-sm font-medium whitespace-nowrap">{priority?.title}</div>
+      <div className="whitespace-nowrap">{priority?.title}</div>
       <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
         onClick={removePriorityFromFilter}
       >
-        <span className="material-symbols-rounded text-[14px]">close</span>
+        <span className="material-symbols-rounded text-xs">close</span>
       </div>
     </div>
   );

space/components/issues/filters-render/priority/index.tsx

@@ -1,5 +1,4 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
@@ -7,28 +6,46 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { RenderIssuePriority } from "./filter-priority-block";
 // interfaces
-import { IIssuePriorityFilters } from "store/types/issue";
+import { IIssuePriorityFilters } from "types/issue";
 // constants
 import { issuePriorityFilters } from "constants/data";
 
 const IssuePriorityFilter = observer(() => {
   const store = useMobxStore();
 
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearPriorityFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "priority",
+    //     removeAll: true,
+    //   })
+    // );
+  };
+
   return (
     <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">Priority</div>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">Priority</div>
         <div className="relative flex flex-wrap items-center gap-1">
-          {issuePriorityFilters.map((_priority: IIssuePriorityFilters, _index: number) => (
-            <RenderIssuePriority priority={_priority} />
-          ))}
+          {/* {issuePriorityFilters.map(
+            (_priority: IIssuePriorityFilters, _index: number) =>
+              store.issue.getUserSelectedFilter("priority", _priority.key) && (
+                <RenderIssuePriority key={_priority.key} priority={_priority} />
+              )
+          )} */}
         </div>
         <div
-          className={`w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600`}
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
+          onClick={() => {
+            clearPriorityFilters();
+          }}
         >
-          <span className={`material-symbols-rounded text-[16px]`}>close</span>
+          <span className="material-symbols-rounded text-[12px]">close</span>
         </div>
-      </div>{" "}
+      </div>
     </>
   );
 });

space/components/issues/filters-render/state/filter-state-block.tsx

@@ -1,37 +1,42 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
-import { IIssueState } from "store/types/issue";
+import { IIssueState } from "types/issue";
 // constants
 import { issueGroupFilter } from "constants/data";
 
 export const RenderIssueState = observer(({ state }: { state: IIssueState }) => {
   const store = useMobxStore();
 
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
   const stateGroup = issueGroupFilter(state.group);
 
-  const removeStateFromFilter = () => {};
+  const removeStateFromFilter = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "state",
+    //     value: state?.id,
+    //   })
+    // );
+  };
 
   if (stateGroup === null) return <></>;
   return (
-    <div
-      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 border px-[2px] py-0.5 rounded-full select-none ${
-        stateGroup.className || ``
-      }`}
-    >
-      <div className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center overflow-hidden rounded-full">
+    <div className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 ${stateGroup.className || ``}`}>
+      <div className="flex-shrink-0 w-3 h-3 flex justify-center items-center overflow-hidden rounded-full">
         <stateGroup.icon />
       </div>
-      <div className="text-sm font-medium whitespace-nowrap">{state?.name}</div>
+      <div className="text-xs font-medium whitespace-nowrap">{state?.name}</div>
       <div
-        className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-full text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
         onClick={removeStateFromFilter}
       >
-        <span className="material-symbols-rounded text-[14px]">close</span>
+        <span className="material-symbols-rounded text-xs">close</span>
       </div>
     </div>
   );

space/components/issues/filters-render/state/index.tsx

@@ -1,11 +1,10 @@
-"use client";
-
+import { useRouter } from "next/router";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
 import { RenderIssueState } from "./filter-state-block";
 // interfaces
-import { IIssueState } from "store/types/issue";
+import { IIssueState } from "types/issue";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -13,21 +12,36 @@ import { RootStore } from "store/root";
 const IssueStateFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  const clearStateFilters = () => {};
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const clearStateFilters = () => {
+    // router.replace(
+    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
+    //     key: "state",
+    //     removeAll: true,
+    //   })
+    // );
+  };
 
   return (
     <>
-      <div className="flex items-center gap-2 border border-gray-300 px-2 py-1 pr-1 rounded">
-        <div className="flex-shrink-0 font-medium">State</div>
+      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
+        <div className="flex-shrink-0 text-custom-text-200">State</div>
         <div className="relative flex flex-wrap items-center gap-1">
-          {store?.issue?.states &&
-            store?.issue?.states.map((_state: IIssueState, _index: number) => <RenderIssueState state={_state} />)}
+          {/* {store?.issue?.states &&
+            store?.issue?.states.map(
+              (_state: IIssueState, _index: number) =>
+                store.issue.getUserSelectedFilter("state", _state.id) && (
+                  <RenderIssueState key={_state.id} state={_state} />
+                )
+            )} */}
         </div>
         <div
-          className="flex-shrink-0 w-[20px] h-[20px] cursor-pointer flex justify-center items-center overflow-hidden rounded-sm text-gray-500 hover:bg-gray-200/60 hover:text-gray-600"
+          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
           onClick={clearStateFilters}
         >
-          <span className="material-symbols-rounded text-[16px]">close</span>
+          <span className="material-symbols-rounded text-[12px]">close</span>
         </div>
       </div>
     </>

space/components/issues/navbar/index.tsx

@@ -1,17 +1,20 @@
-"use client";
+import { useEffect } from "react";
 
-// next imports
+import Link from "next/link";
 import Image from "next/image";
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
 // components
 import { NavbarSearch } from "./search";
 import { NavbarIssueBoardView } from "./issue-board-view";
-import { NavbarIssueFilter } from "./issue-filter";
-import { NavbarIssueView } from "./issue-view";
 import { NavbarTheme } from "./theme";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx
+// ui
+import { PrimaryButton } from "components/ui";
+// lib
 import { useMobxStore } from "lib/mobx/store-provider";
+// store
 import { RootStore } from "store/root";
 
 const renderEmoji = (emoji: string | { name: string; color: string }) => {
@@ -27,21 +30,47 @@ const renderEmoji = (emoji: string | { name: string; color: string }) => {
 };
 
 const IssueNavbar = observer(() => {
-  const store: RootStore = useMobxStore();
+  const { project: projectStore, user: userStore }: RootStore = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug, board } = router.query;
+
+  const user = userStore?.currentUser;
+
+  useEffect(() => {
+    if (workspace_slug && project_slug) {
+      projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
+    }
+  }, [projectStore, workspace_slug, project_slug]);
+
+  useEffect(() => {
+    if (workspace_slug && project_slug) {
+      if (!board) {
+        router.push({
+          pathname: `/${workspace_slug}/${project_slug}`,
+          query: {
+            board: "list",
+          },
+        });
+        return projectStore.setActiveBoard("list");
+      }
+      projectStore.setActiveBoard(board.toString());
+    }
+  }, [board, workspace_slug, project_slug]);
 
   return (
     <div className="px-5 relative w-full flex items-center gap-4">
       {/* project detail */}
       <div className="flex-shrink-0 flex items-center gap-2">
-        <div className="w-[32px] h-[32px] rounded-sm flex justify-center items-center bg-gray-100 text-[24px]">
-          {store?.project?.project && store?.project?.project?.emoji ? (
-            renderEmoji(store?.project?.project?.emoji)
+        <div className="w-4 h-4 flex justify-center items-center">
+          {projectStore?.project && projectStore?.project?.emoji ? (
+            renderEmoji(projectStore?.project?.emoji)
           ) : (
             <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
           )}
         </div>
         <div className="font-medium text-lg max-w-[300px] line-clamp-1 overflow-hidden">
-          {store?.project?.project?.name || `...`}
+          {projectStore?.project?.name || `...`}
         </div>
       </div>
 
@@ -55,16 +84,36 @@ const IssueNavbar = observer(() => {
         <NavbarIssueBoardView />
       </div>
 
-      {/* issue filters */}
-      {/* <div className="flex-shrink-0 relative flex items-center gap-2">
-        <NavbarIssueFilter />
-        <NavbarIssueView />
-      </div> */}
-
       {/* theming */}
-      {/* <div className="flex-shrink-0 relative">
+      <div className="flex-shrink-0 relative">
         <NavbarTheme />
-      </div> */}
+      </div>
+
+      {user ? (
+        <div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
+          {user.avatar && user.avatar !== "" ? (
+            <div className="h-5 w-5 rounded-full">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
+            </div>
+          ) : (
+            <div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
+              {(user.display_name ?? "A")[0]}
+            </div>
+          )}
+          <h6 className="text-xs font-medium">{user.display_name}</h6>
+        </div>
+      ) : (
+        <div className="flex-shrink-0">
+          <Link href={`/?next_path=${router.asPath}`}>
+            <a>
+              <PrimaryButton className="flex-shrink-0" outline>
+                Sign in
+              </PrimaryButton>
+            </a>
+          </Link>
+        </div>
+      )}
     </div>
   );
 });

space/components/issues/navbar/issue-board-view.tsx

@@ -1,54 +1,49 @@
-"use client";
-
-// next imports
-import { useRouter, useParams } from "next/navigation";
-// mobx react lite
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // constants
 import { issueViews } from "constants/data";
-// interfaces
-import { TIssueBoardKeys } from "store/types";
 // mobx
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
 export const NavbarIssueBoardView = observer(() => {
-  const store: RootStore = useMobxStore();
+  const { project: projectStore, issue: issueStore }: RootStore = useMobxStore();
 
   const router = useRouter();
-  const routerParams = useParams();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
 
-  const { workspace_slug, project_slug } = routerParams as { workspace_slug: string; project_slug: string };
-
-  const handleCurrentBoardView = (boardView: TIssueBoardKeys) => {
-    store?.issue?.setCurrentIssueBoardView(boardView);
-    router.replace(`/${workspace_slug}/${project_slug}?board=${boardView}`);
+  const handleCurrentBoardView = (boardView: string) => {
+    projectStore.setActiveBoard(boardView);
+    router.push(`/${workspace_slug}/${project_slug}?board=${boardView}`);
   };
 
   return (
     <>
-      {store?.project?.workspaceProjectSettings &&
-        issueViews &&
-        issueViews.length > 0 &&
-        issueViews.map(
-          (_view) =>
-            store?.project?.workspaceProjectSettings?.views[_view?.key] && (
+      {projectStore?.viewOptions &&
+        Object.keys(projectStore?.viewOptions).map((viewKey: string) => {
+          if (projectStore?.viewOptions[viewKey]) {
+            return (
               <div
-                key={_view?.key}
-                className={`w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer text-gray-500 ${
-                  _view?.key === store?.issue?.currentIssueBoardView
-                    ? `bg-gray-200/60 text-gray-800`
-                    : `hover:bg-gray-200/60 text-gray-600`
+                key={viewKey}
+                className={`w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer ${
+                  viewKey === projectStore?.activeBoard
+                    ? `bg-custom-background-80 text-custom-text-200`
+                    : `hover:bg-custom-background-80 text-custom-text-300`
                 }`}
-                onClick={() => handleCurrentBoardView(_view?.key)}
-                title={_view?.title}
+                onClick={() => handleCurrentBoardView(viewKey)}
+                title={viewKey}
               >
-                <span className={`material-symbols-rounded text-[18px] ${_view?.className ? _view?.className : ``}`}>
-                  {_view?.icon}
+                <span
+                  className={`material-symbols-rounded text-[18px] ${
+                    issueViews[viewKey]?.className ? issueViews[viewKey]?.className : ``
+                  }`}
+                >
+                  {issueViews[viewKey]?.icon}
                 </span>
               </div>
-            )
-        )}
+            );
+          }
+        })}
     </>
   );
 });

space/components/issues/navbar/issue-filter.tsx

@@ -1,13 +1,111 @@
-"use client";
-
-// mobx react lite
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
 // mobx
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// components
+import { Dropdown } from "components/ui/dropdown";
+// constants
+import { issueGroupFilter } from "constants/data";
+
+const PRIORITIES = ["urgent", "high", "medium", "low"];
 
 export const NavbarIssueFilter = observer(() => {
   const store: RootStore = useMobxStore();
 
-  return <div>Filter</div>;
+  const router = useRouter();
+  const pathName = router.asPath;
+
+  const handleOnSelect = (key: "states" | "labels" | "priorities", value: string) => {
+    // if (key === "states") {
+    //   store.issue.userSelectedStates = store.issue.userSelectedStates.includes(value)
+    //     ? store.issue.userSelectedStates.filter((s) => s !== value)
+    //     : [...store.issue.userSelectedStates, value];
+    // } else if (key === "labels") {
+    //   store.issue.userSelectedLabels = store.issue.userSelectedLabels.includes(value)
+    //     ? store.issue.userSelectedLabels.filter((l) => l !== value)
+    //     : [...store.issue.userSelectedLabels, value];
+    // } else if (key === "priorities") {
+    //   store.issue.userSelectedPriorities = store.issue.userSelectedPriorities.includes(value)
+    //     ? store.issue.userSelectedPriorities.filter((p) => p !== value)
+    //     : [...store.issue.userSelectedPriorities, value];
+    // }
+    // const paramsCommaSeparated = `${`board=${store.issue.currentIssueBoardView || "list"}`}${
+    //   store.issue.userSelectedPriorities.length > 0 ? `&priorities=${store.issue.userSelectedPriorities.join(",")}` : ""
+    // }${store.issue.userSelectedStates.length > 0 ? `&states=${store.issue.userSelectedStates.join(",")}` : ""}${
+    //   store.issue.userSelectedLabels.length > 0 ? `&labels=${store.issue.userSelectedLabels.join(",")}` : ""
+    // }`;
+    // router.replace(`${pathName}?${paramsCommaSeparated}`);
+  };
+
+  return (
+    <Dropdown
+      button={
+        <>
+          <span>Filters</span>
+          <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+        </>
+      }
+      items={[
+        {
+          display: "Priority",
+          children: PRIORITIES.map((priority) => ({
+            display: (
+              <span className="capitalize flex items-center gap-x-2">
+                <span className="material-symbols-rounded text-[14px]">
+                  {priority === "urgent"
+                    ? "error"
+                    : priority === "high"
+                    ? "signal_cellular_alt"
+                    : priority === "medium"
+                    ? "signal_cellular_alt_2_bar"
+                    : "signal_cellular_alt_1_bar"}
+                </span>
+                {priority}
+              </span>
+            ),
+            onClick: () => handleOnSelect("priorities", priority),
+            isSelected: store.issue.filteredPriorities.includes(priority),
+          })),
+        },
+        {
+          display: "State",
+          children: (store.issue.states || []).map((state) => {
+            const stateGroup = issueGroupFilter(state.group);
+
+            return {
+              display: (
+                <span className="capitalize flex items-center gap-x-2">
+                  {stateGroup && <stateGroup.icon />}
+                  {state.name}
+                </span>
+              ),
+              onClick: () => handleOnSelect("states", state.id),
+              isSelected: store.issue.filteredStates.includes(state.id),
+            };
+          }),
+        },
+        {
+          display: "Labels",
+          children: [...(store.issue.labels || [])].map((label) => ({
+            display: (
+              <span className="capitalize flex items-center gap-x-2">
+                <span
+                  className="w-3 h-3 rounded-full"
+                  style={{
+                    backgroundColor: label.color || "#000",
+                  }}
+                />
+                {label.name}
+              </span>
+            ),
+            onClick: () => handleOnSelect("labels", label.id),
+            isSelected: store.issue.filteredLabels.includes(label.id),
+          })),
+        },
+      ]}
+    />
+  );
 });

space/components/issues/navbar/theme.tsx

@@ -1,28 +1,32 @@
-"use client";
+// next theme
+import { useTheme } from "next-themes";
 
 // mobx react lite
 import { observer } from "mobx-react-lite";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
+import { useEffect, useState } from "react";
 
 export const NavbarTheme = observer(() => {
-  const store: RootStore = useMobxStore();
+  const [appTheme, setAppTheme] = useState("light");
+
+  const { setTheme, theme } = useTheme();
 
   const handleTheme = () => {
-    store?.theme?.setTheme(store?.theme?.theme === "light" ? "dark" : "light");
+    setTheme(theme === "light" ? "dark" : "light");
   };
 
+  useEffect(() => {
+    if (!theme) return;
+
+    setAppTheme(theme);
+  }, [theme]);
+
   return (
-    <div
-      className="relative w-[28px] h-[28px] flex justify-center items-center rounded-sm cursor-pointer bg-gray-100 hover:bg-gray-200 hover:bg-gray-200/60 text-gray-600 transition-all"
+    <button
+      type="button"
       onClick={handleTheme}
+      className="relative w-7 h-7 grid place-items-center bg-custom-background-100 hover:bg-custom-background-80 text-custom-text-100 rounded"
     >
-      {store?.theme?.theme === "light" ? (
-        <span className={`material-symbols-rounded text-[18px]`}>dark_mode</span>
-      ) : (
-        <span className={`material-symbols-rounded text-[18px]`}>light_mode</span>
-      )}
-    </div>
+      <span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
+    </button>
   );
 });

space/components/issues/peek-overview/add-comment.tsx

@@ -0,0 +1,104 @@
+import React, { useRef } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { useForm, Controller } from "react-hook-form";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { SecondaryButton } from "components/ui";
+// types
+import { Comment } from "types/issue";
+// components
+import { TipTapEditor } from "components/tiptap";
+
+const defaultValues: Partial<Comment> = {
+  comment_html: "",
+};
+
+type Props = {
+  disabled?: boolean;
+};
+
+export const AddComment: React.FC<Props> = observer((props) => {
+  const { disabled = false } = props;
+
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    watch,
+    formState: { isSubmitting },
+    reset,
+  } = useForm<Comment>({ defaultValues });
+
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+
+  const { user: userStore, issueDetails: issueDetailStore } = useMobxStore();
+
+  const issueId = issueDetailStore.peekId;
+
+  const editorRef = useRef<any>(null);
+
+  const { setToastAlert } = useToast();
+
+  const onSubmit = async (formData: Comment) => {
+    if (!workspace_slug || !project_slug || !issueId || isSubmitting || !formData.comment_html) return;
+
+    await issueDetailStore
+      .addIssueComment(workspace_slug, project_slug, issueId, formData)
+      .then(() => {
+        reset(defaultValues);
+        editorRef.current?.clearEditor();
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <div>
+      <div className="issue-comments-section">
+        <Controller
+          name="comment_html"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <TipTapEditor
+              workspaceSlug={workspace_slug as string}
+              ref={editorRef}
+              value={
+                !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                  ? watch("comment_html")
+                  : value
+              }
+              customClassName="p-3 min-h-[50px] shadow-sm"
+              debouncedUpdatesEnabled={false}
+              onChange={(comment_json: Object, comment_html: string) => {
+                onChange(comment_html);
+              }}
+            />
+          )}
+        />
+
+        <SecondaryButton
+          onClick={(e) => {
+            userStore.requiredLogin(() => {
+              handleSubmit(onSubmit)(e);
+            });
+          }}
+          type="submit"
+          disabled={isSubmitting || disabled}
+          className="mt-2"
+        >
+          {isSubmitting ? "Adding..." : "Comment"}
+        </SecondaryButton>
+      </div>
+    </div>
+  );
+});

space/components/issues/peek-overview/comment-detail-card.tsx

@@ -0,0 +1,190 @@
+import React, { useEffect, useState, useRef } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+import { Menu, Transition } from "@headlessui/react";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// icons
+import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import { Comment } from "types/issue";
+// components
+import { TipTapEditor } from "components/tiptap";
+
+type Props = {
+  workspaceSlug: string;
+  comment: Comment;
+};
+
+export const CommentCard: React.FC<Props> = observer((props) => {
+  const { comment, workspaceSlug } = props;
+  // store
+  const { user: userStore, issueDetails: issueDetailStore } = useMobxStore();
+  // states
+  const [isEditing, setIsEditing] = useState(false);
+
+  const {
+    formState: { isSubmitting },
+    handleSubmit,
+    control,
+  } = useForm<any>({
+    defaultValues: { comment_html: comment.comment_html },
+  });
+
+  const handleDelete = () => {
+    if (!workspaceSlug || !issueDetailStore.peekId) return;
+    issueDetailStore.deleteIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id);
+  };
+
+  const handleCommentUpdate = async (formData: Comment) => {
+    if (!workspaceSlug || !issueDetailStore.peekId) return;
+    issueDetailStore.updateIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id, formData);
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="relative flex items-start space-x-3">
+      <div className="relative px-1">
+        {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={comment.actor_detail.avatar}
+            alt={
+              comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
+            }
+            height={30}
+            width={30}
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+          />
+        ) : (
+          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
+            {comment.actor_detail.is_bot
+              ? comment?.actor_detail?.first_name?.charAt(0)
+              : comment?.actor_detail?.display_name?.charAt(0)}
+          </div>
+        )}
+
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
+          <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div>
+          <div className="text-xs">
+            {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
+          </div>
+          <p className="mt-0.5 text-xs text-custom-text-200">
+            <>Commented {timeAgo(comment.created_at)}</>
+          </p>
+        </div>
+        <div className="issue-comments-section p-0">
+          <form
+            onSubmit={handleSubmit(handleCommentUpdate)}
+            className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
+          >
+            <div>
+              <Controller
+                control={control}
+                name="comment_html"
+                render={({ field: { onChange, value } }) => (
+                  <TipTapEditor
+                    workspaceSlug={workspaceSlug as string}
+                    value={value}
+                    debouncedUpdatesEnabled={false}
+                    customClassName="min-h-[50px] p-3 shadow-sm"
+                    onChange={(comment_json: Object, comment_html: string) => {
+                      onChange(comment_html);
+                    }}
+                  />
+                )}
+              />
+            </div>
+            <div className="flex gap-1 self-end">
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+              >
+                <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+              </button>
+              <button
+                type="button"
+                className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+                onClick={() => setIsEditing(false)}
+              >
+                <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+              </button>
+            </div>
+          </form>
+          <div className={`${isEditing ? "hidden" : ""}`}>
+            <TipTapEditor
+              workspaceSlug={workspaceSlug.toString()}
+              value={comment.comment_html}
+              editable={false}
+              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+            />
+          </div>
+        </div>
+      </div>
+
+      {userStore?.currentUser?.id === comment?.actor_detail?.id && (
+        <Menu as="div" className="relative w-min text-left">
+          <Menu.Button
+            type="button"
+            onClick={() => {}}
+            className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none cursor-pointer hover:bg-custom-background-80"
+          >
+            <EllipsisVerticalIcon className="h-5 w-5 text-custom-text-200 duration-300" />
+          </Menu.Button>
+
+          <Transition
+            as={React.Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute z-10 overflow-y-scroll whitespace-nowrap rounded-md max-h-36 border right-0 origin-top-right mt-1 overflow-auto min-w-[8rem] border-custom-border-300 p-1 text-xs shadow-lg focus:outline-none bg-custom-background-90">
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIsEditing(true);
+                      }}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Edit
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={handleDelete}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});

space/components/issues/peek-overview/full-screen-peek-view.tsx

@@ -0,0 +1,71 @@
+import { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  PeekOverviewHeader,
+  PeekOverviewIssueActivity,
+  PeekOverviewIssueDetails,
+  PeekOverviewIssueProperties,
+} from "components/issues/peek-overview";
+// types
+import { Loader } from "components/ui/loader";
+import { IIssue } from "types/issue";
+
+type Props = {
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+export const FullScreenPeekView: React.FC<Props> = observer((props) => {
+  const { handleClose, issueDetails } = props;
+
+  return (
+    <div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
+      <div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
+        <div className="w-full p-5">
+          <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
+        </div>
+        {issueDetails ? (
+          <div className="h-full w-full px-6 overflow-y-auto">
+            {/* issue title and description */}
+            <div className="w-full">
+              <PeekOverviewIssueDetails issueDetails={issueDetails} />
+            </div>
+            {/* divider */}
+            <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
+            {/* issue activity/comments */}
+            <div className="w-full pb-5">
+              <PeekOverviewIssueActivity issueDetails={issueDetails} />
+            </div>
+          </div>
+        ) : (
+          <Loader className="px-6">
+            <Loader.Item height="30px" />
+            <div className="space-y-2 mt-3">
+              <Loader.Item height="20px" width="70%" />
+              <Loader.Item height="20px" width="60%" />
+              <Loader.Item height="20px" width="60%" />
+            </div>
+          </Loader>
+        )}
+      </div>
+      <div className="col-span-3 h-full w-full overflow-y-auto">
+        {/* issue properties */}
+        <div className="w-full px-6 py-5">
+          {issueDetails ? (
+            <PeekOverviewIssueProperties issueDetails={issueDetails} />
+          ) : (
+            <Loader className="mt-11 space-y-4">
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});

space/components/issues/peek-overview/header.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Icon } from "components/ui";
+// icons
+import { East } from "@mui/icons-material";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// store
+import { IPeekMode } from "store/issue_details";
+import { RootStore } from "store/root";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// types
+import { IIssue } from "types/issue";
+
+type Props = {
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+const peekModes: {
+  key: IPeekMode;
+  icon: string;
+  label: string;
+}[] = [
+  { key: "side", icon: "side_navigation", label: "Side Peek" },
+  {
+    key: "modal",
+    icon: "dialogs",
+    label: "Modal Peek",
+  },
+  {
+    key: "full",
+    icon: "nearby",
+    label: "Full Screen Peek",
+  },
+];
+
+export const PeekOverviewHeader: React.FC<Props> = (props) => {
+  const { handleClose, issueDetails } = props;
+
+  const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const handleCopyLink = () => {
+    const urlToCopy = window.location.href;
+
+    copyTextToClipboard(urlToCopy).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <>
+      <div className="flex justify-between items-center">
+        <div className="flex items-center gap-4">
+          {issueDetailStore.peekMode === "side" && (
+            <button type="button" onClick={handleClose}>
+              <East
+                sx={{
+                  fontSize: "14px",
+                }}
+              />
+            </button>
+          )}
+          <Listbox
+            as="div"
+            value={issueDetailStore.peekMode}
+            onChange={(val) => issueDetailStore.setPeekMode(val)}
+            className="relative flex-shrink-0 text-left"
+          >
+            <Listbox.Button
+              className={`grid place-items-center ${issueDetailStore.peekMode === "full" ? "rotate-45" : ""}`}
+            >
+              <Icon iconName={peekModes.find((m) => m.key === issueDetailStore.peekMode)?.icon ?? ""} />
+            </Listbox.Button>
+
+            <Transition
+              as={React.Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Listbox.Options className="absolute z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none left-0 origin-top-left min-w-[8rem] whitespace-nowrap">
+                <div className="space-y-1 p-2">
+                  {peekModes.map((mode) => (
+                    <Listbox.Option
+                      key={mode.key}
+                      value={mode.key}
+                      className={({ active, selected }) =>
+                        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active || selected ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <div className="flex items-center justify-between gap-2">
+                          <div className="flex items-center gap-2">
+                            <div className="flex items-center gap-1.5">
+                              <Icon
+                                iconName={mode.icon}
+                                className={`!text-base flex-shrink-0 -my-1 ${mode.key === "full" ? "rotate-45" : ""}`}
+                              />
+                              {mode.label}
+                            </div>
+                          </div>
+                          {selected && <Icon iconName="done" />}
+                        </div>
+                      )}
+                    </Listbox.Option>
+                  ))}
+                </div>
+              </Listbox.Options>
+            </Transition>
+          </Listbox>
+        </div>
+        {(issueDetailStore.peekMode === "side" || issueDetailStore.peekMode === "modal") && (
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45 focus:outline-none" tabIndex={1}>
+              <Icon iconName="link" />
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};

space/components/issues/peek-overview/index.ts

@@ -0,0 +1,12 @@
+export * from "./full-screen-peek-view";
+export * from "./header";
+export * from "./issue-activity";
+export * from "./issue-details";
+export * from "./issue-properties";
+export * from "./layout";
+export * from "./side-peek-view";
+export * from "./issue-reaction";
+export * from "./issue-vote-reactions";
+export * from "./issue-emoji-reactions";
+export * from "./comment-detail-card";
+export * from "./add-comment";

space/components/issues/peek-overview/issue-activity.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CommentCard, AddComment } from "components/issues/peek-overview";
+// ui
+import { Icon, PrimaryButton } from "components/ui";
+// types
+import { IIssue } from "types/issue";
+
+type Props = {
+  issueDetails: IIssue;
+};
+
+export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
+  const router = useRouter();
+  const { workspace_slug } = router.query;
+
+  const { issueDetails: issueDetailStore, project: projectStore, user: userStore } = useMobxStore();
+
+  const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || [];
+
+  const user = userStore?.currentUser;
+
+  return (
+    <div className="pb-10">
+      <h4 className="font-medium">Activity</h4>
+      {workspace_slug && (
+        <div className="mt-4">
+          <div className="space-y-4">
+            {comments.map((comment: any) => (
+              <CommentCard key={comment.id} comment={comment} workspaceSlug={workspace_slug?.toString()} />
+            ))}
+          </div>
+          {user ? (
+            <>
+              {projectStore.deploySettings?.comments && (
+                <div className="mt-4">
+                  <AddComment disabled={!userStore.currentUser} />
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="bg-custom-background-80 px-2 py-2.5 flex items-center justify-between gap-2 border border-custom-border-300 rounded mt-4">
+              <p className="flex gap-2 text-sm text-custom-text-200 break-words overflow-hidden">
+                <Icon iconName="lock" className="!text-sm" />
+                Sign in to add your comment
+              </p>
+              <Link href={`/?next_path=${router.asPath}`}>
+                <a>
+                  <PrimaryButton className="flex-shrink-0 !px-7">Sign in</PrimaryButton>
+                </a>
+              </Link>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});

space/components/issues/peek-overview/issue-details.tsx

@@ -0,0 +1,40 @@
+import { IssueReactions } from "components/issues/peek-overview";
+import { TipTapEditor } from "components/tiptap";
+import { useRouter } from "next/router";
+// types
+import { IIssue } from "types/issue";
+
+type Props = {
+  issueDetails: IIssue;
+};
+
+export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
+  const router = useRouter();
+  const { workspace_slug } = router.query;
+
+  return (
+    <div className="space-y-2">
+      <h6 className="font-medium text-custom-text-200">
+        {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
+      </h6>
+      <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
+      {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
+        <TipTapEditor
+          workspaceSlug={workspace_slug as string}
+          value={
+            !issueDetails.description_html ||
+            issueDetails.description_html === "" ||
+            (typeof issueDetails.description_html === "object" &&
+              Object.keys(issueDetails.description_html).length === 0)
+              ? "<p></p>"
+              : issueDetails.description_html
+          }
+          customClassName="p-3 min-h-[50px] shadow-sm"
+          debouncedUpdatesEnabled={false}
+          editable={false}
+        />
+      )}
+      <IssueReactions />
+    </div>
+  );
+};

space/components/issues/peek-overview/issue-emoji-reactions.tsx

@@ -0,0 +1,99 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// helpers
+import { groupReactions, renderEmoji } from "helpers/emoji.helper";
+// components
+import { ReactionSelector, Tooltip } from "components/ui";
+
+export const IssueEmojiReactions: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspace_slug, project_slug } = router.query;
+  // store
+  const { user: userStore, issueDetails: issueDetailsStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+  const issueId = issueDetailsStore.peekId;
+  const reactions = issueId ? issueDetailsStore.details[issueId]?.reactions || [] : [];
+  const groupedReactions = groupReactions(reactions, "reaction");
+
+  const handleReactionSelectClick = (reactionHex: string) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+    const userReaction = reactions?.find((r) => r.actor_detail.id === user?.id && r.reaction === reactionHex);
+    if (userReaction) return;
+    issueDetailsStore.addIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, reactionHex);
+  };
+
+  const handleReactionClick = (reactionHex: string) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+    issueDetailsStore.removeIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, reactionHex);
+  };
+
+  useEffect(() => {
+    if (user) return;
+    userStore.fetchCurrentUser();
+  }, [user, userStore]);
+
+  return (
+    <>
+      <ReactionSelector
+        onSelect={(value) => {
+          userStore.requiredLogin(() => {
+            handleReactionSelectClick(value);
+          });
+        }}
+        size="md"
+      />
+      <div className="flex items-center gap-2 flex-wrap">
+        {Object.keys(groupedReactions || {}).map((reaction) => {
+          const reactions = groupedReactions?.[reaction] ?? [];
+          const REACTIONS_LIMIT = 1000;
+
+          if (reactions.length > 0)
+            return (
+              <Tooltip
+                key={reaction}
+                tooltipContent={
+                  <div>
+                    {reactions
+                      .map((r) => r.actor_detail.display_name)
+                      .splice(0, REACTIONS_LIMIT)
+                      .join(", ")}
+                    {reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
+                  </div>
+                }
+              >
+                <button
+                  type="button"
+                  onClick={() => {
+                    userStore.requiredLogin(() => {
+                      handleReactionClick(reaction);
+                    });
+                  }}
+                  className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
+                    reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
+                      ? "bg-custom-primary-100/10"
+                      : "bg-custom-background-80"
+                  }`}
+                >
+                  <span>{renderEmoji(reaction)}</span>
+                  <span
+                    className={
+                      reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
+                        ? "text-custom-primary-100"
+                        : ""
+                    }
+                  >
+                    {groupedReactions?.[reaction].length}{" "}
+                  </span>
+                </button>
+              </Tooltip>
+            );
+        })}
+      </div>
+    </>
+  );
+});

space/components/issues/peek-overview/issue-properties.tsx

@@ -0,0 +1,142 @@
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { Icon } from "components/ui";
+import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
+// helpers
+import { renderDateFormat } from "constants/helpers";
+// types
+import { IIssue } from "types/issue";
+import { IPeekMode } from "store/issue_details";
+// constants
+import { issueGroupFilter, issuePriorityFilter } from "constants/data";
+
+type Props = {
+  issueDetails: IIssue;
+  mode?: IPeekMode;
+};
+
+const validDate = (date: any, state: string): string => {
+  if (date === null || ["backlog", "unstarted", "cancelled"].includes(state))
+    return `bg-gray-500/10 text-gray-500 border-gray-500/50`;
+  else {
+    const today = new Date();
+    const dueDate = new Date(date);
+
+    if (dueDate < today) return `bg-red-500/10 text-red-500 border-red-500/50`;
+    else return `bg-green-500/10 text-green-500 border-green-500/50`;
+  }
+};
+
+export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mode }) => {
+  const { setToastAlert } = useToast();
+
+  const startDate = issueDetails.start_date;
+  const targetDate = issueDetails.target_date;
+
+  const minDate = startDate ? new Date(startDate) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = targetDate ? new Date(targetDate) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  const state = issueDetails.state_detail;
+  const stateGroup = issueGroupFilter(state.group);
+
+  const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null;
+
+  const handleCopyLink = () => {
+    const urlToCopy = window.location.href;
+
+    copyTextToClipboard(urlToCopy).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link copied!",
+        message: "Issue link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
+      {mode === "full" && (
+        <div className="flex justify-between gap-2 pb-3">
+          <h6 className="flex items-center gap-2 font-medium">
+            {/* {getStateGroupIcon(issue.state_detail.group, "16", "16", issue.state_detail.color)} */}
+            {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
+          </h6>
+          <div className="flex items-center gap-2">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45">
+              <Icon iconName="link" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="radio_button_checked" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">State</span>
+          </div>
+          <div className="w-3/4">
+            {stateGroup && (
+              <div className="inline-flex bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
+                <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+                  <stateGroup.icon />
+                  {addSpaceIfCamelCase(state?.name ?? "")}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Priority</span>
+          </div>
+          <div className="w-3/4">
+            <div
+              className={`inline-flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
+                priority?.key === "urgent"
+                  ? "border-red-500/20 bg-red-500/20 text-red-500"
+                  : priority?.key === "high"
+                  ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                  : priority?.key === "medium"
+                  ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                  : priority?.key === "low"
+                  ? "border-green-500/20 bg-green-500/20 text-green-500"
+                  : "bg-custom-background-80 border-custom-border-200"
+              }`}
+            >
+              {priority && (
+                <span className="grid place-items-center -my-1">
+                  <Icon iconName={priority?.icon!} />
+                </span>
+              )}
+              <span>{priority?.title ?? "None"}</span>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
+            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <span className="flex-grow truncate">Due date</span>
+          </div>
+          <div>
+            {issueDetails.target_date ? (
+              <div
+                className={`h-[24px] rounded-md flex px-2.5 py-1 items-center border border-custom-border-100 gap-1 text-custom-text-100 text-xs font-medium 
+                ${validDate(issueDetails.target_date, state)}`}
+              >
+                {renderDateFormat(issueDetails.target_date)}
+              </div>
+            ) : (
+              <span className="text-custom-text-200">Empty</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

space/components/issues/peek-overview/issue-reaction.tsx

@@ -0,0 +1,24 @@
+import { IssueEmojiReactions, IssueVotes } from "components/issues/peek-overview";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const IssueReactions: React.FC = () => {
+  const { project: projectStore } = useMobxStore();
+
+  return (
+    <div className="flex gap-3 items-center mt-4">
+      {projectStore?.deploySettings?.votes && (
+        <>
+          <div className="flex gap-2 items-center">
+            <IssueVotes />
+          </div>
+          <div className="w-0.5 h-8 bg-custom-background-200" />
+        </>
+      )}
+      {projectStore?.deploySettings?.reactions && (
+        <div className="flex gap-2 items-center">
+          <IssueEmojiReactions />
+        </div>
+      )}
+    </div>
+  );
+};

space/components/issues/peek-overview/issue-vote-reactions.tsx

@@ -0,0 +1,129 @@
+import { useState, useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+import { Tooltip } from "components/ui";
+
+export const IssueVotes: React.FC = observer(() => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const router = useRouter();
+
+  const { workspace_slug, project_slug } = router.query;
+
+  const { user: userStore, issueDetails: issueDetailsStore } = useMobxStore();
+
+  const user = userStore?.currentUser;
+  const issueId = issueDetailsStore.peekId;
+
+  const votes = issueId ? issueDetailsStore.details[issueId]?.votes : [];
+
+  const allUpVotes = votes?.filter((vote) => vote.vote === 1);
+  const allDownVotes = votes?.filter((vote) => vote.vote === -1);
+
+  const isUpVotedByUser = allUpVotes?.some((vote) => vote.actor === user?.id);
+  const isDownVotedByUser = allDownVotes?.some((vote) => vote.actor === user?.id);
+
+  const handleVote = async (e: any, voteValue: 1 | -1) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+
+    setIsSubmitting(true);
+
+    const actionPerformed = votes?.find((vote) => vote.actor === user?.id && vote.vote === voteValue);
+
+    if (actionPerformed)
+      await issueDetailsStore.removeIssueVote(workspace_slug.toString(), project_slug.toString(), issueId);
+    else
+      await issueDetailsStore.addIssueVote(workspace_slug.toString(), project_slug.toString(), issueId, {
+        vote: voteValue,
+      });
+
+    setIsSubmitting(false);
+  };
+
+  useEffect(() => {
+    if (user) return;
+
+    userStore.fetchCurrentUser();
+  }, [user, userStore]);
+
+  const VOTES_LIMIT = 1000;
+
+  return (
+    <div className="flex gap-2 items-center">
+      {/* upvote button 👇 */}
+      <Tooltip
+        tooltipContent={
+          <div>
+            {allUpVotes.length > 0 ? (
+              <>
+                {allUpVotes
+                  .map((r) => r.actor_detail.display_name)
+                  .splice(0, VOTES_LIMIT)
+                  .join(", ")}
+                {allUpVotes.length > VOTES_LIMIT && " and " + (allUpVotes.length - VOTES_LIMIT) + " more"}
+              </>
+            ) : (
+              "No upvotes yet"
+            )}
+          </div>
+        }
+      >
+        <button
+          type="button"
+          disabled={isSubmitting}
+          onClick={(e) => {
+            userStore.requiredLogin(() => {
+              handleVote(e, 1);
+            });
+          }}
+          className={`flex items-center justify-center overflow-hidden px-2 gap-x-1 border rounded focus:outline-none ${
+            isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
+          }`}
+        >
+          <span className="material-symbols-rounded text-base !p-0 !m-0">arrow_upward_alt</span>
+          <span className="text-sm font-normal transition-opacity ease-in-out">{allUpVotes.length}</span>
+        </button>
+      </Tooltip>
+
+      {/* downvote button 👇 */}
+      <Tooltip
+        tooltipContent={
+          <div>
+            {allDownVotes.length > 0 ? (
+              <>
+                {allDownVotes
+                  .map((r) => r.actor_detail.display_name)
+                  .splice(0, VOTES_LIMIT)
+                  .join(", ")}
+                {allDownVotes.length > VOTES_LIMIT && " and " + (allDownVotes.length - VOTES_LIMIT) + " more"}
+              </>
+            ) : (
+              "No downvotes yet"
+            )}
+          </div>
+        }
+      >
+        <button
+          type="button"
+          disabled={isSubmitting}
+          onClick={(e) => {
+            userStore.requiredLogin(() => {
+              handleVote(e, -1);
+            });
+          }}
+          className={`flex items-center justify-center overflow-hidden px-2 gap-x-1 border rounded focus:outline-none ${
+            isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"
+          }`}
+        >
+          <span className="material-symbols-rounded text-base !p-0 !m-0">arrow_downward_alt</span>
+          <span className="text-sm font-normal transition-opacity ease-in-out">{allDownVotes.length}</span>
+        </button>
+      </Tooltip>
+    </div>
+  );
+});