style: project settings layout for mobile screens

apiserver/Dockerfile.api

@@ -41,7 +41,6 @@ USER captain
 
 # Add in Django deps and generate Django's static files
 COPY manage.py manage.py
-COPY server.py server.py
 COPY plane plane/
 COPY templates templates/
 COPY package.json package.json

apiserver/bin/takeoff

@@ -28,4 +28,4 @@ python manage.py configure_instance
 # Create the default bucket
 python manage.py create_bucket
 
-python server.py
+exec gunicorn -w $GUNICORN_WORKERS -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:${PORT:-8000} --max-requests 1200 --max-requests-jitter 1000 --access-logfile -

apiserver/plane/api/views/cycle.py

@@ -243,29 +243,6 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
         ):
             serializer = CycleSerializer(data=request.data)
             if serializer.is_valid():
-                if (
-                    request.data.get("external_id")
-                    and request.data.get("external_source")
-                    and Cycle.objects.filter(
-                        project_id=project_id,
-                        workspace__slug=slug,
-                        external_source=request.data.get("external_source"),
-                        external_id=request.data.get("external_id"),
-                    ).exists()
-                ):
-                    cycle = Cycle.objects.filter(
-                        workspace__slug=slug,
-                        project_id=project_id,
-                        external_source=request.data.get("external_source"),
-                        external_id=request.data.get("external_id"),
-                    ).first()
-                    return Response(
-                        {
-                            "error": "Cycle with the same external id and external source already exists",
-                            "id": str(cycle.id),
-                        },
-                        status=status.HTTP_409_CONFLICT,
-                    )
                 serializer.save(
                     project_id=project_id,
                     owned_by=request.user,
@@ -312,23 +289,6 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
 
         serializer = CycleSerializer(cycle, data=request.data, partial=True)
         if serializer.is_valid():
-            if (
-                request.data.get("external_id")
-                and (cycle.external_id != request.data.get("external_id"))
-                and Cycle.objects.filter(
-                    project_id=project_id,
-                    workspace__slug=slug,
-                    external_source=request.data.get("external_source", cycle.external_source),
-                    external_id=request.data.get("external_id"),
-                ).exists()
-            ):
-                return Response(
-                    {
-                        "error": "Cycle with the same external id and external source already exists",
-                        "id": str(cycle.id),
-                    },
-                    status=status.HTTP_409_CONFLICT,
-                )
             serializer.save()
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

apiserver/plane/api/views/issue.py

@@ -220,30 +220,6 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
         )
 
         if serializer.is_valid():
-            if (
-                request.data.get("external_id")
-                and request.data.get("external_source")
-                and Issue.objects.filter(
-                    project_id=project_id,
-                    workspace__slug=slug,
-                    external_source=request.data.get("external_source"),
-                    external_id=request.data.get("external_id"),
-                ).exists()
-            ):
-                issue = Issue.objects.filter(
-                    workspace__slug=slug,
-                    project_id=project_id,
-                    external_id=request.data.get("external_id"),
-                    external_source=request.data.get("external_source"),
-                ).first()
-                return Response(
-                    {
-                        "error": "Issue with the same external id and external source already exists",
-                        "id": str(issue.id),
-                    },
-                    status=status.HTTP_409_CONFLICT,
-                )
-
             serializer.save()
 
             # Track the issue
@@ -280,26 +256,6 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
             partial=True,
         )
         if serializer.is_valid():
-            if (
-                str(request.data.get("external_id"))
-                and (issue.external_id != str(request.data.get("external_id")))
-                and Issue.objects.filter(
-                    project_id=project_id,
-                    workspace__slug=slug,
-                    external_source=request.data.get(
-                        "external_source", issue.external_source
-                    ),
-                    external_id=request.data.get("external_id"),
-                ).exists()
-            ):
-                return Response(
-                    {
-                        "error": "Issue with the same external id and external source already exists",
-                        "id": str(issue.id),
-                    },
-                    status=status.HTTP_409_CONFLICT,
-                )
-
             serializer.save()
             issue_activity.delay(
                 type="issue.activity.updated",
@@ -307,8 +263,6 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
                 actor_id=str(request.user.id),
                 issue_id=str(pk),
                 project_id=str(project_id),
-                external_id__isnull=False,
-                external_source__isnull=False,
                 current_instance=current_instance,
                 epoch=int(timezone.now().timestamp()),
             )
@@ -364,30 +318,6 @@ class LabelAPIEndpoint(BaseAPIView):
         try:
             serializer = LabelSerializer(data=request.data)
             if serializer.is_valid():
-                if (
-                    request.data.get("external_id")
-                    and request.data.get("external_source")
-                    and Label.objects.filter(
-                        project_id=project_id,
-                        workspace__slug=slug,
-                        external_source=request.data.get("external_source"),
-                        external_id=request.data.get("external_id"),
-                    ).exists()
-                ):
-                    label = Label.objects.filter(
-                        workspace__slug=slug,
-                        project_id=project_id,
-                        external_id=request.data.get("external_id"),
-                        external_source=request.data.get("external_source"),
-                    ).first()
-                    return Response(
-                        {
-                            "error": "Label with the same external id and external source already exists",
-                            "id": str(label.id),
-                        },
-                        status=status.HTTP_409_CONFLICT,
-                    )
-
                 serializer.save(project_id=project_id)
                 return Response(
                     serializer.data, status=status.HTTP_201_CREATED
@@ -396,17 +326,11 @@ class LabelAPIEndpoint(BaseAPIView):
                 serializer.errors, status=status.HTTP_400_BAD_REQUEST
             )
         except IntegrityError:
-            label = Label.objects.filter(
-                workspace__slug=slug,
-                project_id=project_id,
-                name=request.data.get("name"),
-            ).first()
             return Response(
                 {
-                    "error": "Label with the same name already exists in the project",
-                    "id": str(label.id),
+                    "error": "Label with the same name already exists in the project"
                 },
-                status=status.HTTP_409_CONFLICT,
+                status=status.HTTP_400_BAD_REQUEST,
             )
 
     def get(self, request, slug, project_id, pk=None):
@@ -433,25 +357,6 @@ class LabelAPIEndpoint(BaseAPIView):
         label = self.get_queryset().get(pk=pk)
         serializer = LabelSerializer(label, data=request.data, partial=True)
         if serializer.is_valid():
-            if (
-                str(request.data.get("external_id"))
-                and (label.external_id != str(request.data.get("external_id")))
-                and Issue.objects.filter(
-                    project_id=project_id,
-                    workspace__slug=slug,
-                    external_source=request.data.get(
-                        "external_source", label.external_source
-                    ),
-                    external_id=request.data.get("external_id"),
-                ).exists()
-            ):
-                return Response(
-                    {
-                        "error": "Label with the same external id and external source already exists",
-                        "id": str(label.id),
-                    },
-                    status=status.HTTP_409_CONFLICT,
-                )
             serializer.save()
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

apiserver/plane/api/views/module.py

@@ -132,29 +132,6 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
             },
         )
         if serializer.is_valid():
-            if (
-                request.data.get("external_id")
-                and request.data.get("external_source")
-                and Module.objects.filter(
-                    project_id=project_id,
-                    workspace__slug=slug,
-                    external_source=request.data.get("external_source"),
-                    external_id=request.data.get("external_id"),
-                ).exists()
-            ):
-                module = Module.objects.filter(
-                    project_id=project_id,
-                    workspace__slug=slug,
-                    external_source=request.data.get("external_source"),
-                    external_id=request.data.get("external_id"),
-                ).first()
-                return Response(
-                    {
-                        "error": "Module with the same external id and external source already exists",
-                        "id": str(module.id),
-                    },
-                    status=status.HTTP_409_CONFLICT,
-                )
             serializer.save()
             module = Module.objects.get(pk=serializer.data["id"])
             serializer = ModuleSerializer(module)
@@ -172,25 +149,8 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
             partial=True,
         )
         if serializer.is_valid():
-            if (
-                request.data.get("external_id")
-                and (module.external_id != request.data.get("external_id"))
-                and Module.objects.filter(
-                    project_id=project_id,
-                    workspace__slug=slug,
-                    external_source=request.data.get("external_source", module.external_source),
-                    external_id=request.data.get("external_id"),
-                ).exists()
-            ):
-                return Response(
-                    {
-                        "error": "Module with the same external id and external source already exists",
-                        "id": str(module.id),
-                    },
-                    status=status.HTTP_409_CONFLICT,
-                )
             serializer.save()
-            return Response(serializer.data, status=status.HTTP_200_OK)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def get(self, request, slug, project_id, pk=None):

apiserver/plane/api/views/state.py

@@ -38,30 +38,6 @@ class StateAPIEndpoint(BaseAPIView):
             data=request.data, context={"project_id": project_id}
         )
         if serializer.is_valid():
-            if (
-                request.data.get("external_id")
-                and request.data.get("external_source")
-                and State.objects.filter(
-                    project_id=project_id,
-                    workspace__slug=slug,
-                    external_source=request.data.get("external_source"),
-                    external_id=request.data.get("external_id"),
-                ).exists()
-            ):
-                state = State.objects.filter(
-                    workspace__slug=slug,
-                    project_id=project_id,
-                    external_id=request.data.get("external_id"),
-                    external_source=request.data.get("external_source"),
-                ).first()
-                return Response(
-                    {
-                        "error": "State with the same external id and external source already exists",
-                        "id": str(state.id),
-                    },
-                    status=status.HTTP_409_CONFLICT,
-                )
-
             serializer.save(project_id=project_id)
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -115,23 +91,6 @@ class StateAPIEndpoint(BaseAPIView):
         )
         serializer = StateSerializer(state, data=request.data, partial=True)
         if serializer.is_valid():
-            if (
-                str(request.data.get("external_id"))
-                and (state.external_id != str(request.data.get("external_id")))
-                and State.objects.filter(
-                    project_id=project_id,
-                    workspace__slug=slug,
-                    external_source=request.data.get("external_source", state.external_source),
-                    external_id=request.data.get("external_id"),
-                ).exists()
-            ):
-                return Response(
-                    {
-                        "error": "State with the same external id and external source already exists",
-                        "id": str(state.id),
-                    },
-                    status=status.HTTP_409_CONFLICT,
-                )
             serializer.save()
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

apiserver/plane/app/serializers/cycle.py

@@ -33,6 +33,7 @@ class CycleWriteSerializer(BaseSerializer):
 
 
 class CycleSerializer(BaseSerializer):
+    owned_by = UserLiteSerializer(read_only=True)
     is_favorite = serializers.BooleanField(read_only=True)
     total_issues = serializers.IntegerField(read_only=True)
     cancelled_issues = serializers.IntegerField(read_only=True)

apiserver/plane/app/views/cycle.py

@@ -242,13 +242,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     .values("display_name", "assignee_id", "avatar")
                     .annotate(
                         total_issues=Count(
-                            "id",
+                            "assignee_id",
                             filter=Q(archived_at__isnull=True, is_draft=False),
                         ),
                     )
                     .annotate(
                         completed_issues=Count(
-                            "id",
+                            "assignee_id",
                             filter=Q(
                                 completed_at__isnull=False,
                                 archived_at__isnull=True,
@@ -258,7 +258,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     )
                     .annotate(
                         pending_issues=Count(
-                            "id",
+                            "assignee_id",
                             filter=Q(
                                 completed_at__isnull=True,
                                 archived_at__isnull=True,
@@ -281,13 +281,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     .values("label_name", "color", "label_id")
                     .annotate(
                         total_issues=Count(
-                            "id",
+                            "label_id",
                             filter=Q(archived_at__isnull=True, is_draft=False),
                         )
                     )
                     .annotate(
                         completed_issues=Count(
-                            "id",
+                            "label_id",
                             filter=Q(
                                 completed_at__isnull=False,
                                 archived_at__isnull=True,
@@ -297,7 +297,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     )
                     .annotate(
                         pending_issues=Count(
-                            "id",
+                            "label_id",
                             filter=Q(
                                 completed_at__isnull=True,
                                 archived_at__isnull=True,
@@ -419,13 +419,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 total_issues=Count(
-                    "id",
+                    "assignee_id",
                     filter=Q(archived_at__isnull=True, is_draft=False),
                 ),
             )
             .annotate(
                 completed_issues=Count(
-                    "id",
+                    "assignee_id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -435,7 +435,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "id",
+                    "assignee_id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,
@@ -459,13 +459,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             .values("label_name", "color", "label_id")
             .annotate(
                 total_issues=Count(
-                    "id",
+                    "label_id",
                     filter=Q(archived_at__isnull=True, is_draft=False),
                 ),
             )
             .annotate(
                 completed_issues=Count(
-                    "id",
+                    "label_id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -475,7 +475,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "id",
+                    "label_id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,

apiserver/plane/app/views/dashboard.py

@@ -145,23 +145,6 @@ def dashboard_assigned_issues(self, request, slug):
         )
     ).order_by("priority_order")
 
-    if issue_type == "pending":
-        pending_issues_count = assigned_issues.filter(
-            state__group__in=["backlog", "started", "unstarted"]
-        ).count()
-        pending_issues = assigned_issues.filter(
-            state__group__in=["backlog", "started", "unstarted"]
-        )[:5]
-        return Response(
-            {
-                "issues": IssueSerializer(
-                    pending_issues, many=True, expand=self.expand
-                ).data,
-                "count": pending_issues_count,
-            },
-            status=status.HTTP_200_OK,
-        )
-
     if issue_type == "completed":
         completed_issues_count = assigned_issues.filter(
             state__group__in=["completed"]
@@ -274,23 +257,6 @@ def dashboard_created_issues(self, request, slug):
         )
     ).order_by("priority_order")
 
-    if issue_type == "pending":
-        pending_issues_count = created_issues.filter(
-            state__group__in=["backlog", "started", "unstarted"]
-        ).count()
-        pending_issues = created_issues.filter(
-            state__group__in=["backlog", "started", "unstarted"]
-        )[:5]
-        return Response(
-            {
-                "issues": IssueSerializer(
-                    pending_issues, many=True, expand=self.expand
-                ).data,
-                "count": pending_issues_count,
-            },
-            status=status.HTTP_200_OK,
-        )
-
     if issue_type == "completed":
         completed_issues_count = created_issues.filter(
             state__group__in=["completed"]

apiserver/plane/app/views/module.py

@@ -197,7 +197,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 total_issues=Count(
-                    "id",
+                    "assignee_id",
                     filter=Q(
                         archived_at__isnull=True,
                         is_draft=False,
@@ -206,7 +206,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 completed_issues=Count(
-                    "id",
+                    "assignee_id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -216,7 +216,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "id",
+                    "assignee_id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,
@@ -239,7 +239,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             .values("label_name", "color", "label_id")
             .annotate(
                 total_issues=Count(
-                    "id",
+                    "label_id",
                     filter=Q(
                         archived_at__isnull=True,
                         is_draft=False,
@@ -248,7 +248,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 completed_issues=Count(
-                    "id",
+                    "label_id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -258,7 +258,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "id",
+                    "label_id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,

apiserver/plane/bgtasks/email_notification_task.py

@@ -186,7 +186,7 @@ def send_email_notification(
                 }
         )
 
-    summary = "Updates were made to the issue by"
+    summary = "updates were made to the issue by"
 
     # Send the mail
     subject = f"{issue.project.identifier}-{issue.sequence_id} {issue.name}"

apiserver/plane/bgtasks/issue_activites_task.py

@@ -353,18 +353,13 @@ def track_assignees(
     issue_activities,
     epoch,
 ):
-    requested_assignees = (
-        set([str(asg) for asg in requested_data.get("assignee_ids", [])])
-        if requested_data is not None
-        else set()
+    requested_assignees = set(
+        [str(asg) for asg in requested_data.get("assignee_ids", [])]
     )
-    current_assignees = (
-        set([str(asg) for asg in current_instance.get("assignee_ids", [])])
-        if current_instance is not None
-        else set()
+    current_assignees = set(
+        [str(asg) for asg in current_instance.get("assignee_ids", [])]
     )
 
-
     added_assignees = requested_assignees - current_assignees
     dropped_assginees = current_assignees - requested_assignees
 
@@ -552,20 +547,6 @@ def create_issue_activity(
             epoch=epoch,
         )
     )
-    requested_data = (
-        json.loads(requested_data) if requested_data is not None else None
-    )
-    if requested_data.get("assignee_ids") is not None:
-        track_assignees(
-            requested_data,
-            current_instance,
-            issue_id,
-            project_id,
-            workspace_id,
-            actor_id,
-            issue_activities,
-            epoch,
-        )
 
 
 def update_issue_activity(

apiserver/plane/db/models/user.py

@@ -172,9 +172,4 @@ def create_user_notification(sender, instance, created, **kwargs):
         from plane.db.models import UserNotificationPreference
         UserNotificationPreference.objects.create(
             user=instance,
-            property_change=False,
-            state_change=False,
-            comment=False,
-            mention=False,
-            issue_completed=False,
         )

apiserver/server.py

@@ -1,17 +0,0 @@
-import os
-import uvicorn
-
-if __name__ == "__main__":
-    os.environ.setdefault(
-        "DJANGO_SETTINGS_MODULE", "plane.settings.production"
-    )
-    uvicorn.run(
-        "plane.asgi:application",
-        host=os.environ.get("HOST", "0.0.0.0"),
-        port=os.environ.get("PORT", 8000),
-        ws="auto",
-        workers=int(os.environ.get("GUNICORN_WORKERS", 1)),
-        log_level=os.environ.get("LOG_LEVEL", "info"),
-        lifespan="off",
-        access_log="on",
-    )

apiserver/templates/emails/notifications/issue-updates.html

@@ -108,33 +108,14 @@
                   margin-bottom: 15px;
                   "
                   />
-               {% if actors_involved == 1 %}
-               <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
-                  {{summary}}
-                  <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
-                  {{ data.0.actor_detail.first_name}}
-                  {{data.0.actor_detail.last_name}}
-                  </span>.
-               </p>
-               {% else %}
-               <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
-                  {{summary}}
-                  <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
-                  {{ data.0.actor_detail.first_name}}
-                  {{data.0.actor_detail.last_name }}
-                  </span>and others.
-               </p>
-               {% endif %}
-
-
-               <!-- {% if actors_involved == 1 %}
+               {% if actors_involved > 0 %}
                {% if data|length > 0 and comments|length == 0 %}
                <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
                   <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
                   {{ data.0.actor_detail.first_name}}
                   {{data.0.actor_detail.last_name }}
                   </span>
-                  made {{total_updates}} {% if total_updates > 1 %}updates{% else %}update{% endif %} to the issue.
+                  made {{data|length}} {% if data|length > 1 %}updates{% else %}update{% endif %} to the issue.
                </p>
                {% elif data|length == 0 and comments|length > 0 %}
                <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
@@ -142,7 +123,7 @@
                   {{ comments.0.actor_detail.first_name}}
                   {{comments.0.actor_detail.last_name }}
                   </span>
-                  added {{total_comments}} new {% if total_comments > 1 %}comments{% else %}comment{% endif %}.
+                  added {{comments|length}} new {% if comments|length > 1 %}comments{% else %}comment{% endif %}.
                </p>
                {% elif data|length > 0 and comments|length > 0 %}
                <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
@@ -150,14 +131,14 @@
                   {{ data.0.actor_detail.first_name}}
                   {{data.0.actor_detail.last_name }}
                   </span>
-                  made {{total_updates}} {% if total_updates > 1 %}updates{% else %}update{% endif %} and added {{total_comments}} new {% if total_comments > 1 %}comments{% else %}comment{% endif %} on the issue.
+                  made {{data|length}} {% if data|length > 1 %}updates{% else %}update{% endif %} and added {{comments|length}} new {% if comments|length > 1 %}comments{% else %}comment{% endif %} on the issue.
                </p>
                {% endif %}
                {% else %}
                <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
-                  There are {{ total_updates }} new updates and {{total_comments}} new comments on the issue.
+                  There are {{ data|length }} new updates and {{comments|length}} new comments on the issue
                </p>
-               {% endif %} -->
+               {% endif %}
                {% for update in data %} {% if update.changes.name %}
                <!-- Issue title updated -->
                <p style="font-size: 1rem; line-height: 28px; color: #1f2d5c">

deploy/selfhost/install.sh

@@ -49,7 +49,7 @@ function buildLocalImage() {
         cd $PLANE_TEMP_CODE_DIR
         if [ "$BRANCH" == "master" ];
         then
-            export APP_RELEASE=latest
+            APP_RELEASE=latest
         fi
 
         docker compose -f build.yml build --no-cache  >&2
@@ -205,11 +205,6 @@ else
     PULL_POLICY=never
 fi
 
-if [ "$BRANCH" == "master" ];
-then
-    export APP_RELEASE=latest
-fi
-
 # REMOVE SPECIAL CHARACTERS FROM BRANCH NAME
 if [ "$BRANCH" != "master" ];
 then

packages/editor/core/src/ui/extensions/horizontal-rule.tsx

@@ -0,0 +1,109 @@
+import { TextSelection } from "prosemirror-state";
+
+import { InputRule, mergeAttributes, Node, nodeInputRule, wrappingInputRule } from "@tiptap/core";
+
+/**
+ * Extension based on:
+ * - Tiptap HorizontalRule extension (https://tiptap.dev/api/nodes/horizontal-rule)
+ */
+
+export interface HorizontalRuleOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    horizontalRule: {
+      /**
+       * Add a horizontal rule
+       */
+      setHorizontalRule: () => ReturnType;
+    };
+  }
+}
+
+export const HorizontalRule = Node.create<HorizontalRuleOptions>({
+  name: "horizontalRule",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  group: "block",
+
+  addAttributes() {
+    return {
+      color: {
+        default: "#dddddd",
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`,
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": this.name,
+      }),
+      ["div", {}],
+    ];
+  },
+
+  addCommands() {
+    return {
+      setHorizontalRule:
+        () =>
+        ({ chain }) => {
+          return (
+            chain()
+              .insertContent({ type: this.name })
+              // set cursor after horizontal rule
+              .command(({ tr, dispatch }) => {
+                if (dispatch) {
+                  const { $to } = tr.selection;
+                  const posAfter = $to.end();
+
+                  if ($to.nodeAfter) {
+                    tr.setSelection(TextSelection.create(tr.doc, $to.pos));
+                  } else {
+                    // add node after horizontal rule if it’s the end of the document
+                    const node = $to.parent.type.contentMatch.defaultType?.create();
+
+                    if (node) {
+                      tr.insert(posAfter, node);
+                      tr.setSelection(TextSelection.create(tr.doc, posAfter));
+                    }
+                  }
+
+                  tr.scrollIntoView();
+                }
+
+                return true;
+              })
+              .run()
+          );
+        },
+    };
+  },
+
+  addInputRules() {
+    return [
+      new InputRule({
+        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+        handler: ({ state, range, match }) => {
+          state.tr.replaceRangeWith(range.from, range.to, this.type.create());
+        },
+      }),
+    ];
+  },
+});

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

@@ -1,25 +1,26 @@
+import StarterKit from "@tiptap/starter-kit";
+import TiptapUnderline from "@tiptap/extension-underline";
+import TextStyle from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
-import TextStyle from "@tiptap/extension-text-style";
-import TiptapUnderline from "@tiptap/extension-underline";
-import StarterKit from "@tiptap/starter-kit";
 import { Markdown } from "tiptap-markdown";
 
+import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
 import { Table } from "src/ui/extensions/table/table";
 import { TableCell } from "src/ui/extensions/table/table-cell/table-cell";
-import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
 import { TableRow } from "src/ui/extensions/table/table-row/table-row";
+import { HorizontalRule } from "src/ui/extensions/horizontal-rule";
 
 import { ImageExtension } from "src/ui/extensions/image";
 
 import { isValidHttpUrl } from "src/lib/utils";
 import { Mentions } from "src/ui/mentions";
 
-import { CustomCodeBlockExtension } from "src/ui/extensions/code";
-import { ListKeymap } from "src/ui/extensions/custom-list-keymap";
 import { CustomKeymap } from "src/ui/extensions/keymap";
+import { CustomCodeBlockExtension } from "src/ui/extensions/code";
 import { CustomQuoteExtension } from "src/ui/extensions/quote";
+import { ListKeymap } from "src/ui/extensions/custom-list-keymap";
 
 import { DeleteImage } from "src/types/delete-image";
 import { IMentionSuggestion } from "src/types/mention-suggestion";
@@ -54,9 +55,7 @@ export const CoreEditorExtensions = (
     },
     code: false,
     codeBlock: false,
-    horizontalRule: {
-      HTMLAttributes: { class: "mt-4 mb-4" },
-    },
+    horizontalRule: false,
     blockquote: false,
     dropcursor: {
       color: "rgba(var(--color-text-100))",
@@ -105,6 +104,7 @@ export const CoreEditorExtensions = (
     transformCopiedText: true,
     transformPastedText: true,
   }),
+  HorizontalRule,
   Table,
   TableHeader,
   TableCell,

packages/editor/core/src/ui/mentions/custom.tsx

@@ -10,11 +10,6 @@ export interface CustomMentionOptions extends MentionOptions {
 }
 
 export const CustomMention = Mention.extend<CustomMentionOptions>({
-  addStorage(this) {
-    return {
-      mentionsOpen: false,
-    };
-  },
   addAttributes() {
     return {
       id: {

packages/editor/core/src/ui/mentions/suggestion.ts

@@ -14,7 +14,6 @@ export const Suggestion = (suggestions: IMentionSuggestion[]) => ({
 
     return {
       onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
-        props.editor.storage.mentionsOpen = true;
         reactRenderer = new ReactRenderer(MentionList, {
           props,
           editor: props.editor,
@@ -46,18 +45,10 @@ export const Suggestion = (suggestions: IMentionSuggestion[]) => ({
           return true;
         }
 
-        const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
-
-        if (navigationKeys.includes(props.event.key)) {
-          // @ts-ignore
-          reactRenderer?.ref?.onKeyDown(props);
-          event?.stopPropagation();
-          return true;
-        }
-        return false;
+        // @ts-ignore
+        return reactRenderer?.ref?.onKeyDown(props);
       },
-      onExit: (props: { editor: Editor; event: KeyboardEvent }) => {
-        props.editor.storage.mentionsOpen = false;
+      onExit: () => {
         popup?.[0].destroy();
         reactRenderer?.destroy();
       },

packages/editor/core/src/ui/read-only/extensions.tsx

@@ -11,6 +11,7 @@ import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
 import { Table } from "src/ui/extensions/table/table";
 import { TableCell } from "src/ui/extensions/table/table-cell/table-cell";
 import { TableRow } from "src/ui/extensions/table/table-row/table-row";
+import { HorizontalRule } from "src/ui/extensions/horizontal-rule";
 
 import { ReadOnlyImageExtension } from "src/ui/extensions/image/read-only-image";
 import { isValidHttpUrl } from "src/lib/utils";
@@ -50,9 +51,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
       },
     },
     codeBlock: false,
-    horizontalRule: {
-      HTMLAttributes: { class: "mt-4 mb-4" },
-    },
+    horizontalRule: false,
     dropcursor: {
       color: "rgba(var(--color-text-100))",
       width: 2,
@@ -73,6 +72,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
       class: "rounded-lg border border-custom-border-300",
     },
   }),
+  HorizontalRule,
   TiptapUnderline,
   TextStyle,
   Color,

packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx

@@ -4,16 +4,13 @@ export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
   Extension.create({
     name: "enterKey",
 
-    addKeyboardShortcuts(this) {
+    addKeyboardShortcuts() {
       return {
         Enter: () => {
-          if (!this.editor.storage.mentionsOpen) {
-            if (onEnterKeyPress) {
-              onEnterKeyPress();
-            }
-            return true;
+          if (onEnterKeyPress) {
+            onEnterKeyPress();
           }
-          return false;
+          return true;
         },
         "Shift-Enter": ({ editor }) =>
           editor.commands.first(({ commands }) => [

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

@@ -1,3 +1,5 @@
 import { EnterKeyExtension } from "src/ui/extensions/enter-key-extension";
 
-export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [EnterKeyExtension(onEnterKeyPress)];
+export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [
+  // EnterKeyExtension(onEnterKeyPress),
+];

packages/types/src/cycles.d.ts

@@ -30,7 +30,7 @@ export interface ICycle {
   is_favorite: boolean;
   issue: string;
   name: string;
-  owned_by: string;
+  owned_by: IUser;
   project: string;
   project_detail: IProjectLite;
   status: TCycleGroups;

packages/types/src/dashboard.d.ts

@@ -13,10 +13,9 @@ export type TWidgetKeys =
   | "recent_projects"
   | "recent_collaborators";
 
-export type TIssuesListTypes = "pending" | "upcoming" | "overdue" | "completed";
+export type TIssuesListTypes = "upcoming" | "overdue" | "completed";
 
 export type TDurationFilterOptions =
-  | "none"
   | "today"
   | "this_week"
   | "this_month"

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 
 // icons
 import { ChevronRight } from "lucide-react";
+// components
+import { Tooltip } from "../tooltip";
 
 type BreadcrumbsProps = {
   children: any;
@@ -23,11 +25,42 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
 type Props = {
   type?: "text" | "component";
   component?: React.ReactNode;
-  link?: JSX.Element;
+  label?: string;
+  icon?: React.ReactNode;
+  link?: string;
 };
 const BreadcrumbItem: React.FC<Props> = (props) => {
-  const { type = "text", component, link } = props;
-  return <>{type != "text" ? <div className="flex items-center space-x-2">{component}</div> : link}</>;
+  const { type = "text", component, label, icon, link } = props;
+  return (
+    <>
+      {type != "text" ? (
+        <div className="flex items-center space-x-2">{component}</div>
+      ) : (
+        <Tooltip tooltipContent={label} position="bottom">
+          <li className="flex items-center space-x-2">
+            <div className="flex flex-wrap items-center gap-2.5">
+              {link ? (
+                <a
+                  className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
+                  href={link}
+                >
+                  {icon && (
+                    <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
+                  )}
+                  <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+                </a>
+              ) : (
+                <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
+                  {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
+                  <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+                </div>
+              )}
+            </div>
+          </li>
+        </Tooltip>
+      )}
+    </>
+  );
 };
 
 Breadcrumbs.BreadcrumbItem = BreadcrumbItem;

web/components/account/deactivate-account-modal.tsx

@@ -89,8 +89,8 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="">
                     <div className="flex items-start gap-x-4">
-                      <div className="grid place-items-center rounded-full bg-red-500/20 p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
-                        <Trash2 className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600" aria-hidden="true" />
+                      <div className="grid place-items-center rounded-full bg-red-500/20 p-4">
+                        <Trash2 className="h-6 w-6 text-red-600" aria-hidden="true" />
                       </div>
                       <div>
                         <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">

web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useCycle, useMember, useModule, useProject } from "hooks/store";
+import { useCycle, useModule, useProject } from "hooks/store";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 import { renderFormattedDate } from "helpers/date-time.helper";
@@ -15,12 +15,10 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
   const { getProjectById } = useProject();
   const { getCycleById } = useCycle();
   const { getModuleById } = useModule();
-  const { getUserDetails } = useMember();
 
   const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
   const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined;
   const projectDetails = projectId ? getProjectById(projectId.toString()) : undefined;
-  const cycleOwnerDetails = cycleDetails ? getUserDetails(cycleDetails.owned_by) : undefined;
 
   return (
     <>
@@ -31,7 +29,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
                 <h6 className="text-custom-text-200">Lead</h6>
-                <span>{cycleOwnerDetails?.display_name}</span>
+                <span>{cycleDetails.owned_by?.display_name}</span>
               </div>
               <div className="flex items-center gap-2 text-xs">
                 <h6 className="text-custom-text-200">Start Date</h6>

web/components/command-palette/actions/project-actions.tsx

@@ -1,7 +1,7 @@
 import { Command } from "cmdk";
 import { ContrastIcon, FileText } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker } from "hooks/store";
+import { useApplication } from "hooks/store";
 // ui
 import { DiceIcon, PhotoFilterIcon } from "@plane/ui";
 
@@ -14,8 +14,8 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
 
   const {
     commandPalette: { toggleCreateCycleModal, toggleCreateModuleModal, toggleCreatePageModal, toggleCreateViewModal },
+    eventTracker: { setTrackElement },
   } = useApplication();
-  const { setTrackElement } = useEventTracker();
 
   return (
     <>
@@ -23,7 +23,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
-            setTrackElement("Command palette");
+            setTrackElement("COMMAND_PALETTE");
             toggleCreateCycleModal(true);
           }}
           className="focus:outline-none"
@@ -39,7 +39,6 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
-            setTrackElement("Command palette");
             toggleCreateModuleModal(true);
           }}
           className="focus:outline-none"
@@ -55,7 +54,6 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
-            setTrackElement("Command palette");
             toggleCreateViewModal(true);
           }}
           className="focus:outline-none"
@@ -71,7 +69,6 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
-            setTrackElement("Command palette");
             toggleCreatePageModal(true);
           }}
           className="focus:outline-none"

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

@@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { FolderPlus, Search, Settings } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useProject } from "hooks/store";
+import { useApplication, useProject } from "hooks/store";
 // services
 import { WorkspaceService } from "services/workspace.service";
 import { IssueService } from "services/issue";
@@ -64,8 +64,8 @@ export const CommandModal: React.FC = observer(() => {
       toggleCreateIssueModal,
       toggleCreateProjectModal,
     },
+    eventTracker: { setTrackElement },
   } = useApplication();
-  const { setTrackElement } = useEventTracker();
 
   // router
   const router = useRouter();
@@ -278,7 +278,7 @@ export const CommandModal: React.FC = observer(() => {
                           <Command.Item
                             onSelect={() => {
                               closePalette();
-                              setTrackElement("Command Palette");
+                              setTrackElement("COMMAND_PALETTE");
                               toggleCreateIssueModal(true);
                             }}
                             className="focus:bg-custom-background-80"
@@ -296,7 +296,7 @@ export const CommandModal: React.FC = observer(() => {
                             <Command.Item
                               onSelect={() => {
                                 closePalette();
-                                setTrackElement("Command palette");
+                                setTrackElement("COMMAND_PALETTE");
                                 toggleCreateProjectModal(true);
                               }}
                               className="focus:outline-none"

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

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
+import { useApplication, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CommandModal, ShortcutsModal } from "components/command-palette";
@@ -32,8 +32,8 @@ export const CommandPalette: FC = observer(() => {
   const {
     commandPalette,
     theme: { toggleSidebar },
+    eventTracker: { setTrackElement },
   } = useApplication();
-  const { setTrackElement } = useEventTracker();
   const { currentUser } = useUser();
   const {
     issues: { removeIssue },
@@ -118,10 +118,11 @@ export const CommandPalette: FC = observer(() => {
           toggleSidebar();
         }
       } else if (!isAnyModalOpen) {
-        setTrackElement("Shortcut key");
         if (keyPressed === "c") {
+          setTrackElement("SHORTCUT_KEY");
           toggleCreateIssueModal(true);
         } else if (keyPressed === "p") {
+          setTrackElement("SHORTCUT_KEY");
           toggleCreateProjectModal(true);
         } else if (keyPressed === "h") {
           toggleShortcutModal(true);

web/components/common/breadcrumb-link.tsx

@@ -1,36 +0,0 @@
-import { Tooltip } from "@plane/ui";
-import Link from "next/link";
-
-type Props = {
-  label?: string;
-  href?: string;
-  icon?: React.ReactNode | undefined;
-};
-
-export const BreadcrumbLink: React.FC<Props> = (props) => {
-  const { href, label, icon } = props;
-  return (
-    <Tooltip tooltipContent={label} position="bottom">
-      <li className="flex items-center space-x-2">
-        <div className="flex flex-wrap items-center gap-2.5">
-          {href ? (
-            <Link
-              className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
-              href={href}
-            >
-              {icon && (
-                <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
-              )}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-            </Link>
-          ) : (
-            <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
-              {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-            </div>
-          )}
-        </div>
-      </li>
-    </Tooltip>
-  );
-};

web/components/common/index.ts

@@ -1,4 +1,3 @@
 export * from "./product-updates-modal";
 export * from "./empty-state";
 export * from "./latest-feature-block";
-export * from "./breadcrumb-link";

web/components/core/image-picker-popover.tsx

@@ -130,29 +130,17 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
     onChange(unsplashImages[0].urls.regular);
   }, [value, onChange, unsplashImages]);
 
-  const handleClose = () => {
-    if (isOpen) setIsOpen(false);
-  };
+  const openDropdown = () => setIsOpen(true);
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
 
-  const toggleDropdown = () => {
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(ref, handleClose);
+  useOutsideClickDetector(ref, closeDropdown);
 
   return (
     <Popover className="relative z-[2]" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
       <Popover.Button
         className="rounded border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
-        onClick={handleOnClick}
+        onClick={openDropdown}
         disabled={disabled}
       >
         {label}

web/components/core/modals/gpt-assistant-popover.tsx

@@ -157,7 +157,6 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
       window.removeEventListener("keydown", handleEnterKeyPress);
       window.removeEventListener("keydown", handleEscapeKeyPress);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, handleSubmit, onClose]);
 
   const responseActionButton = response !== "" && (

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

@@ -86,15 +86,12 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
           {
             id: "pending",
             color: "#3F76FF",
-            data:
-              chartData.length > 0
-                ? chartData.map((item, index) => ({
-                    index,
-                    x: item.currentDate,
-                    y: item.pending,
-                    color: "#3F76FF",
-                  }))
-                : [],
+            data: chartData.map((item, index) => ({
+              index,
+              x: item.currentDate,
+              y: item.pending,
+              color: "#3F76FF",
+            })),
             enableArea: true,
           },
           {
@@ -124,9 +121,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
         enableArea
         colors={(datum) => datum.color ?? "#3F76FF"}
         customYAxisTickValues={[0, totalIssues]}
-        gridXValues={
-          chartData.length > 0 ? chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : "")) : undefined
-        }
+        gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
         enableSlices="x"
         sliceTooltip={(datum) => (
           <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">

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

@@ -125,7 +125,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab>
       </Tab.List>
       <Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
-        <Tab.Panel as="div" className="flex min-h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
+        <Tab.Panel as="div" className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
           {distribution?.assignees.length > 0 ? (
             distribution.assignees.map((assignee, index) => {
               if (assignee.assignee_id)

web/components/cycles/active-cycle-details.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { useTheme } from "next-themes";
 // hooks
-import { useCycle, useIssues, useMember, useProject, useUser } from "hooks/store";
+import { useCycle, useIssues, useProject, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { SingleProgressStats } from "components/core";
@@ -58,7 +58,6 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
     removeCycleFromFavorites,
   } = useCycle();
   const { currentProjectDetails } = useProject();
-  const { getUserDetails } = useMember();
   // toast alert
   const { setToastAlert } = useToast();
 
@@ -68,7 +67,6 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
   );
 
   const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
-  const cycleOwnerDetails = activeCycle ? getUserDetails(activeCycle.owned_by) : undefined;
 
   const { data: activeCycleIssues } = useSWR(
     workspaceSlug && projectId && currentProjectActiveCycleId
@@ -205,20 +203,20 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
 
               <div className="flex items-center gap-4">
                 <div className="flex items-center gap-2.5 text-custom-text-200">
-                  {cycleOwnerDetails?.avatar && cycleOwnerDetails?.avatar !== "" ? (
+                  {activeCycle.owned_by.avatar && activeCycle.owned_by.avatar !== "" ? (
                     <img
-                      src={cycleOwnerDetails?.avatar}
+                      src={activeCycle.owned_by.avatar}
                       height={16}
                       width={16}
                       className="rounded-full"
-                      alt={cycleOwnerDetails?.display_name}
+                      alt={activeCycle.owned_by.display_name}
                     />
                   ) : (
                     <span className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-background-100 capitalize">
-                      {cycleOwnerDetails?.display_name.charAt(0)}
+                      {activeCycle.owned_by.display_name.charAt(0)}
                     </span>
                   )}
-                  <span className="text-custom-text-200">{cycleOwnerDetails?.display_name}</span>
+                  <span className="text-custom-text-200">{activeCycle.owned_by.display_name}</span>
                 </div>
 
                 {activeCycle.assignees.length > 0 && (

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

@@ -2,7 +2,7 @@ import { FC, MouseEvent, useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 // hooks
-import { useEventTracker, useCycle, useUser } from "hooks/store";
+import { useApplication, useCycle, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
@@ -33,7 +33,9 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   // router
   const router = useRouter();
   // store
-  const { setTrackElement } = useEventTracker();
+  const {
+    eventTracker: { setTrackElement },
+  } = useApplication();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -115,15 +117,14 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Cycles page board layout");
     setUpdateModal(true);
   };
 
   const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Cycles page board layout");
     setDeleteModal(true);
+    setTrackElement("CYCLE_PAGE_BOARD_LAYOUT");
   };
 
   const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {

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

@@ -2,7 +2,7 @@ import { FC, MouseEvent, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
-import { useEventTracker, useCycle, useUser } from "hooks/store";
+import { useApplication, useCycle, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
@@ -37,7 +37,9 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   // router
   const router = useRouter();
   // store hooks
-  const { setTrackElement } = useEventTracker();
+  const {
+    eventTracker: { setTrackElement },
+  } = useApplication();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -88,15 +90,14 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Cycles page list layout");
     setUpdateModal(true);
   };
 
   const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Cycles page list layout");
     setDeleteModal(true);
+    setTrackElement("CYCLE_PAGE_LIST_LAYOUT");
   };
 
   const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {

web/components/cycles/delete-modal.tsx

@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { AlertTriangle } from "lucide-react";
 // hooks
-import { useEventTracker, useCycle } from "hooks/store";
+import { useApplication, useCycle } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { Button } from "@plane/ui";
@@ -27,7 +27,9 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
   const router = useRouter();
   const { cycleId, peekCycle } = router.query;
   // store hooks
-  const { captureCycleEvent } = useEventTracker();
+  const {
+    eventTracker: { postHogEventTracker },
+  } = useApplication();
   const { deleteCycle } = useCycle();
   // toast alert
   const { setToastAlert } = useToast();
@@ -44,15 +46,13 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
             title: "Success!",
             message: "Cycle deleted successfully.",
           });
-          captureCycleEvent({
-            eventName: "Cycle deleted",
-            payload: { ...cycle, state: "SUCCESS" },
+          postHogEventTracker("CYCLE_DELETE", {
+            state: "SUCCESS",
           });
         })
         .catch(() => {
-          captureCycleEvent({
-            eventName: "Cycle deleted",
-            payload: { ...cycle, state: "FAILED" },
+          postHogEventTracker("CYCLE_DELETE", {
+            state: "FAILED",
           });
         });
 

web/components/cycles/modal.tsx

@@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
-import { useEventTracker, useCycle, useProject } from "hooks/store";
+import { useApplication, useCycle, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -27,7 +27,9 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
   // states
   const [activeProject, setActiveProject] = useState<string | null>(null);
   // store hooks
-  const { captureCycleEvent } = useEventTracker();
+  const {
+    eventTracker: { postHogEventTracker },
+  } = useApplication();
   const { workspaceProjectIds } = useProject();
   const { createCycle, updateCycleDetails } = useCycle();
   // toast alert
@@ -46,9 +48,9 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           title: "Success!",
           message: "Cycle created successfully.",
         });
-        captureCycleEvent({
-          eventName: "Cycle created",
-          payload: { ...res, state: "SUCCESS" },
+        postHogEventTracker("CYCLE_CREATE", {
+          ...res,
+          state: "SUCCESS",
         });
       })
       .catch((err) => {
@@ -57,9 +59,8 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           title: "Error!",
           message: err.detail ?? "Error in creating cycle. Please try again.",
         });
-        captureCycleEvent({
-          eventName: "Cycle created",
-          payload: { ...payload, state: "FAILED" },
+        postHogEventTracker("CYCLE_CREATE", {
+          state: "FAILED",
         });
       });
   };

web/components/cycles/sidebar.tsx

@@ -6,7 +6,7 @@ import { Disclosure, Popover, Transition } from "@headlessui/react";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
-import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
+import { useApplication, useCycle, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { SidebarProgressStats } from "components/core";
@@ -66,15 +66,15 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId, peekCycle } = router.query;
   // store hooks
-  const { setTrackElement } = useEventTracker();
+  const {
+    eventTracker: { setTrackElement },
+  } = useApplication();
   const {
     membership: { currentProjectRole },
   } = useUser();
   const { getCycleById, updateCycleDetails } = useCycle();
-  const { getUserDetails } = useMember();
 
   const cycleDetails = getCycleById(cycleId);
-  const cycleOwnerDetails = cycleDetails ? getUserDetails(cycleDetails.owned_by) : undefined;
 
   const { setToastAlert } = useToast();
 
@@ -317,7 +317,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
 
   const issueCount =
-    cycleDetails.total_issues === 0 ? "0 Issue" : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+    cycleDetails.total_issues === 0
+      ? "0 Issue"
+      : cycleDetails.total_issues === cycleDetails.completed_issues
+      ? cycleDetails.total_issues > 1
+        ? `${cycleDetails.total_issues}`
+        : `${cycleDetails.total_issues}`
+      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
@@ -512,8 +518,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
             <div className="flex w-1/2 items-center rounded-sm">
               <div className="flex items-center gap-2.5">
-                <Avatar name={cycleOwnerDetails?.display_name} src={cycleOwnerDetails?.avatar} />
-                <span className="text-sm text-custom-text-200">{cycleOwnerDetails?.display_name}</span>
+                <Avatar name={cycleDetails.owned_by.display_name} src={cycleDetails.owned_by.avatar} />
+                <span className="text-sm text-custom-text-200">{cycleDetails.owned_by.display_name}</span>
               </div>
             </div>
           </div>
@@ -567,9 +573,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <Transition show={open}>
                     <Disclosure.Panel>
                       <div className="flex flex-col gap-3">
-                        {cycleDetails.distribution?.completion_chart &&
-                        cycleDetails.start_date &&
-                        cycleDetails.end_date ? (
+                        {isStartValid && isEndValid ? (
                           <div className="h-full w-full pt-4">
                             <div className="flex  items-start  gap-4 py-2 text-xs">
                               <div className="flex items-center gap-3 text-custom-text-100">
@@ -585,9 +589,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                             </div>
                             <div className="relative h-40 w-80">
                               <ProgressChart
-                                distribution={cycleDetails.distribution?.completion_chart}
-                                startDate={cycleDetails.start_date}
-                                endDate={cycleDetails.end_date}
+                                distribution={cycleDetails.distribution?.completion_chart ?? {}}
+                                startDate={cycleDetails.start_date ?? ""}
+                                endDate={cycleDetails.end_date ?? ""}
                                 totalIssues={cycleDetails.total_issues}
                               />
                             </div>

web/components/dashboard/project-empty-state.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useEventTracker, useUser } from "hooks/store";
+import { useApplication, useUser } from "hooks/store";
 // ui
 import { Button } from "@plane/ui";
 // assets
@@ -14,7 +14,6 @@ export const DashboardProjectEmptyState = observer(() => {
   const {
     commandPalette: { toggleCreateProjectModal },
   } = useApplication();
-  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -32,13 +31,7 @@ export const DashboardProjectEmptyState = observer(() => {
       <Image src={ProjectEmptyStateImage} className="w-full" alt="Project empty state" />
       {canCreateProject && (
         <div className="flex justify-center">
-          <Button
-            variant="primary"
-            onClick={() => {
-              setTrackElement("Project empty state");
-              toggleCreateProjectModal(true);
-            }}
-          >
+          <Button variant="primary" onClick={() => toggleCreateProjectModal(true)}>
             Build your first project
           </Button>
         </div>

web/components/dashboard/widgets/assigned-issues.tsx

@@ -17,7 +17,7 @@ import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper"
 // types
 import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
 // constants
-import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
+import { ISSUES_TABS_LIST } from "constants/dashboard";
 
 const WIDGET_KEY = "assigned_issues";
 
@@ -30,8 +30,6 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TAssignedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
-  const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
-  const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TAssignedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -43,79 +41,68 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: filters.tab ?? selectedTab,
-      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
+      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "upcoming",
+      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
       expand: "issue_relation",
     }).finally(() => setFetching(false));
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(selectedDurationFilter);
+    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week");
 
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: selectedTab,
-      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
+      issue_type: widgetDetails?.widget_filters.tab ?? "upcoming",
+      target_date: filterDates,
       expand: "issue_relation",
     });
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const filterParams = getRedirectionFilters(selectedTab);
-  const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
+  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
 
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
-      <div className="flex items-center justify-between gap-2 p-6 pl-7">
-        <Link
-          href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
-          className="text-lg font-semibold text-custom-text-300 hover:underline"
-        >
-          Assigned to you
-        </Link>
+      <div className="flex items-start justify-between gap-2 p-6 pl-7">
+        <div>
+          <Link
+            href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
+            className="text-lg font-semibold text-custom-text-300 hover:underline"
+          >
+            Assigned to you
+          </Link>
+          <p className="mt-3 text-xs font-medium text-custom-text-300">
+            Filtered by{" "}
+            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
+          </p>
+        </div>
         <DurationFilterDropdown
-          value={selectedDurationFilter}
-          onChange={(val) => {
-            if (val === selectedDurationFilter) return;
-
-            // switch to pending tab if target date is changed to none
-            if (val === "none" && selectedTab !== "completed") {
-              handleUpdateFilters({ target_date: val, tab: "pending" });
-              return;
-            }
-            // switch to upcoming tab if target date is changed to other than none
-            if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
-              handleUpdateFilters({
-                target_date: val,
-                tab: "upcoming",
-              });
-              return;
-            }
-
-            handleUpdateFilters({ target_date: val });
-          }}
+          value={widgetDetails.widget_filters.target_date ?? "this_week"}
+          onChange={(val) =>
+            handleUpdateFilters({
+              target_date: val,
+            })
+          }
         />
       </div>
       <Tab.Group
         as="div"
-        selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
+        defaultIndex={ISSUES_TABS_LIST.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
         onChange={(i) => {
-          const selectedTab = tabsList[i];
-          handleUpdateFilters({ tab: selectedTab?.key ?? "pending" });
+          const selectedTab = ISSUES_TABS_LIST[i];
+          handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
         }}
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
+          <TabsList />
         </div>
         <Tab.Panels as="div" className="h-full">
-          {tabsList.map((tab) => (
+          {ISSUES_TABS_LIST.map((tab) => (
             <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
               <WidgetIssuesList
                 issues={widgetStats.issues}

web/components/dashboard/widgets/created-issues.tsx

@@ -17,7 +17,7 @@ import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper"
 // types
 import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
 // constants
-import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
+import { ISSUES_TABS_LIST } from "constants/dashboard";
 
 const WIDGET_KEY = "created_issues";
 
@@ -30,8 +30,6 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TCreatedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
-  const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
-  const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TCreatedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -43,76 +41,64 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: filters.tab ?? selectedTab,
-      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
+      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "upcoming",
+      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
     }).finally(() => setFetching(false));
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(selectedDurationFilter);
-
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: selectedTab,
-      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
+      issue_type: widgetDetails?.widget_filters.tab ?? "upcoming",
+      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const filterParams = getRedirectionFilters(selectedTab);
-  const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
+  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
 
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
-      <div className="flex items-center justify-between gap-2 p-6 pl-7">
-        <Link
-          href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
-          className="text-lg font-semibold text-custom-text-300 hover:underline"
-        >
-          Created by you
-        </Link>
+      <div className="flex items-start justify-between gap-2 p-6 pl-7">
+        <div>
+          <Link
+            href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
+            className="text-lg font-semibold text-custom-text-300 hover:underline"
+          >
+            Created by you
+          </Link>
+          <p className="mt-3 text-xs font-medium text-custom-text-300">
+            Filtered by{" "}
+            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
+          </p>
+        </div>
         <DurationFilterDropdown
-          value={selectedDurationFilter}
-          onChange={(val) => {
-            if (val === selectedDurationFilter) return;
-
-            // switch to pending tab if target date is changed to none
-            if (val === "none" && selectedTab !== "completed") {
-              handleUpdateFilters({ target_date: val, tab: "pending" });
-              return;
-            }
-            // switch to upcoming tab if target date is changed to other than none
-            if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
-              handleUpdateFilters({
-                target_date: val,
-                tab: "upcoming",
-              });
-              return;
-            }
-
-            handleUpdateFilters({ target_date: val });
-          }}
+          value={widgetDetails.widget_filters.target_date ?? "this_week"}
+          onChange={(val) =>
+            handleUpdateFilters({
+              target_date: val,
+            })
+          }
         />
       </div>
       <Tab.Group
         as="div"
-        selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
+        defaultIndex={ISSUES_TABS_LIST.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
         onChange={(i) => {
-          const selectedTab = tabsList[i];
-          handleUpdateFilters({ tab: selectedTab.key ?? "pending" });
+          const selectedTab = ISSUES_TABS_LIST[i];
+          handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
         }}
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
+          <TabsList />
         </div>
         <Tab.Panels as="div" className="h-full">
-          {tabsList.map((tab) => (
+          {ISSUES_TABS_LIST.map((tab) => (
             <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
               <WidgetIssuesList
                 issues={widgetStats.issues}

web/components/dashboard/widgets/dropdowns/duration-filter.tsx

@@ -26,11 +26,11 @@ export const DurationFilterDropdown: React.FC<Props> = (props) => {
       placement="bottom-end"
       closeOnSelect
     >
-        {DURATION_FILTER_OPTIONS.map((option) => (
-          <CustomMenu.MenuItem key={option.key} onClick={() => onChange(option.key)}>
-            {option.label}
-          </CustomMenu.MenuItem>
-        ))}
+      {DURATION_FILTER_OPTIONS.map((option) => (
+        <CustomMenu.MenuItem key={option.key} onClick={() => onChange(option.key)}>
+          {option.label}
+        </CustomMenu.MenuItem>
+      ))}
     </CustomMenu>
   );
 };

web/components/dashboard/widgets/issue-panels/issues-list.tsx

@@ -14,7 +14,7 @@ import {
   IssueListItemProps,
 } from "components/dashboard/widgets";
 // ui
-import { getButtonStyling } from "@plane/ui";
+import { Loader, getButtonStyling } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 import { getRedirectionFilters } from "helpers/dashboard.helper";
@@ -41,18 +41,16 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
   const filterParams = getRedirectionFilters(tab);
 
   const ISSUE_LIST_ITEM: {
-    [key: string]: {
+    [key in string]: {
       [key in TIssuesListTypes]: React.FC<IssueListItemProps>;
     };
   } = {
     assigned: {
-      pending: AssignedUpcomingIssueListItem,
       upcoming: AssignedUpcomingIssueListItem,
       overdue: AssignedOverdueIssueListItem,
       completed: AssignedCompletedIssueListItem,
     },
     created: {
-      pending: CreatedUpcomingIssueListItem,
       upcoming: CreatedUpcomingIssueListItem,
       overdue: CreatedOverdueIssueListItem,
       completed: CreatedCompletedIssueListItem,
@@ -63,7 +61,12 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
     <>
       <div className="h-full">
         {isLoading ? (
-          <></>
+          <Loader className="mt-7 mx-6 space-y-4">
+            <Loader.Item height="25px" />
+            <Loader.Item height="25px" />
+            <Loader.Item height="25px" />
+            <Loader.Item height="25px" />
+          </Loader>
         ) : issues.length > 0 ? (
           <>
             <div className="mt-7 mx-6 border-b-[0.5px] border-custom-border-200 grid grid-cols-6 gap-1 text-xs text-custom-text-300 pb-1">
@@ -74,11 +77,11 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
                 })}
               >
                 Issues
-                <span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
+                <span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl h-4 min-w-6 flex items-center text-center justify-center">
                   {totalIssues}
                 </span>
               </h6>
-              {["upcoming", "pending"].includes(tab) && <h6 className="text-center">Due date</h6>}
+              {tab === "upcoming" && <h6 className="text-center">Due date</h6>}
               {tab === "overdue" && <h6 className="text-center">Due by</h6>}
               {type === "assigned" && tab !== "completed" && <h6 className="text-center">Blocked by</h6>}
               {type === "created" && <h6 className="text-center">Assigned to</h6>}

web/components/dashboard/widgets/issue-panels/tabs-list.tsx

@@ -1,63 +1,26 @@
-import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 // helpers
 import { cn } from "helpers/common.helper";
-// types
-import { TDurationFilterOptions, TIssuesListTypes } from "@plane/types";
 // constants
-import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
+import { ISSUES_TABS_LIST } from "constants/dashboard";
 
-type Props = {
-  durationFilter: TDurationFilterOptions;
-  selectedTab: TIssuesListTypes;
-};
-
-export const TabsList: React.FC<Props> = observer((props) => {
-  const { durationFilter, selectedTab } = props;
-
-  const tabsList = durationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
-  const selectedTabIndex = tabsList.findIndex((tab) => tab.key === (selectedTab ?? "pending"));
-
-  return (
-    <Tab.List
-      as="div"
-      className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 grid"
-      style={{
-        gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
-      }}
-    >
-      <div
-        className={cn("absolute bg-custom-background-100 rounded transition-all duration-500 ease-in-out", {
-          // right shadow
-          "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
-          // left shadow
-          "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
-        })}
-        style={{
-          height: "calc(100% - 1px)",
-          width: `${100 / tabsList.length}%`,
-          transform: `translateX(${selectedTabIndex * 100}%)`,
-        }}
-      />
-      {tabsList.map((tab) => (
-        <Tab
-          key={tab.key}
-          className={cn(
-            "relative z-[1] font-semibold text-xs rounded py-1.5 text-custom-text-400 focus:outline-none",
-            "transition duration-500",
-            {
-              "text-custom-text-100 bg-custom-background-100": selectedTab === tab.key,
-              "hover:text-custom-text-300": selectedTab !== tab.key,
-              // // right shadow
-              // "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
-              // // left shadow
-              // "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
-            }
-          )}
-        >
-          <span className="scale-110">{tab.label}</span>
-        </Tab>
-      ))}
-    </Tab.List>
-  );
-});
+export const TabsList = () => (
+  <Tab.List
+    as="div"
+    className="border-[0.5px] border-custom-border-200 rounded grid grid-cols-3 bg-custom-background-80"
+  >
+    {ISSUES_TABS_LIST.map((tab) => (
+      <Tab
+        key={tab.key}
+        className={({ selected }) =>
+          cn("font-semibold text-xs rounded py-1.5 focus:outline-none", {
+            "bg-custom-background-100 text-custom-text-300 shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selected,
+            "text-custom-text-400": !selected,
+          })
+        }
+      >
+        {tab.label}
+      </Tab>
+    ))}
+  </Tab.List>
+);

web/components/dashboard/widgets/issues-by-priority.tsx

@@ -84,18 +84,16 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
+      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
     });
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
+      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -131,15 +129,21 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
-      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
-        <Link
-          href={`/${workspaceSlug}/workspace-views/assigned`}
-          className="text-lg font-semibold text-custom-text-300 hover:underline"
-        >
-          Assigned by priority
-        </Link>
+      <div className="flex items-start justify-between gap-2 pl-7 pr-6">
+        <div>
+          <Link
+            href={`/${workspaceSlug}/workspace-views/assigned`}
+            className="text-lg font-semibold text-custom-text-300 hover:underline"
+          >
+            Assigned by priority
+          </Link>
+          <p className="mt-3 text-xs font-medium text-custom-text-300">
+            Filtered by{" "}
+            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
+          </p>
+        </div>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "none"}
+          value={widgetDetails.widget_filters.target_date ?? "this_week"}
           onChange={(val) =>
             handleUpdateFilters({
               target_date: val,

web/components/dashboard/widgets/issues-by-state-group.tsx

@@ -43,19 +43,17 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
+      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
     });
   };
 
   // fetch widget stats
   useEffect(() => {
-    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
+      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -74,14 +72,14 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       startedCount > 0
         ? "started"
         : unStartedCount > 0
-        ? "unstarted"
-        : backlogCount > 0
-        ? "backlog"
-        : completedCount > 0
-        ? "completed"
-        : canceledCount > 0
-        ? "cancelled"
-        : null;
+          ? "unstarted"
+          : backlogCount > 0
+            ? "backlog"
+            : completedCount > 0
+              ? "completed"
+              : canceledCount > 0
+                ? "cancelled"
+                : null;
 
     setActiveStateGroup(stateGroup);
     setDefaultStateGroup(stateGroup);
@@ -130,15 +128,21 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
-      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
-        <Link
-          href={`/${workspaceSlug}/workspace-views/assigned`}
-          className="text-lg font-semibold text-custom-text-300 hover:underline"
-        >
-          Assigned by state
-        </Link>
+      <div className="flex items-start justify-between gap-2 pl-7 pr-6">
+        <div>
+          <Link
+            href={`/${workspaceSlug}/workspace-views/assigned`}
+            className="text-lg font-semibold text-custom-text-300 hover:underline"
+          >
+            Assigned by state
+          </Link>
+          <p className="mt-3 text-xs font-medium text-custom-text-300">
+            Filtered by{" "}
+            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
+          </p>
+        </div>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "none"}
+          value={widgetDetails.widget_filters.target_date ?? "this_week"}
           onChange={(val) =>
             handleUpdateFilters({
               target_date: val,

web/components/dashboard/widgets/overview-stats.tsx

@@ -7,9 +7,9 @@ import { useDashboard } from "hooks/store";
 import { WidgetLoader } from "components/dashboard/widgets";
 // helpers
 import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { cn } from "helpers/common.helper";
 // types
 import { TOverviewStatsWidgetResponse } from "@plane/types";
-import { cn } from "helpers/common.helper";
 
 export type WidgetProps = {
   dashboardId: string;
@@ -72,18 +72,10 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
         [&>div:nth-child(2)>a>div]:lg:border-r
         "
     >
-      {STATS_LIST.map((stat, index) => (
-        <div
-          className={cn(
-            `w-full flex flex-col gap-2 hover:bg-custom-background-80`,
-            index === 0 ? "rounded-tl-xl lg:rounded-l-xl" : "",
-            index === STATS_LIST.length - 1 ? "rounded-br-xl lg:rounded-r-xl" : "",
-            index === 1 ? "rounded-tr-xl lg:rounded-[0px]" : "",
-            index == 2 ? "rounded-bl-xl lg:rounded-[0px]" : ""
-          )}
-        >
+      {STATS_LIST.map((stat) => (
+        <div className="w-full flex flex-col gap-2 hover:bg-custom-background-80 rounded-[10px]">
           <Link href={stat.link} className="py-4 duration-300 rounded-[10px] w-full ">
-            <div className={`relative flex pl-10 sm:pl-20 md:pl-20 lg:pl-20 items-center`}>
+            <div className={`relative flex justify-center items-center`}>
               <div>
                 <h5 className="font-semibold text-xl">{stat.count}</h5>
                 <p className="text-custom-text-300 text-sm xl:text-base">{stat.title}</p>

web/components/dashboard/widgets/recent-projects.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "hooks/store";
+import { useApplication, useDashboard, useProject, useUser } from "hooks/store";
 // components
 import { WidgetLoader, WidgetProps } from "components/dashboard/widgets";
 // ui
@@ -72,7 +72,6 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
   const {
     commandPalette: { toggleCreateProjectModal },
   } = useApplication();
-  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -106,7 +105,6 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
-              setTrackElement("Sidebar");
               toggleCreateProjectModal(true);
             }}
           >

web/components/dropdowns/buttons.tsx

@@ -1,101 +0,0 @@
-// helpers
-import { cn } from "helpers/common.helper";
-// types
-import { TButtonVariants } from "./types";
-// constants
-import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS } from "./constants";
-import { Tooltip } from "@plane/ui";
-
-export type DropdownButtonProps = {
-  children: React.ReactNode;
-  className?: string;
-  isActive: boolean;
-  tooltipContent: string | React.ReactNode;
-  tooltipHeading: string;
-  showTooltip: boolean;
-  variant: TButtonVariants;
-};
-
-type ButtonProps = {
-  children: React.ReactNode;
-  className?: string;
-  isActive: boolean;
-  tooltipContent: string | React.ReactNode;
-  tooltipHeading: string;
-  showTooltip: boolean;
-};
-
-export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
-  const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip, variant } = props;
-
-  const ButtonToRender: React.FC<ButtonProps> = BORDER_BUTTON_VARIANTS.includes(variant)
-    ? BorderButton
-    : BACKGROUND_BUTTON_VARIANTS.includes(variant)
-    ? BackgroundButton
-    : TransparentButton;
-
-  return (
-    <ButtonToRender
-      className={className}
-      isActive={isActive}
-      tooltipContent={tooltipContent}
-      tooltipHeading={tooltipHeading}
-      showTooltip={showTooltip}
-    >
-      {children}
-    </ButtonToRender>
-  );
-};
-
-const BorderButton: React.FC<ButtonProps> = (props) => {
-  const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip } = props;
-
-  return (
-    <Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
-      <div
-        className={cn(
-          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
-          { "bg-custom-background-80": isActive },
-          className
-        )}
-      >
-        {children}
-      </div>
-    </Tooltip>
-  );
-};
-
-const BackgroundButton: React.FC<ButtonProps> = (props) => {
-  const { children, className, tooltipContent, tooltipHeading, showTooltip } = props;
-
-  return (
-    <Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
-      <div
-        className={cn(
-          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
-          className
-        )}
-      >
-        {children}
-      </div>
-    </Tooltip>
-  );
-};
-
-const TransparentButton: React.FC<ButtonProps> = (props) => {
-  const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip } = props;
-
-  return (
-    <Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
-      <div
-        className={cn(
-          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
-          { "bg-custom-background-80": isActive },
-          className
-        )}
-      >
-        {children}
-      </div>
-    </Tooltip>
-  );
-};

web/components/dropdowns/constants.ts

@@ -1,20 +0,0 @@
-// types
-import { TButtonVariants } from "./types";
-
-export const BORDER_BUTTON_VARIANTS: TButtonVariants[] = ["border-with-text", "border-without-text"];
-
-export const BACKGROUND_BUTTON_VARIANTS: TButtonVariants[] = ["background-with-text", "background-without-text"];
-
-export const TRANSPARENT_BUTTON_VARIANTS: TButtonVariants[] = ["transparent-with-text", "transparent-without-text"];
-
-export const BUTTON_VARIANTS_WITHOUT_TEXT: TButtonVariants[] = [
-  "border-without-text",
-  "background-without-text",
-  "transparent-without-text",
-];
-
-export const BUTTON_VARIANTS_WITH_TEXT: TButtonVariants[] = [
-  "border-with-text",
-  "background-with-text",
-  "transparent-with-text",
-];

web/components/dropdowns/cycle.tsx

@@ -7,16 +7,13 @@ import { Check, ChevronDown, Search } from "lucide-react";
 import { useApplication, useCycle } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// components
-import { DropdownButton } from "./buttons";
 // icons
-import { ContrastIcon } from "@plane/ui";
+import { ContrastIcon, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
+import { ICycle } from "@plane/types";
 import { TDropdownProps } from "./types";
-// constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -27,6 +24,18 @@ type Props = TDropdownProps & {
   value: string | null;
 };
 
+type ButtonProps = {
+  className?: string;
+  cycle: ICycle | null;
+  hideIcon: boolean;
+  hideText?: boolean;
+  dropdownArrow: boolean;
+  isActive?: boolean;
+  dropdownArrowClassName: string;
+  placeholder: string;
+  tooltip: boolean;
+};
+
 type DropdownOptions =
   | {
       value: string | null;
@@ -35,6 +44,100 @@ type DropdownOptions =
     }[]
   | undefined;
 
+const BorderButton = (props: ButtonProps) => {
+  const {
+    className,
+    cycle,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    placeholder,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip tooltipHeading="Cycle" tooltipContent={cycle?.name ?? placeholder} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}{" "}
+        {!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const BackgroundButton = (props: ButtonProps) => {
+  const {
+    className,
+    cycle,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip tooltipHeading="Cycle" tooltipContent={cycle?.name ?? placeholder} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
+          className
+        )}
+      >
+        {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
+        {!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const TransparentButton = (props: ButtonProps) => {
+  const {
+    className,
+    cycle,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    placeholder,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip tooltipHeading="Cycle" tooltipContent={cycle?.name ?? placeholder} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
+        {!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
 export const CycleDropdown: React.FC<Props> = observer((props) => {
   const {
     button,
@@ -50,8 +153,8 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
     placeholder = "Cycle",
     placement,
     projectId,
-    showTooltip = false,
     tabIndex,
+    tooltip = false,
     value,
   } = props;
   // states
@@ -118,34 +221,13 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
 
   const selectedCycle = value ? getCycleById(value) : null;
 
-  const onOpen = () => {
+  const openDropdown = () => {
+    setIsOpen(true);
     if (referenceElement) referenceElement.focus();
   };
-
-  const handleClose = () => {
-    if (isOpen) setIsOpen(false);
-    if (referenceElement) referenceElement.blur();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: string | null) => {
-    onChange(val);
-    handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
 
   return (
     <Combobox
@@ -154,7 +236,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
       tabIndex={tabIndex}
       className={cn("h-full", className)}
       value={value}
-      onChange={dropdownOnChange}
+      onChange={onChange}
       disabled={disabled}
       onKeyDown={handleKeyDown}
     >
@@ -164,7 +246,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn("block h-full w-full outline-none", buttonContainerClassName)}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
             {button}
           </button>
@@ -180,24 +262,77 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
               },
               buttonContainerClassName
             )}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
-            <DropdownButton
-              className={buttonClassName}
-              isActive={isOpen}
-              tooltipHeading="Cycle"
-              tooltipContent={selectedCycle?.name ?? placeholder}
-              showTooltip={showTooltip}
-              variant={buttonVariant}
-            >
-              {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate">{selectedCycle?.name ?? placeholder}</span>
-              )}
-              {dropdownArrow && (
-                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
-              )}
-            </DropdownButton>
+            {/* TODO: move button components to a single file for each dropdown */}
+            {buttonVariant === "border-with-text" ? (
+              <BorderButton
+                cycle={selectedCycle}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "border-without-text" ? (
+              <BorderButton
+                cycle={selectedCycle}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-with-text" ? (
+              <BackgroundButton
+                cycle={selectedCycle}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-without-text" ? (
+              <BackgroundButton
+                cycle={selectedCycle}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-with-text" ? (
+              <TransparentButton
+                cycle={selectedCycle}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-without-text" ? (
+              <TransparentButton
+                cycle={selectedCycle}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : null}
           </button>
         )}
       </Combobox.Button>
@@ -231,6 +366,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={closeDropdown}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/date.tsx

@@ -2,19 +2,17 @@ import React, { useRef, useState } from "react";
 import { Combobox } from "@headlessui/react";
 import DatePicker from "react-datepicker";
 import { usePopper } from "react-popper";
-import { CalendarDays, X } from "lucide-react";
+import { Calendar, CalendarDays, X } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// components
-import { DropdownButton } from "./buttons";
+// ui
+import { Tooltip } from "@plane/ui";
 // helpers
 import { renderFormattedDate } from "helpers/date-time.helper";
 import { cn } from "helpers/common.helper";
 // types
 import { TDropdownProps } from "./types";
-// constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   clearIconClassName?: string;
@@ -25,6 +23,157 @@ type Props = TDropdownProps & {
   onChange: (val: Date | null) => void;
   value: Date | string | null;
   closeOnSelect?: boolean;
+  showPlaceholderIcon?: boolean;
+};
+
+type ButtonProps = {
+  className?: string;
+  clearIconClassName: string;
+  date: string | Date | null;
+  icon: React.ReactNode;
+  isClearable: boolean;
+  hideIcon?: boolean;
+  hideText?: boolean;
+  isActive?: boolean;
+  onClear: () => void;
+  placeholder: string;
+  tooltip: boolean;
+  showPlaceholderIcon?: boolean;
+};
+
+const BorderButton = (props: ButtonProps) => {
+  const {
+    className,
+    clearIconClassName,
+    date,
+    icon,
+    isClearable,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    onClear,
+    placeholder,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip
+      tooltipHeading={placeholder}
+      tooltipContent={date ? renderFormattedDate(date) : "None"}
+      disabled={!tooltip}
+    >
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {!hideIcon && icon}
+        {!hideText && <span className="flex-grow truncate">{date ? renderFormattedDate(date) : placeholder}</span>}
+        {isClearable && (
+          <X
+            className={cn("h-2 w-2 flex-shrink-0", clearIconClassName)}
+            onClick={(e) => {
+              e.stopPropagation();
+              onClear();
+            }}
+          />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const BackgroundButton = (props: ButtonProps) => {
+  const {
+    className,
+    clearIconClassName,
+    date,
+    icon,
+    isClearable,
+    hideIcon = false,
+    hideText = false,
+    onClear,
+    placeholder,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip
+      tooltipHeading={placeholder}
+      tooltipContent={date ? renderFormattedDate(date) : "None"}
+      disabled={!tooltip}
+    >
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
+          className
+        )}
+      >
+        {!hideIcon && icon}
+        {!hideText && <span className="flex-grow truncate">{date ? renderFormattedDate(date) : placeholder}</span>}
+        {isClearable && (
+          <X
+            className={cn("h-2 w-2 flex-shrink-0", clearIconClassName)}
+            onClick={(e) => {
+              e.stopPropagation();
+              onClear();
+            }}
+          />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const TransparentButton = (props: ButtonProps) => {
+  const {
+    className,
+    clearIconClassName,
+    date,
+    icon,
+    isClearable,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    onClear,
+    placeholder,
+    tooltip,
+    showPlaceholderIcon = false,
+  } = props;
+
+  return (
+    <Tooltip
+      tooltipHeading={placeholder}
+      tooltipContent={date ? renderFormattedDate(date) : "None"}
+      disabled={!tooltip}
+    >
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {!hideIcon && icon}
+        {!hideText && <span className="flex-grow truncate">{date ? renderFormattedDate(date) : placeholder}</span>}
+        {showPlaceholderIcon && !date && (
+          <Calendar className="h-2.5 w-2.5 flex-shrink-0 hidden group-hover:inline text-custom-text-400" />
+        )}
+
+        {isClearable && (
+          <X
+            className={cn("h-2 w-2 flex-shrink-0", clearIconClassName)}
+            onClick={(e) => {
+              e.stopPropagation();
+              onClear();
+            }}
+          />
+        )}
+      </div>
+    </Tooltip>
+  );
 };
 
 export const DateDropdown: React.FC<Props> = (props) => {
@@ -44,8 +193,9 @@ export const DateDropdown: React.FC<Props> = (props) => {
     onChange,
     placeholder = "Date",
     placement,
-    showTooltip = false,
     tabIndex,
+    tooltip = false,
+    showPlaceholderIcon = false,
     value,
   } = props;
   const [isOpen, setIsOpen] = useState(false);
@@ -67,36 +217,15 @@ export const DateDropdown: React.FC<Props> = (props) => {
     ],
   });
 
-  const isDateSelected = value && value.toString().trim() !== "";
+  const isDateSelected = value !== null && value !== undefined && value.toString().trim() !== "";
 
-  const onOpen = () => {
+  const openDropdown = () => {
+    setIsOpen(true);
     if (referenceElement) referenceElement.focus();
   };
-
-  const handleClose = () => {
-    if (isOpen) setIsOpen(false);
-    if (referenceElement) referenceElement.blur();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: Date | null) => {
-    onChange(val);
-    if (closeOnSelect) handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
 
   return (
     <Combobox
@@ -105,7 +234,6 @@ export const DateDropdown: React.FC<Props> = (props) => {
       tabIndex={tabIndex}
       className={cn("h-full", className)}
       onKeyDown={handleKeyDown}
-      disabled={disabled}
     >
       <Combobox.Button as={React.Fragment}>
         <button
@@ -119,30 +247,90 @@ export const DateDropdown: React.FC<Props> = (props) => {
             },
             buttonContainerClassName
           )}
-          onClick={handleOnClick}
+          onClick={openDropdown}
         >
-          <DropdownButton
-            className={buttonClassName}
-            isActive={isOpen}
-            tooltipHeading={placeholder}
-            tooltipContent={value ? renderFormattedDate(value) : "None"}
-            showTooltip={showTooltip}
-            variant={buttonVariant}
-          >
-            {!hideIcon && icon}
-            {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-              <span className="flex-grow truncate">{value ? renderFormattedDate(value) : placeholder}</span>
-            )}
-            {isClearable && isDateSelected && (
-              <X
-                className={cn("h-2 w-2 flex-shrink-0", clearIconClassName)}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onChange(null);
-                }}
-              />
-            )}
-          </DropdownButton>
+          {buttonVariant === "border-with-text" ? (
+            <BorderButton
+              date={value}
+              className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+              isActive={isOpen}
+              tooltip={tooltip}
+            />
+          ) : buttonVariant === "border-without-text" ? (
+            <BorderButton
+              date={value}
+              className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+              isActive={isOpen}
+              tooltip={tooltip}
+              hideText
+            />
+          ) : buttonVariant === "background-with-text" ? (
+            <BackgroundButton
+              date={value}
+              className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+              tooltip={tooltip}
+            />
+          ) : buttonVariant === "background-without-text" ? (
+            <BackgroundButton
+              date={value}
+              className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+              tooltip={tooltip}
+              hideText
+            />
+          ) : buttonVariant === "transparent-with-text" ? (
+            <TransparentButton
+              date={value}
+              className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+              isActive={isOpen}
+              tooltip={tooltip}
+              showPlaceholderIcon={showPlaceholderIcon}
+            />
+          ) : buttonVariant === "transparent-without-text" ? (
+            <TransparentButton
+              date={value}
+              className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
+              icon={icon}
+              placeholder={placeholder}
+              isClearable={isClearable && isDateSelected}
+              onClear={() => onChange(null)}
+              isActive={isOpen}
+              tooltip={tooltip}
+              hideText
+              showPlaceholderIcon={showPlaceholderIcon}
+            />
+          ) : null}
         </button>
       </Combobox.Button>
       {isOpen && (
@@ -150,7 +338,10 @@ export const DateDropdown: React.FC<Props> = (props) => {
           <div className="my-1" ref={setPopperElement} style={styles.popper} {...attributes.popper}>
             <DatePicker
               selected={value ? new Date(value) : null}
-              onChange={dropdownOnChange}
+              onChange={(val) => {
+                onChange(val);
+                if (closeOnSelect) closeDropdown();
+              }}
               dateFormat="dd-MM-yyyy"
               minDate={minDate}
               maxDate={maxDate}

web/components/dropdowns/estimate.tsx

@@ -8,14 +8,12 @@ import sortBy from "lodash/sortBy";
 import { useApplication, useEstimate } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// components
-import { DropdownButton } from "./buttons";
+// ui
+import { Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
 import { TDropdownProps } from "./types";
-// constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -26,6 +24,18 @@ type Props = TDropdownProps & {
   value: number | null;
 };
 
+type ButtonProps = {
+  className?: string;
+  estimatePoint: string | null;
+  dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon?: boolean;
+  hideText?: boolean;
+  isActive?: boolean;
+  placeholder: string;
+  tooltip: boolean;
+};
+
 type DropdownOptions =
   | {
       value: number | null;
@@ -34,6 +44,118 @@ type DropdownOptions =
     }[]
   | undefined;
 
+const BorderButton = (props: ButtonProps) => {
+  const {
+    className,
+    estimatePoint,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    placeholder,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip
+      tooltipHeading="Estimate"
+      tooltipContent={estimatePoint !== null ? estimatePoint : placeholder}
+      disabled={!tooltip}
+    >
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
+        {!hideText && (
+          <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const BackgroundButton = (props: ButtonProps) => {
+  const {
+    className,
+    estimatePoint,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip
+      tooltipHeading="Estimate"
+      tooltipContent={estimatePoint !== null ? estimatePoint : placeholder}
+      disabled={!tooltip}
+    >
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
+          className
+        )}
+      >
+        {!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
+        {!hideText && (
+          <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const TransparentButton = (props: ButtonProps) => {
+  const {
+    className,
+    estimatePoint,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    placeholder,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip
+      tooltipHeading="Estimate"
+      tooltipContent={estimatePoint !== null ? estimatePoint : placeholder}
+      disabled={!tooltip}
+    >
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
+        {!hideText && (
+          <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
 export const EstimateDropdown: React.FC<Props> = observer((props) => {
   const {
     button,
@@ -49,8 +171,8 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
     placeholder = "Estimate",
     placement,
     projectId,
-    showTooltip = false,
     tabIndex,
+    tooltip = false,
     value,
   } = props;
   // states
@@ -106,35 +228,15 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
 
   const selectedEstimate = value !== null ? getEstimatePointValue(value, projectId) : null;
 
-  const onOpen = () => {
+  const openDropdown = () => {
+    setIsOpen(true);
+
     if (!activeEstimate && workspaceSlug) fetchProjectEstimates(workspaceSlug, projectId);
     if (referenceElement) referenceElement.focus();
   };
-
-  const handleClose = () => {
-    if (isOpen) setIsOpen(false);
-    if (referenceElement) referenceElement.blur();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: number | null) => {
-    onChange(val);
-    handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
 
   return (
     <Combobox
@@ -143,7 +245,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
       tabIndex={tabIndex}
       className={cn("h-full w-full", className)}
       value={value}
-      onChange={dropdownOnChange}
+      onChange={onChange}
       disabled={disabled}
       onKeyDown={handleKeyDown}
     >
@@ -153,7 +255,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn("block h-full w-full outline-none", buttonContainerClassName)}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
             {button}
           </button>
@@ -169,24 +271,76 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
               },
               buttonContainerClassName
             )}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
-            <DropdownButton
-              className={buttonClassName}
-              isActive={isOpen}
-              tooltipHeading="Estimate"
-              tooltipContent={selectedEstimate !== null ? selectedEstimate : placeholder}
-              showTooltip={showTooltip}
-              variant={buttonVariant}
-            >
-              {!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate">{selectedEstimate !== null ? selectedEstimate : placeholder}</span>
-              )}
-              {dropdownArrow && (
-                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
-              )}
-            </DropdownButton>
+            {buttonVariant === "border-with-text" ? (
+              <BorderButton
+                estimatePoint={selectedEstimate}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "border-without-text" ? (
+              <BorderButton
+                estimatePoint={selectedEstimate}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-with-text" ? (
+              <BackgroundButton
+                estimatePoint={selectedEstimate}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-without-text" ? (
+              <BackgroundButton
+                estimatePoint={selectedEstimate}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-with-text" ? (
+              <TransparentButton
+                estimatePoint={selectedEstimate}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-without-text" ? (
+              <TransparentButton
+                estimatePoint={selectedEstimate}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : null}
           </button>
         )}
       </Combobox.Button>
@@ -220,6 +374,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={closeDropdown}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/index.ts

@@ -3,6 +3,7 @@ export * from "./cycle";
 export * from "./date";
 export * from "./estimate";
 export * from "./module";
+export * from "./module-select";
 export * from "./priority";
 export * from "./project";
 export * from "./state";

web/components/dropdowns/member/avatar.tsx

@@ -1,37 +0,0 @@
-import { observer } from "mobx-react-lite";
-// hooks
-import { useMember } from "hooks/store";
-// ui
-import { Avatar, AvatarGroup, UserGroupIcon } from "@plane/ui";
-
-type AvatarProps = {
-  showTooltip: boolean;
-  userIds: string | string[] | null;
-};
-
-export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
-  const { showTooltip, userIds } = props;
-  // store hooks
-  const { getUserDetails } = useMember();
-
-  if (Array.isArray(userIds)) {
-    if (userIds.length > 0)
-      return (
-        <AvatarGroup size="md" showTooltip={!showTooltip}>
-          {userIds.map((userId) => {
-            const userDetails = getUserDetails(userId);
-
-            if (!userDetails) return;
-            return <Avatar key={userId} src={userDetails.avatar} name={userDetails.display_name} />;
-          })}
-        </AvatarGroup>
-      );
-  } else {
-    if (userIds) {
-      const userDetails = getUserDetails(userIds);
-      return <Avatar src={userDetails?.avatar} name={userDetails?.display_name} size="md" showTooltip={!showTooltip} />;
-    }
-  }
-
-  return <UserGroupIcon className="h-3 w-3 flex-shrink-0" />;
-});

web/components/dropdowns/member/buttons.tsx

@@ -0,0 +1,187 @@
+import { observer } from "mobx-react-lite";
+import { ChevronDown } from "lucide-react";
+// hooks
+import { useMember } from "hooks/store";
+// ui
+import { Avatar, AvatarGroup, Tooltip, UserGroupIcon } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
+
+type ButtonProps = {
+  className?: string;
+  dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  placeholder: string;
+  hideIcon?: boolean;
+  hideText?: boolean;
+  isActive?: boolean;
+  tooltip: boolean;
+  userIds: string | string[] | null;
+};
+
+const ButtonAvatars = observer(({ tooltip, userIds }: { tooltip: boolean; userIds: string | string[] | null }) => {
+  const { getUserDetails } = useMember();
+
+  if (Array.isArray(userIds)) {
+    if (userIds.length > 0)
+      return (
+        <AvatarGroup size="md" showTooltip={!tooltip}>
+          {userIds.map((userId) => {
+            const userDetails = getUserDetails(userId);
+
+            if (!userDetails) return;
+            return <Avatar key={userId} src={userDetails.avatar} name={userDetails.display_name} />;
+          })}
+        </AvatarGroup>
+      );
+  } else {
+    if (userIds) {
+      const userDetails = getUserDetails(userIds);
+      return <Avatar src={userDetails?.avatar} name={userDetails?.display_name} size="md" showTooltip={!tooltip} />;
+    }
+  }
+
+  return <UserGroupIcon className="h-3 w-3 flex-shrink-0" />;
+});
+
+export const BorderButton = observer((props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    placeholder,
+    userIds,
+    tooltip,
+  } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  const isArray = Array.isArray(userIds);
+
+  return (
+    <Tooltip
+      tooltipHeading={placeholder}
+      tooltipContent={`${userIds?.length ?? 0} assignee${userIds?.length !== 1 ? "s" : ""}`}
+      disabled={!tooltip}
+    >
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {!hideIcon && <ButtonAvatars tooltip={tooltip} userIds={userIds} />}
+        {!hideText && (
+          <span className="flex-grow truncate text-sm leading-5">
+            {isArray && userIds.length > 0
+              ? userIds.length === 1
+                ? getUserDetails(userIds[0])?.display_name
+                : ""
+              : placeholder}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+});
+
+export const BackgroundButton = observer((props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    userIds,
+    tooltip,
+  } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  const isArray = Array.isArray(userIds);
+
+  return (
+    <Tooltip
+      tooltipHeading={placeholder}
+      tooltipContent={`${userIds?.length ?? 0} assignee${userIds?.length !== 1 ? "s" : ""}`}
+      disabled={!tooltip}
+    >
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
+          className
+        )}
+      >
+        {!hideIcon && <ButtonAvatars tooltip={tooltip} userIds={userIds} />}
+        {!hideText && (
+          <span className="flex-grow truncate text-sm leading-5">
+            {isArray && userIds.length > 0
+              ? userIds.length === 1
+                ? getUserDetails(userIds[0])?.display_name
+                : ""
+              : placeholder}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+});
+
+export const TransparentButton = observer((props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    placeholder,
+    userIds,
+    tooltip,
+  } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  const isArray = Array.isArray(userIds);
+
+  return (
+    <Tooltip
+      tooltipHeading={placeholder}
+      tooltipContent={`${userIds?.length ?? 0} assignee${userIds?.length !== 1 ? "s" : ""}`}
+      disabled={!tooltip}
+    >
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {!hideIcon && <ButtonAvatars tooltip={tooltip} userIds={userIds} />}
+        {!hideText && (
+          <span className="flex-grow truncate text-sm leading-5">
+            {isArray && userIds.length > 0
+              ? userIds.length === 1
+                ? getUserDetails(userIds[0])?.display_name
+                : ""
+              : placeholder}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+});

web/components/dropdowns/member/index.ts

@@ -1,2 +1,3 @@
+export * from "./buttons";
 export * from "./project-member";
 export * from "./workspace-member";

web/components/dropdowns/member/project-member.tsx

@@ -2,22 +2,19 @@ import { Fragment, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Check, ChevronDown, Search } from "lucide-react";
+import { Check, Search } from "lucide-react";
 // hooks
 import { useApplication, useMember, useUser } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
-import { ButtonAvatars } from "./avatar";
-import { DropdownButton } from "../buttons";
+import { BackgroundButton, BorderButton, TransparentButton } from "components/dropdowns";
 // icons
 import { Avatar } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
 import { MemberDropdownProps } from "./types";
-// constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
 
 type Props = {
   projectId: string;
@@ -39,8 +36,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
     placeholder = "Members",
     placement,
     projectId,
-    showTooltip = false,
     tabIndex,
+    tooltip = false,
     value,
   } = props;
   // states
@@ -99,35 +96,15 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
   };
   if (multiple) comboboxProps.multiple = true;
 
-  const onOpen = () => {
+  const openDropdown = () => {
+    setIsOpen(true);
+
     if (!projectMemberIds && workspaceSlug) fetchProjectMembers(workspaceSlug, projectId);
     if (referenceElement) referenceElement.focus();
   };
-
-  const handleClose = () => {
-    if (isOpen) setIsOpen(false);
-    if (referenceElement) referenceElement.blur();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: string & string[]) => {
-    onChange(val);
-    if (!multiple) handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
 
   return (
     <Combobox
@@ -135,7 +112,6 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
       ref={dropdownRef}
       tabIndex={tabIndex}
       className={cn("h-full", className)}
-      onChange={dropdownOnChange}
       onKeyDown={handleKeyDown}
       {...comboboxProps}
     >
@@ -145,7 +121,7 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn("block h-full w-full outline-none", buttonContainerClassName)}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
             {button}
           </button>
@@ -161,30 +137,76 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
               },
               buttonContainerClassName
             )}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
-            <DropdownButton
-              className={buttonClassName}
-              isActive={isOpen}
-              tooltipHeading={placeholder}
-              tooltipContent={`${value?.length ?? 0} assignee${value?.length !== 1 ? "s" : ""}`}
-              showTooltip={showTooltip}
-              variant={buttonVariant}
-            >
-              {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} />}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate text-sm leading-5">
-                  {Array.isArray(value) && value.length > 0
-                    ? value.length === 1
-                      ? getUserDetails(value[0])?.display_name
-                      : ""
-                    : placeholder}
-                </span>
-              )}
-              {dropdownArrow && (
-                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
-              )}
-            </DropdownButton>
+            {buttonVariant === "border-with-text" ? (
+              <BorderButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "border-without-text" ? (
+              <BorderButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : buttonVariant === "background-with-text" ? (
+              <BackgroundButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-without-text" ? (
+              <BackgroundButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : buttonVariant === "transparent-with-text" ? (
+              <TransparentButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-without-text" ? (
+              <TransparentButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : null}
           </button>
         )}
       </Combobox.Button>
@@ -218,6 +240,9 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={() => {
+                        if (!multiple) closeDropdown();
+                      }}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/member/workspace-member.tsx

@@ -2,22 +2,19 @@ import { Fragment, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Check, ChevronDown, Search } from "lucide-react";
+import { Check, Search } from "lucide-react";
 // hooks
 import { useMember, useUser } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
-import { ButtonAvatars } from "./avatar";
-import { DropdownButton } from "../buttons";
+import { BackgroundButton, BorderButton, TransparentButton } from "components/dropdowns";
 // icons
 import { Avatar } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
 import { MemberDropdownProps } from "./types";
-// constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
 
 export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((props) => {
   const {
@@ -34,13 +31,13 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
     onChange,
     placeholder = "Members",
     placement,
-    showTooltip = false,
     tabIndex,
+    tooltip = false,
     value,
   } = props;
   // states
   const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   // popper-js refs
@@ -90,34 +87,13 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
   };
   if (multiple) comboboxProps.multiple = true;
 
-  const onOpen = () => {
+  const openDropdown = () => {
+    setIsOpen(true);
     if (referenceElement) referenceElement.focus();
   };
-
-  const handleClose = () => {
-    if (isOpen) setIsOpen(false);
-    if (referenceElement) referenceElement.blur();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: string & string[]) => {
-    onChange(val);
-    if (!multiple) handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
 
   return (
     <Combobox
@@ -127,7 +103,6 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
       className={cn("h-full", className)}
       {...comboboxProps}
       handleKeyDown={handleKeyDown}
-      onChange={dropdownOnChange}
     >
       <Combobox.Button as={Fragment}>
         {button ? (
@@ -135,7 +110,6 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
             ref={setReferenceElement}
             type="button"
             className={cn("block h-full w-full outline-none", buttonContainerClassName)}
-            onClick={handleOnClick}
           >
             {button}
           </button>
@@ -151,82 +125,124 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
               },
               buttonContainerClassName
             )}
-            onClick={handleOnClick}
           >
-            <DropdownButton
-              className={buttonClassName}
-              isActive={isOpen}
-              tooltipHeading={placeholder}
-              tooltipContent={`${value?.length ?? 0} assignee${value?.length !== 1 ? "s" : ""}`}
-              showTooltip={showTooltip}
-              variant={buttonVariant}
-            >
-              {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} />}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate text-sm leading-5">
-                  {Array.isArray(value) && value.length > 0
-                    ? value.length === 1
-                      ? getUserDetails(value[0])?.display_name
-                      : ""
-                    : placeholder}
-                </span>
-              )}
-              {dropdownArrow && (
-                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
-              )}
-            </DropdownButton>
+            {buttonVariant === "border-with-text" ? (
+              <BorderButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "border-without-text" ? (
+              <BorderButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : buttonVariant === "background-with-text" ? (
+              <BackgroundButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-without-text" ? (
+              <BackgroundButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : buttonVariant === "transparent-with-text" ? (
+              <TransparentButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-without-text" ? (
+              <TransparentButton
+                userIds={value}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : null}
           </button>
         )}
       </Combobox.Button>
-      {isOpen && (
-        <Combobox.Options className="fixed z-10" static>
-          <div
-            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
-              <Combobox.Input
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-            </div>
-            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
-              {filteredOptions ? (
-                filteredOptions.length > 0 ? (
-                  filteredOptions.map((option) => (
-                    <Combobox.Option
-                      key={option.value}
-                      value={option.value}
-                      className={({ active, selected }) =>
-                        `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
-                          active ? "bg-custom-background-80" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                      }
-                    >
-                      {({ selected }) => (
-                        <>
-                          <span className="flex-grow truncate">{option.content}</span>
-                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-                        </>
-                      )}
-                    </Combobox.Option>
-                  ))
-                ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
-                )
-              ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
-              )}
-            </div>
+      <Combobox.Options className="fixed z-10">
+        <div
+          className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
           </div>
-        </Combobox.Options>
-      )}
+          <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                    onClick={() => {
+                      if (!multiple) closeDropdown();
+                    }}
+                  >
+                    {({ selected }) => (
+                      <>
+                        <span className="flex-grow truncate">{option.content}</span>
+                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+              )
+            ) : (
+              <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
     </Combobox>
   );
 });

web/components/dropdowns/module-select/button.tsx

@@ -0,0 +1,114 @@
+import { FC } from "react";
+import { twMerge } from "tailwind-merge";
+import { observer } from "mobx-react-lite";
+import { ChevronDown, X } from "lucide-react";
+// hooks
+import { useModule } from "hooks/store";
+// ui and components
+import { DiceIcon, Tooltip } from "@plane/ui";
+// types
+import { TModuleSelectButton } from "./types";
+
+export const ModuleSelectButton: FC<TModuleSelectButton> = observer((props) => {
+  const {
+    value,
+    onChange,
+    placeholder,
+    buttonClassName,
+    buttonVariant,
+    hideIcon,
+    hideText,
+    dropdownArrow,
+    dropdownArrowClassName,
+    showTooltip,
+    showCount,
+  } = props;
+  // hooks
+  const { getModuleById } = useModule();
+
+  return (
+    <div
+      className={twMerge(
+        `w-full h-full relative overflow-hidden flex justify-between items-center gap-1 rounded text-sm px-2`,
+        buttonVariant === "border-with-text"
+          ? `border-[0.5px] border-custom-border-300 hover:bg-custom-background-80`
+          : ``,
+        buttonVariant === "border-without-text"
+          ? `border-[0.5px] border-custom-border-300 hover:bg-custom-background-80`
+          : ``,
+        buttonVariant === "background-with-text" ? `bg-custom-background-80` : ``,
+        buttonVariant === "background-without-text" ? `bg-custom-background-80` : ``,
+        buttonVariant === "transparent-with-text" ? `hover:bg-custom-background-80` : ``,
+        buttonVariant === "transparent-without-text" ? `hover:bg-custom-background-80` : ``,
+        buttonClassName
+      )}
+    >
+      <div className="relative overflow-hidden h-full flex flex-wrap items-center gap-1">
+        {value && typeof value === "string" ? (
+          <div className="relative overflow-hidden flex items-center gap-1.5">
+            {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
+            {!hideText && (
+              <span className="w-full overflow-hidden truncate inline-block line-clamp-1 capitalize">
+                {getModuleById(value)?.name || placeholder}
+              </span>
+            )}
+          </div>
+        ) : value && Array.isArray(value) && value.length > 0 ? (
+          showCount ? (
+            <div className="relative overflow-hidden flex items-center gap-1.5">
+              {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
+              {!hideText && (
+                <span className="w-full overflow-hidden truncate inline-block line-clamp-1 capitalize">
+                  {value.length} Modules
+                </span>
+              )}
+            </div>
+          ) : (
+            value.map((moduleId) => {
+              const _module = getModuleById(moduleId);
+              if (!_module) return <></>;
+              return (
+                <div className="relative flex justify-between items-center gap-1 min-w-[60px] max-w-[84px] overflow-hidden bg-custom-background-80 px-1.5 py-1 rounded">
+                  <Tooltip tooltipContent={_module?.name} disabled={!showTooltip}>
+                    <div className="relative overflow-hidden flex items-center gap-1.5">
+                      {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
+                      {!hideText && (
+                        <span className="w-full truncate inline-block line-clamp-1 capitalize">{_module?.name}</span>
+                      )}
+                    </div>
+                  </Tooltip>
+                  <Tooltip tooltipContent="Remove" disabled={!showTooltip}>
+                    <span
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onChange(_module.id);
+                      }}
+                    >
+                      <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                    </span>
+                  </Tooltip>
+                </div>
+              );
+            })
+          )
+        ) : (
+          !hideText && (
+            <div className="relative overflow-hidden flex items-center gap-1.5">
+              {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
+              {!hideText && (
+                <span className="w-full overflow-hidden truncate inline-block line-clamp-1 capitalize">
+                  {placeholder}
+                </span>
+              )}
+            </div>
+          )
+        )}
+      </div>
+
+      {dropdownArrow && (
+        <ChevronDown className={twMerge("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
+    </div>
+  );
+});

web/components/dropdowns/module-select/index.ts

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

web/components/dropdowns/module-select/select.tsx

@@ -0,0 +1,227 @@
+import { FC, useEffect, useRef, useState, Fragment } from "react";
+import { observer } from "mobx-react-lite";
+import { Combobox } from "@headlessui/react";
+import { usePopper } from "react-popper";
+import { Check, Search } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+// hooks
+import { useModule } from "hooks/store";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// components
+import { ModuleSelectButton } from "./";
+// types
+import { TModuleSelectDropdown, TModuleSelectDropdownOption } from "./types";
+import { DiceIcon } from "@plane/ui";
+
+export const ModuleSelectDropdown: FC<TModuleSelectDropdown> = observer((props) => {
+  // props
+  const {
+    workspaceSlug,
+    projectId,
+    value = undefined,
+    onChange,
+    placeholder = "Module",
+    multiple = false,
+    disabled = false,
+    className = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonVariant = "transparent-with-text",
+    hideIcon = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    showTooltip = false,
+    showCount = false,
+    placement,
+    tabIndex,
+    button,
+  } = props;
+  // states
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+  // store hooks
+  const { getProjectModuleIds, fetchModules, getModuleById } = useModule();
+
+  const moduleIds = getProjectModuleIds(projectId);
+
+  const options: TModuleSelectDropdownOption[] | undefined = moduleIds?.map((moduleId) => {
+    const moduleDetails = getModuleById(moduleId);
+    return {
+      value: moduleId,
+      query: `${moduleDetails?.name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <DiceIcon className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{moduleDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+  !multiple &&
+    options?.unshift({
+      value: undefined,
+      query: "No module",
+      content: (
+        <div className="flex items-center gap-2">
+          <DiceIcon className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">No module</span>
+        </div>
+      ),
+    });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  // fetch modules of the project if not already present in the store
+  useEffect(() => {
+    if (!workspaceSlug) return;
+
+    if (!moduleIds) fetchModules(workspaceSlug, projectId);
+  }, [moduleIds, fetchModules, projectId, workspaceSlug]);
+
+  const openDropdown = () => {
+    if (isOpen) closeDropdown();
+    else {
+      setIsOpen(true);
+      if (referenceElement) referenceElement.focus();
+    }
+  };
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
+
+  const comboboxProps: any = {};
+  if (multiple) comboboxProps.multiple = true;
+
+  return (
+    <Combobox
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={twMerge("h-full", className)}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      {...comboboxProps}
+    >
+      <Combobox.Button as={Fragment}>
+        {button ? (
+          <button
+            ref={setReferenceElement}
+            type="button"
+            className={twMerge(
+              "block h-full max-w-full outline-none",
+              disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer",
+              buttonContainerClassName
+            )}
+            onClick={openDropdown}
+          >
+            {button}
+          </button>
+        ) : (
+          <button
+            ref={setReferenceElement}
+            type="button"
+            className={twMerge(
+              "block h-full max-w-full outline-none ",
+              disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer",
+              buttonContainerClassName
+            )}
+            onClick={openDropdown}
+          >
+            <ModuleSelectButton
+              value={value}
+              onChange={onChange}
+              placeholder={placeholder}
+              disabled={disabled}
+              buttonClassName={buttonClassName}
+              buttonVariant={buttonVariant}
+              hideIcon={hideIcon}
+              hideText={["border-without-text", "background-without-text", "transparent-without-text"].includes(
+                buttonVariant
+              )}
+              dropdownArrow={dropdownArrow}
+              dropdownArrowClassName={dropdownArrowClassName}
+              showTooltip={showTooltip}
+              showCount={showCount}
+            />
+          </button>
+        )}
+      </Combobox.Button>
+      {isOpen && (
+        <Combobox.Options className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+              <Combobox.Input
+                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search"
+                displayValue={(moduleIds: any) => {
+                  const displayValueOptions: TModuleSelectDropdownOption[] | undefined = options?.filter((_module) =>
+                    moduleIds.includes(_module.value)
+                  );
+                  return displayValueOptions?.map((_option) => _option.query).join(", ") || "Select Module";
+                }}
+              />
+            </div>
+            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+              {filteredOptions ? (
+                filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => (
+                    <Combobox.Option
+                      key={option.value}
+                      value={option.value}
+                      className={({ active, selected }) =>
+                        `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+                          active ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                      onClick={() => !multiple && closeDropdown()}
+                    >
+                      {({ selected }) => (
+                        <>
+                          <span className="flex-grow truncate">{option.content}</span>
+                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  ))
+                ) : (
+                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+                )
+              ) : (
+                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </Combobox>
+  );
+});

web/components/dropdowns/module-select/types.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+import { Placement } from "@popperjs/core";
+import { TDropdownProps, TButtonVariants } from "../types";
+
+type TModuleSelectDropdownRoot = Omit<
+  TDropdownProps,
+  "buttonClassName",
+  "buttonContainerClassName",
+  "buttonContainerClassName",
+  "className",
+  "disabled",
+  "hideIcon",
+  "placeholder",
+  "placement",
+  "tabIndex",
+  "tooltip"
+>;
+
+export type TModuleSelectDropdownBase = {
+  value: string | string[] | undefined;
+  onChange: (moduleIds: undefined | string | (string | undefined)[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  buttonClassName?: string;
+  buttonVariant?: TButtonVariants;
+  hideIcon?: boolean;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  showTooltip?: boolean;
+  showCount?: boolean;
+};
+
+export type TModuleSelectButton = TModuleSelectDropdownBase & { hideText?: boolean };
+
+export type TModuleSelectDropdown = TModuleSelectDropdownBase & {
+  workspaceSlug: string;
+  projectId: string;
+  multiple?: boolean;
+  className?: string;
+  buttonContainerClassName?: string;
+  placement?: Placement;
+  tabIndex?: number;
+  button?: ReactNode;
+};
+
+export type TModuleSelectDropdownOption = {
+  value: string | undefined;
+  query: string;
+  content: JSX.Element;
+};

web/components/dropdowns/module.tsx

@@ -2,40 +2,27 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { Check, ChevronDown, Search, X } from "lucide-react";
+import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useApplication, useModule } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// components
-import { DropdownButton } from "./buttons";
 // icons
 import { DiceIcon, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
+import { IModule } from "@plane/types";
 import { TDropdownProps } from "./types";
-// constants
-import { BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
+  onChange: (val: string | null) => void;
   projectId: string;
-  showCount?: boolean;
-} & (
-    | {
-        multiple: false;
-        onChange: (val: string | null) => void;
-        value: string | null;
-      }
-    | {
-        multiple: true;
-        onChange: (val: string[]) => void;
-        value: string[];
-      }
-  );
+  value: string | null;
+};
 
 type DropdownOptions =
   | {
@@ -45,97 +32,110 @@ type DropdownOptions =
     }[]
   | undefined;
 
-type ButtonContentProps = {
-  disabled: boolean;
+type ButtonProps = {
+  className?: string;
   dropdownArrow: boolean;
   dropdownArrowClassName: string;
-  hideIcon: boolean;
-  hideText: boolean;
-  onChange: (moduleIds: string[]) => void;
+  hideIcon?: boolean;
+  hideText?: boolean;
+  isActive?: boolean;
+  module: IModule | null;
   placeholder: string;
-  showCount: boolean;
-  value: string | string[] | null;
+  tooltip: boolean;
 };
 
-const ButtonContent: React.FC<ButtonContentProps> = (props) => {
+const BorderButton = (props: ButtonProps) => {
   const {
-    disabled,
+    className,
     dropdownArrow,
     dropdownArrowClassName,
-    hideIcon,
-    hideText,
-    onChange,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    module,
     placeholder,
-    showCount,
-    value,
+    tooltip,
   } = props;
-  // store hooks
-  const { getModuleById } = useModule();
 
-  if (Array.isArray(value))
-    return (
-      <>
-        {showCount ? (
-          <>
-            {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
-            <span className="flex-grow truncate text-left">
-              {value.length > 0 ? `${value.length} Module${value.length === 1 ? "" : "s"}` : placeholder}
-            </span>
-          </>
-        ) : value.length > 0 ? (
-          <div className="flex items-center gap-2 py-0.5 flex-wrap">
-            {value.map((moduleId) => {
-              const moduleDetails = getModuleById(moduleId);
-              return (
-                <div
-                  key={moduleId}
-                  className="flex items-center gap-1 bg-custom-background-80 text-custom-text-200 rounded px-1.5 py-1"
-                >
-                  {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
-                  {!hideText && (
-                    <Tooltip tooltipHeading="Title" tooltipContent={moduleDetails?.name}>
-                      <span className="text-xs font-medium flex-grow truncate max-w-40">{moduleDetails?.name}</span>
-                    </Tooltip>
-                  )}
-                  {!disabled && (
-                    <Tooltip tooltipContent="Remove">
-                      <button
-                        type="button"
-                        className="flex-shrink-0"
-                        onClick={() => {
-                          const newModuleIds = value.filter((m) => m !== moduleId);
-                          onChange(newModuleIds);
-                        }}
-                      >
-                        <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
-                      </button>
-                    </Tooltip>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        ) : (
-          <>
-            {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
-            <span className="flex-grow truncate text-left">{placeholder}</span>
-          </>
+  return (
+    <Tooltip tooltipHeading="Module" tooltipContent={module?.name ?? placeholder} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          { "bg-custom-background-80": isActive },
+          className
         )}
-        {dropdownArrow && (
-          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
-        )}
-      </>
-    );
-  else
-    return (
-      <>
+      >
         {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
-        {!hideText && <span className="flex-grow truncate text-left">{value ?? placeholder}</span>}
+        {!hideText && <span className="flex-grow truncate">{module?.name ?? placeholder}</span>}
         {dropdownArrow && (
           <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
         )}
-      </>
-    );
+      </div>
+    </Tooltip>
+  );
+};
+
+const BackgroundButton = (props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    module,
+    placeholder,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip tooltipHeading="Module" tooltipContent={module?.name ?? placeholder} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
+          className
+        )}
+      >
+        {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
+        {!hideText && <span className="flex-grow truncate">{module?.name ?? placeholder}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const TransparentButton = (props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    module,
+    placeholder,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip tooltipHeading="Module" tooltipContent={module?.name ?? placeholder} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
+          { "bg-custom-background-80": isActive },
+          className
+        )}
+      >
+        {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
+        {!hideText && <span className="flex-grow truncate">{module?.name ?? placeholder}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
 };
 
 export const ModuleDropdown: React.FC<Props> = observer((props) => {
@@ -149,14 +149,12 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     dropdownArrow = false,
     dropdownArrowClassName = "",
     hideIcon = false,
-    multiple,
     onChange,
     placeholder = "Module",
     placement,
     projectId,
-    showCount = false,
-    showTooltip = false,
     tabIndex,
+    tooltip = false,
     value,
   } = props;
   // states
@@ -188,6 +186,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
 
   const options: DropdownOptions = moduleIds?.map((moduleId) => {
     const moduleDetails = getModuleById(moduleId);
+
     return {
       value: moduleId,
       query: `${moduleDetails?.name}`,
@@ -199,17 +198,16 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
       ),
     };
   });
-  if (!multiple)
-    options?.unshift({
-      value: null,
-      query: "No module",
-      content: (
-        <div className="flex items-center gap-2">
-          <DiceIcon className="h-3 w-3 flex-shrink-0" />
-          <span className="flex-grow truncate">No module</span>
-        </div>
-      ),
-    });
+  options?.unshift({
+    value: null,
+    query: "No module",
+    content: (
+      <div className="flex items-center gap-2">
+        <DiceIcon className="h-3 w-3 flex-shrink-0" />
+        <span className="flex-grow truncate">No module</span>
+      </div>
+    ),
+  });
 
   const filteredOptions =
     query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
@@ -221,41 +219,15 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     if (!moduleIds) fetchModules(workspaceSlug, projectId);
   }, [moduleIds, fetchModules, projectId, workspaceSlug]);
 
-  const onOpen = () => {
+  const selectedModule = value ? getModuleById(value) : null;
+
+  const openDropdown = () => {
+    setIsOpen(true);
     if (referenceElement) referenceElement.focus();
   };
-
-  const handleClose = () => {
-    if (isOpen) setIsOpen(false);
-    if (referenceElement) referenceElement.blur();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: string & string[]) => {
-    onChange(val);
-    if (!multiple) handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
-  const comboboxProps: any = {
-    value,
-    onChange: dropdownOnChange,
-    disabled,
-  };
-  if (multiple) comboboxProps.multiple = true;
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
 
   return (
     <Combobox
@@ -263,8 +235,10 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
       ref={dropdownRef}
       tabIndex={tabIndex}
       className={cn("h-full", className)}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
       onKeyDown={handleKeyDown}
-      {...comboboxProps}
     >
       <Combobox.Button as={Fragment}>
         {button ? (
@@ -272,7 +246,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn("block h-full w-full outline-none", buttonContainerClassName)}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
             {button}
           </button>
@@ -288,31 +262,76 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
               },
               buttonContainerClassName
             )}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
-            <DropdownButton
-              className={buttonClassName}
-              isActive={isOpen}
-              tooltipHeading="Module"
-              tooltipContent={
-                Array.isArray(value) ? `${value?.length ?? 0} module${value?.length !== 1 ? "s" : ""}` : ""
-              }
-              showTooltip={showTooltip}
-              variant={buttonVariant}
-            >
-              <ButtonContent
-                disabled={disabled}
-                dropdownArrow={dropdownArrow}
+            {buttonVariant === "border-with-text" ? (
+              <BorderButton
+                module={selectedModule}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
                 dropdownArrowClassName={dropdownArrowClassName}
                 hideIcon={hideIcon}
-                hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)}
                 placeholder={placeholder}
-                showCount={showCount}
-                value={value}
-                // @ts-ignore
-                onChange={onChange}
+                isActive={isOpen}
+                tooltip={tooltip}
               />
-            </DropdownButton>
+            ) : buttonVariant === "border-without-text" ? (
+              <BorderButton
+                module={selectedModule}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-with-text" ? (
+              <BackgroundButton
+                module={selectedModule}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-without-text" ? (
+              <BackgroundButton
+                module={selectedModule}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-with-text" ? (
+              <TransparentButton
+                module={selectedModule}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-without-text" ? (
+              <TransparentButton
+                module={selectedModule}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : null}
           </button>
         )}
       </Combobox.Button>
@@ -342,15 +361,11 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
                       key={option.value}
                       value={option.value}
                       className={({ active, selected }) =>
-                        cn(
-                          "w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
-                          {
-                            "bg-custom-background-80": active,
-                            "text-custom-text-100": selected,
-                            "text-custom-text-200": !selected,
-                          }
-                        )
+                        `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+                          active ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={closeDropdown}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/priority.tsx

@@ -15,7 +15,6 @@ import { TIssuePriorities } from "@plane/types";
 import { TDropdownProps } from "./types";
 // constants
 import { ISSUE_PRIORITIES } from "constants/issue";
-import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS, BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -35,7 +34,7 @@ type ButtonProps = {
   isActive?: boolean;
   highlightUrgent: boolean;
   priority: TIssuePriorities;
-  showTooltip: boolean;
+  tooltip: boolean;
 };
 
 const BorderButton = (props: ButtonProps) => {
@@ -47,7 +46,7 @@ const BorderButton = (props: ButtonProps) => {
     hideText = false,
     highlightUrgent,
     priority,
-    showTooltip,
+    tooltip,
   } = props;
 
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
@@ -61,7 +60,7 @@ const BorderButton = (props: ButtonProps) => {
   };
 
   return (
-    <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}>
+    <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!tooltip}>
       <div
         className={cn(
           "h-full flex items-center gap-1.5 border-[0.5px] rounded text-xs px-2 py-0.5",
@@ -116,7 +115,7 @@ const BackgroundButton = (props: ButtonProps) => {
     hideText = false,
     highlightUrgent,
     priority,
-    showTooltip,
+    tooltip,
   } = props;
 
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
@@ -130,7 +129,7 @@ const BackgroundButton = (props: ButtonProps) => {
   };
 
   return (
-    <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}>
+    <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!tooltip}>
       <div
         className={cn(
           "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5",
@@ -186,7 +185,7 @@ const TransparentButton = (props: ButtonProps) => {
     isActive = false,
     highlightUrgent,
     priority,
-    showTooltip,
+    tooltip,
   } = props;
 
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
@@ -200,7 +199,7 @@ const TransparentButton = (props: ButtonProps) => {
   };
 
   return (
-    <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}>
+    <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!tooltip}>
       <div
         className={cn(
           "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
@@ -261,8 +260,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
     highlightUrgent = true,
     onChange,
     placement,
-    showTooltip = false,
     tabIndex,
+    tooltip = false,
     value,
   } = props;
   // states
@@ -303,40 +302,13 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
   const filteredOptions =
     query === "" ? options : options.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
 
-  const onOpen = () => {
+  const openDropdown = () => {
+    setIsOpen(true);
     if (referenceElement) referenceElement.focus();
   };
-
-  const handleClose = () => {
-    if (isOpen) setIsOpen(false);
-    if (referenceElement) referenceElement.blur();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: TIssuePriorities) => {
-    onChange(val);
-    handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
-  const ButtonToRender = BORDER_BUTTON_VARIANTS.includes(buttonVariant)
-    ? BorderButton
-    : BACKGROUND_BUTTON_VARIANTS.includes(buttonVariant)
-    ? BackgroundButton
-    : TransparentButton;
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
 
   return (
     <Combobox
@@ -351,7 +323,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
         className
       )}
       value={value}
-      onChange={dropdownOnChange}
+      onChange={onChange}
       disabled={disabled}
       onKeyDown={handleKeyDown}
     >
@@ -361,7 +333,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
             ref={setReferenceElement}
             type="button"
             className={cn("block h-full w-full outline-none", buttonContainerClassName)}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
             {button}
           </button>
@@ -377,20 +349,86 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
               },
               buttonContainerClassName
             )}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
-            <ButtonToRender
-              priority={value}
-              className={cn(buttonClassName, {
-                "text-white": resolvedTheme === "dark",
-              })}
-              highlightUrgent={highlightUrgent}
-              dropdownArrow={dropdownArrow && !disabled}
-              dropdownArrowClassName={dropdownArrowClassName}
-              hideIcon={hideIcon}
-              showTooltip={showTooltip}
-              hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)}
-            />
+            {buttonVariant === "border-with-text" ? (
+              <BorderButton
+                priority={value}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
+                highlightUrgent={highlightUrgent}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "border-without-text" ? (
+              <BorderButton
+                priority={value}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
+                highlightUrgent={highlightUrgent}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : buttonVariant === "background-with-text" ? (
+              <BackgroundButton
+                priority={value}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
+                highlightUrgent={highlightUrgent}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-without-text" ? (
+              <BackgroundButton
+                priority={value}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
+                highlightUrgent={highlightUrgent}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : buttonVariant === "transparent-with-text" ? (
+              <TransparentButton
+                priority={value}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
+                highlightUrgent={highlightUrgent}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-without-text" ? (
+              <TransparentButton
+                priority={value}
+                className={cn(buttonClassName, {
+                  "text-white": resolvedTheme === "dark",
+                })}
+                highlightUrgent={highlightUrgent}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                isActive={isOpen}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : null}
           </button>
         )}
       </Combobox.Button>
@@ -423,6 +461,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                         active ? "bg-custom-background-80" : ""
                       } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                     }
+                    onClick={closeDropdown}
                   >
                     {({ selected }) => (
                       <>

web/components/dropdowns/project.tsx

@@ -7,15 +7,14 @@ import { Check, ChevronDown, Search } from "lucide-react";
 import { useProject } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// components
-import { DropdownButton } from "./buttons";
+// ui
+import { Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 import { renderEmoji } from "helpers/emoji.helper";
 // types
+import { IProject } from "@plane/types";
 import { TDropdownProps } from "./types";
-// constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -25,6 +24,119 @@ type Props = TDropdownProps & {
   value: string | null;
 };
 
+type ButtonProps = {
+  className?: string;
+  dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon?: boolean;
+  hideText?: boolean;
+  placeholder: string;
+  project: IProject | null;
+  tooltip: boolean;
+};
+
+const BorderButton = (props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    project,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip tooltipHeading="Project" tooltipContent={project?.name ?? placeholder} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          className
+        )}
+      >
+        {!hideIcon && (
+          <span className="grid place-items-center flex-shrink-0">
+            {project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
+          </span>
+        )}
+        {!hideText && <span className="flex-grow truncate">{project?.name ?? placeholder}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const BackgroundButton = (props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    project,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip tooltipHeading="Project" tooltipContent={project?.name ?? placeholder} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
+          className
+        )}
+      >
+        {!hideIcon && (
+          <span className="grid place-items-center flex-shrink-0">
+            {project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
+          </span>
+        )}
+        {!hideText && <span className="flex-grow truncate">{project?.name ?? placeholder}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const TransparentButton = (props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    project,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip tooltipHeading="Project" tooltipContent={project?.name ?? placeholder} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
+          className
+        )}
+      >
+        {!hideIcon && (
+          <span className="grid place-items-center flex-shrink-0">
+            {project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
+          </span>
+        )}
+        {!hideText && <span className="flex-grow truncate">{project?.name ?? placeholder}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
 export const ProjectDropdown: React.FC<Props> = observer((props) => {
   const {
     button,
@@ -39,8 +151,8 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
     onChange,
     placeholder = "Project",
     placement,
-    showTooltip = false,
     tabIndex,
+    tooltip = false,
     value,
   } = props;
   // states
@@ -92,34 +204,13 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
 
   const selectedProject = value ? getProjectById(value) : null;
 
-  const onOpen = () => {
+  const openDropdown = () => {
+    setIsOpen(true);
     if (referenceElement) referenceElement.focus();
   };
-
-  const handleClose = () => {
-    if (isOpen) setIsOpen(false);
-    if (referenceElement) referenceElement.blur();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: string) => {
-    onChange(val);
-    handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
 
   return (
     <Combobox
@@ -128,7 +219,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
       tabIndex={tabIndex}
       className={cn("h-full", className)}
       value={value}
-      onChange={dropdownOnChange}
+      onChange={onChange}
       disabled={disabled}
       onKeyDown={handleKeyDown}
     >
@@ -138,7 +229,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn("block h-full w-full outline-none", buttonContainerClassName)}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
             {button}
           </button>
@@ -154,32 +245,72 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
               },
               buttonContainerClassName
             )}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
-            <DropdownButton
-              className={buttonClassName}
-              isActive={isOpen}
-              tooltipHeading="Project"
-              tooltipContent={selectedProject?.name ?? placeholder}
-              showTooltip={showTooltip}
-              variant={buttonVariant}
-            >
-              {!hideIcon && (
-                <span className="grid place-items-center flex-shrink-0">
-                  {selectedProject?.emoji
-                    ? renderEmoji(selectedProject?.emoji)
-                    : selectedProject?.icon_prop
-                    ? renderEmoji(selectedProject?.icon_prop)
-                    : null}
-                </span>
-              )}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate">{selectedProject?.name ?? placeholder}</span>
-              )}
-              {dropdownArrow && (
-                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
-              )}
-            </DropdownButton>
+            {buttonVariant === "border-with-text" ? (
+              <BorderButton
+                project={selectedProject}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "border-without-text" ? (
+              <BorderButton
+                project={selectedProject}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-with-text" ? (
+              <BackgroundButton
+                project={selectedProject}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-without-text" ? (
+              <BackgroundButton
+                project={selectedProject}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-with-text" ? (
+              <TransparentButton
+                project={selectedProject}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-without-text" ? (
+              <TransparentButton
+                project={selectedProject}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                hideText
+                placeholder={placeholder}
+                tooltip={tooltip}
+              />
+            ) : null}
           </button>
         )}
       </Combobox.Button>
@@ -213,6 +344,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={closeDropdown}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/state.tsx

@@ -7,16 +7,13 @@ import { Check, ChevronDown, Search } from "lucide-react";
 import { useApplication, useProjectState } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// components
-import { DropdownButton } from "./buttons";
 // icons
-import { StateGroupIcon } from "@plane/ui";
+import { StateGroupIcon, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
+import { IState } from "@plane/types";
 import { TDropdownProps } from "./types";
-// constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -27,6 +24,130 @@ type Props = TDropdownProps & {
   value: string;
 };
 
+type ButtonProps = {
+  className?: string;
+  dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon?: boolean;
+  hideText?: boolean;
+  isActive?: boolean;
+  state: IState | undefined;
+  tooltip: boolean;
+};
+
+const BorderButton = (props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    state,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip tooltipHeading="State" tooltipContent={state?.name ?? "State"} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
+          {
+            "bg-custom-background-80": isActive,
+          },
+          className
+        )}
+      >
+        {!hideIcon && (
+          <StateGroupIcon
+            stateGroup={state?.group ?? "backlog"}
+            color={state?.color}
+            className="h-3 w-3 flex-shrink-0"
+          />
+        )}
+        {!hideText && <span className="flex-grow truncate">{state?.name ?? "State"}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const BackgroundButton = (props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    state,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip tooltipHeading="State" tooltipContent={state?.name ?? "State"} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
+          className
+        )}
+      >
+        {!hideIcon && (
+          <StateGroupIcon
+            stateGroup={state?.group ?? "backlog"}
+            color={state?.color}
+            className="h-3 w-3 flex-shrink-0"
+          />
+        )}
+        {!hideText && <span className="flex-grow truncate">{state?.name ?? "State"}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
+const TransparentButton = (props: ButtonProps) => {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    state,
+    tooltip,
+  } = props;
+
+  return (
+    <Tooltip tooltipHeading="State" tooltipContent={state?.name ?? "State"} disabled={!tooltip}>
+      <div
+        className={cn(
+          "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
+          {
+            "bg-custom-background-80": isActive,
+          },
+          className
+        )}
+      >
+        {!hideIcon && (
+          <StateGroupIcon
+            stateGroup={state?.group ?? "backlog"}
+            color={state?.color}
+            className="h-3 w-3 flex-shrink-0"
+          />
+        )}
+        {!hideText && <span className="flex-grow truncate">{state?.name ?? "State"}</span>}
+        {dropdownArrow && (
+          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+};
+
 export const StateDropdown: React.FC<Props> = observer((props) => {
   const {
     button,
@@ -41,8 +162,8 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     onChange,
     placement,
     projectId,
-    showTooltip = false,
     tabIndex,
+    tooltip = false,
     value,
   } = props;
   // states
@@ -88,35 +209,14 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
 
   const selectedState = getStateById(value);
 
-  const onOpen = () => {
+  const openDropdown = () => {
+    setIsOpen(true);
     if (!statesList && workspaceSlug) fetchProjectStates(workspaceSlug, projectId);
     if (referenceElement) referenceElement.focus();
   };
-
-  const handleClose = () => {
-    if (isOpen) setIsOpen(false);
-    if (referenceElement) referenceElement.blur();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: string) => {
-    onChange(val);
-    handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
+  const closeDropdown = () => setIsOpen(false);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
 
   return (
     <Combobox
@@ -125,7 +225,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
       tabIndex={tabIndex}
       className={cn("h-full", className)}
       value={value}
-      onChange={dropdownOnChange}
+      onChange={onChange}
       disabled={disabled}
       onKeyDown={handleKeyDown}
     >
@@ -135,7 +235,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn("block h-full w-full outline-none", buttonContainerClassName)}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
             {button}
           </button>
@@ -151,30 +251,70 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
               },
               buttonContainerClassName
             )}
-            onClick={handleOnClick}
+            onClick={openDropdown}
           >
-            <DropdownButton
-              className={buttonClassName}
-              isActive={isOpen}
-              tooltipHeading="State"
-              tooltipContent={selectedState?.name ?? "State"}
-              showTooltip={showTooltip}
-              variant={buttonVariant}
-            >
-              {!hideIcon && (
-                <StateGroupIcon
-                  stateGroup={selectedState?.group ?? "backlog"}
-                  color={selectedState?.color}
-                  className="h-3 w-3 flex-shrink-0"
-                />
-              )}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate">{selectedState?.name ?? "State"}</span>
-              )}
-              {dropdownArrow && (
-                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
-              )}
-            </DropdownButton>
+            {buttonVariant === "border-with-text" ? (
+              <BorderButton
+                state={selectedState}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "border-without-text" ? (
+              <BorderButton
+                state={selectedState}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                isActive={isOpen}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : buttonVariant === "background-with-text" ? (
+              <BackgroundButton
+                state={selectedState}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "background-without-text" ? (
+              <BackgroundButton
+                state={selectedState}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : buttonVariant === "transparent-with-text" ? (
+              <TransparentButton
+                state={selectedState}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                isActive={isOpen}
+                tooltip={tooltip}
+              />
+            ) : buttonVariant === "transparent-without-text" ? (
+              <TransparentButton
+                state={selectedState}
+                className={buttonClassName}
+                dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                isActive={isOpen}
+                tooltip={tooltip}
+                hideText
+              />
+            ) : null}
           </button>
         )}
       </Combobox.Button>
@@ -208,6 +348,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={closeDropdown}
                     >
                       {({ selected }) => (
                         <>

web/components/dropdowns/types.d.ts

@@ -17,6 +17,7 @@ export type TDropdownProps = {
   hideIcon?: boolean;
   placeholder?: string;
   placement?: Placement;
-  showTooltip?: boolean;
   tabIndex?: number;
+  // TODO: rename this prop to showTooltip
+  tooltip?: boolean;
 };

web/components/headers/cycle-issues.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 // hooks
 import {
   useApplication,
-  useEventTracker,
   useCycle,
   useLabel,
   useMember,
@@ -19,7 +18,6 @@ import useLocalStorage from "hooks/use-local-storage";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
 // icons
@@ -71,8 +69,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   const { currentProjectCycleIds, getCycleById } = useCycle();
   const {
     commandPalette: { toggleCreateIssueModal },
+    eventTracker: { setTrackElement },
   } = useApplication();
-  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -153,33 +151,25 @@ export const CycleIssuesHeader: React.FC = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
               }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  label="Cycles"
-                  href={`/${workspaceSlug}/projects/${projectId}/cycles`}
-                  icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
+              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Cycles"
+              link={`/${workspaceSlug}/projects/${projectId}/cycles`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="component"
@@ -239,7 +229,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               </Button>
               <Button
                 onClick={() => {
-                  setTrackElement("Cycle issues page");
+                  setTrackElement("CYCLE_PAGE_HEADER");
                   toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                 }}
                 size="sm"

web/components/headers/cycles.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
+import { useApplication, useProject, useUser } from "hooks/store";
 // ui
 import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
 // helpers
@@ -11,7 +11,6 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 
 export const CyclesHeader: FC = observer(() => {
   // router
@@ -20,8 +19,8 @@ export const CyclesHeader: FC = observer(() => {
   // store hooks
   const {
     commandPalette: { toggleCreateCycleModal },
+    eventTracker: { setTrackElement },
   } = useApplication();
-  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -33,32 +32,29 @@ export const CyclesHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
               }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
+              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Cycles"
             />
           </Breadcrumbs>
         </div>
@@ -70,7 +66,7 @@ export const CyclesHeader: FC = observer(() => {
             size="sm"
             prependIcon={<Plus />}
             onClick={() => {
-              setTrackElement("Cycles page");
+              setTrackElement("CYCLES_PAGE_HEADER");
               toggleCreateCycleModal(true);
             }}
           >

web/components/headers/global-issues.tsx

@@ -8,7 +8,6 @@ import { useLabel, useMember, useUser, useIssues } from "hooks/store";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
 import { CreateUpdateWorkspaceViewModal } from "components/workspace";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui";
 // icons
@@ -109,22 +108,18 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
       <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="relative flex gap-2">
-          <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
-                  icon={
-                    activeLayout === "spreadsheet" ? (
-                      <LayersIcon className="h-4 w-4 text-custom-text-300" />
-                    ) : (
-                      <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
-                    )
-                  }
-                />
+              icon={
+                activeLayout === "spreadsheet" ? (
+                  <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                ) : (
+                  <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
+                )
               }
+              label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
             />
           </Breadcrumbs>
         </div>

web/components/headers/module-issues.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 // hooks
 import {
   useApplication,
-  useEventTracker,
   useLabel,
   useMember,
   useModule,
@@ -19,7 +18,6 @@ import useLocalStorage from "hooks/use-local-storage";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
 // icons
@@ -74,8 +72,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const { projectModuleIds, getModuleById } = useModule();
   const {
     commandPalette: { toggleCreateIssueModal },
+    eventTracker: { setTrackElement },
   } = useApplication();
-  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -156,33 +154,25 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
               }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${projectId}/modules`}
-                  label="Modules"
-                  icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
+              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Modules"
+              link={`/${workspaceSlug}/projects/${projectId}/modules`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="component"
@@ -242,7 +232,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               </Button>
               <Button
                 onClick={() => {
-                  setTrackElement("Module issues page");
+                  setTrackElement("MODULE_PAGE_HEADER");
                   toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                 }}
                 size="sm"

web/components/headers/modules-list.tsx

@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
+import { useApplication, useProject, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 // ui
 import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
@@ -13,7 +13,6 @@ import { MODULE_VIEW_LAYOUTS } from "constants/module";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 
 export const ModulesListHeader: React.FC = observer(() => {
   // router
@@ -21,7 +20,6 @@ export const ModulesListHeader: React.FC = observer(() => {
   const { workspaceSlug } = router.query;
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
-  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -35,32 +33,29 @@ export const ModulesListHeader: React.FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
               }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />}
+              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Modules"
             />
           </Breadcrumbs>
         </div>
@@ -91,10 +86,7 @@ export const ModulesListHeader: React.FC = observer(() => {
             variant="primary"
             size="sm"
             prependIcon={<Plus />}
-            onClick={() => {
-              setTrackElement("Modules page");
-              commandPaletteStore.toggleCreateModuleModal(true);
-            }}
+            onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
           >
             Add Module
           </Button>

web/components/headers/page-details.tsx

@@ -10,7 +10,6 @@ import { Breadcrumbs, Button } from "@plane/ui";
 import { renderEmoji } from "helpers/emoji.helper";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 
 export interface IPagesHeaderProps {
   showButton?: boolean;
@@ -30,47 +29,35 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
               }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
-                  label="Pages"
-                  icon={<FileText className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
+              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+              label="Pages"
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  label={pageDetails?.name ?? "Page"}
-                  icon={<FileText className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
+              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+              label={pageDetails?.name ?? "Page"}
             />
           </Breadcrumbs>
         </div>

web/components/headers/pages.tsx

@@ -11,7 +11,6 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 
 export const PagesHeader = observer(() => {
   // router
@@ -32,32 +31,29 @@ export const PagesHeader = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+              label={currentProjectDetails?.name ?? "Project"}
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
               }
+              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={<BreadcrumbLink label="Pages" icon={<FileText className="h-4 w-4 text-custom-text-300" />} />}
+              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+              label="Pages"
             />
           </Breadcrumbs>
         </div>

web/components/headers/profile-preferences.tsx

@@ -1,13 +1,12 @@
 // components
 import { Breadcrumbs } from "@plane/ui";
-import { BreadcrumbLink } from "components/common";
 
 export const ProfilePreferencesHeader = () => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
       <div>
         <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="My Profile Preferences" />} />
+          <Breadcrumbs.BreadcrumbItem type="text" label="My Profile Preferences" />
         </Breadcrumbs>
       </div>
     </div>

web/components/headers/profile-settings.tsx

@@ -2,7 +2,6 @@ import { FC } from "react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 import { Settings } from "lucide-react";
-import { BreadcrumbLink } from "components/common";
 
 interface IProfileSettingHeader {
   title: string;
@@ -18,15 +17,11 @@ export const ProfileSettingsHeader: FC<IProfileSettingHeader> = (props) => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href="/profile"
-                  label="My Profile"
-                  icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
+              label="My Profile"
+              icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+              link="/profile"
             />
-            <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
+            <Breadcrumbs.BreadcrumbItem type="text" label={title} />
           </Breadcrumbs>
         </div>
       </div>

web/components/headers/project-archived-issue-details.tsx

@@ -16,7 +16,6 @@ import { IssueArchiveService } from "services/issue";
 import { renderEmoji } from "helpers/emoji.helper";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 
 const issueArchiveService = new IssueArchiveService();
 
@@ -42,50 +41,37 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
               }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
-                  label="Archived Issues"
-                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Archived Issues"
+              link={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  label={
-                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
-                    "..."
-                  }
-                />
+              label={
+                `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ?? "..."
               }
             />
           </Breadcrumbs>

web/components/headers/project-archived-issues.tsx

@@ -11,7 +11,6 @@ import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // components
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // types
@@ -72,7 +71,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-14 w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
         <div className="block md:hidden">
           <button
             type="button"
@@ -86,33 +85,25 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
               }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  label="Archived Issues"
-                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Archived Issues"
             />
           </Breadcrumbs>
         </div>

web/components/headers/project-draft-issues.tsx

@@ -6,7 +6,6 @@ import { useIssues, useLabel, useMember, useProject, useProjectState } from "hoo
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // helper
@@ -76,35 +75,30 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
               }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
-              }
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Draft Issues"
             />
           </Breadcrumbs>
         </div>

web/components/headers/project-inbox.tsx

@@ -9,7 +9,6 @@ import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // components
 import { CreateInboxIssueModal } from "components/inbox";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 // helper
 import { renderEmoji } from "helpers/emoji.helper";
 
@@ -25,35 +24,30 @@ export const ProjectInboxHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
               }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
-              }
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Inbox Issues"
             />
           </Breadcrumbs>
         </div>

web/components/headers/project-issue-details.tsx

@@ -14,7 +14,6 @@ import { IssueService } from "services/issue";
 import { ISSUE_DETAILS } from "constants/fetch-keys";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 
 // services
 const issueService = new IssueService();
@@ -36,50 +35,37 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+              icon={
+                currentProjectDetails?.emoji ? (
+                  renderEmoji(currentProjectDetails.emoji)
+                ) : currentProjectDetails?.icon_prop ? (
+                  renderEmoji(currentProjectDetails.icon_prop)
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {currentProjectDetails?.name.charAt(0)}
+                  </span>
+                )
               }
+              label={currentProjectDetails?.name ?? "Project"}
+              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${projectId}/issues`}
-                  label="Issues"
-                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
+              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              label="Issues"
+              link={`/${workspaceSlug}/projects/${projectId}/issues`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  label={
-                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
-                    "..."
-                  }
-                />
+              label={
+                `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ?? "..."
               }
             />
           </Breadcrumbs>

web/components/headers/project-issues.tsx

@@ -4,21 +4,11 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
 // hooks
-import {
-  useApplication,
-  useEventTracker,
-  useLabel,
-  useProject,
-  useProjectState,
-  useUser,
-  useInbox,
-  useMember,
-} from "hooks/store";
+import { useApplication, useLabel, useProject, useProjectState, useUser, useInbox, useMember } from "hooks/store";
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // types
@@ -45,8 +35,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   } = useIssues(EIssuesStoreType.PROJECT);
   const {
     commandPalette: { toggleCreateIssueModal },
+    eventTracker: { setTrackElement },
   } = useApplication();
-  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -116,7 +106,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
       />
       <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <SidebarHamburgerToggle />
+          <SidebarHamburgerToggle/>
           <div className="block md:hidden">
             <button
               type="button"
@@ -130,38 +120,35 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={
-                  <BreadcrumbLink
-                    href={`/${workspaceSlug}/projects`}
-                    label={currentProjectDetails?.name ?? "Project"}
-                    icon={
-                      currentProjectDetails ? (
-                        currentProjectDetails?.emoji ? (
-                          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                            {renderEmoji(currentProjectDetails.emoji)}
-                          </span>
-                        ) : currentProjectDetails?.icon_prop ? (
-                          <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                            {renderEmoji(currentProjectDetails.icon_prop)}
-                          </div>
-                        ) : (
-                          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                            {currentProjectDetails?.name.charAt(0)}
-                          </span>
-                        )
-                      ) : (
-                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                          <Briefcase className="h-4 w-4" />
-                        </span>
-                      )
-                    }
-                  />
+                icon={
+                  currentProjectDetails ? (
+                    currentProjectDetails?.emoji ? (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                        {renderEmoji(currentProjectDetails.emoji)}
+                      </span>
+                    ) : currentProjectDetails?.icon_prop ? (
+                      <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
+                        {renderEmoji(currentProjectDetails.icon_prop)}
+                      </div>
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  ) : (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                      <Briefcase className="h-4 w-4" />
+                    </span>
+                  )
                 }
+                label={currentProjectDetails?.name ?? "Project"}
+                link={`/${workspaceSlug}/projects`}
               />
 
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
+                icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                label="Issues"
               />
             </Breadcrumbs>
           </div>
@@ -230,7 +217,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               </Button>
               <Button
                 onClick={() => {
-                  setTrackElement("Project issues page");
+                  setTrackElement("PROJECT_PAGE_HEADER");
                   toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
                 }}
                 size="sm"

web/components/headers/project-settings.tsx

@@ -11,7 +11,6 @@ import { useProject, useUser } from "hooks/store";
 import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 
 export interface IProjectSettingHeader {
   title: string;
@@ -33,56 +32,46 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <SidebarHamburgerToggle />
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap justify-between">
         <div>
           <div className="z-50">
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={
-                  <BreadcrumbLink
-                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                    label={currentProjectDetails?.name ?? "Project"}
-                    icon={
-                      currentProjectDetails?.emoji ? (
-                        renderEmoji(currentProjectDetails.emoji)
-                      ) : currentProjectDetails?.icon_prop ? (
-                        renderEmoji(currentProjectDetails.icon_prop)
-                      ) : (
-                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                          {currentProjectDetails?.name.charAt(0)}
-                        </span>
-                      )
-                    }
-                  />
+                label={currentProjectDetails?.name ?? "Project"}
+                icon={
+                  currentProjectDetails?.emoji ? (
+                    renderEmoji(currentProjectDetails.emoji)
+                  ) : currentProjectDetails?.icon_prop ? (
+                    renderEmoji(currentProjectDetails.icon_prop)
+                  ) : (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      {currentProjectDetails?.name.charAt(0)}
+                    </span>
+                  )
                 }
+                link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
               />
-              <div className="hidden sm:hidden md:block lg:block">
-                <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
-              </div>
+              <Breadcrumbs.BreadcrumbItem type="component" component={
+                <CustomMenu
+                  className="flex-shrink-0"
+                  maxHeight="lg"
+                  customButton={
+                    <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">{title}</span>
+                  }
+                  placement="bottom-start"
+                  closeOnSelect
+                >
+                  {PROJECT_SETTINGS_LINKS.map((item) => (
+                    <CustomMenu.MenuItem key={item.key} onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}>
+                      {item.label}
+                    </CustomMenu.MenuItem>
+                  ))}
+                </CustomMenu>
+              } />
             </Breadcrumbs>
           </div>
         </div>
-        <CustomMenu
-          className="flex-shrink-0 block sm:block md:hidden lg:hidden"
-          maxHeight="lg"
-          customButton={
-            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">
-              {title}
-            </span>
-          }
-          placement="bottom-start"
-          closeOnSelect
-        >
-          {PROJECT_SETTINGS_LINKS.map((item) => (
-            <CustomMenu.MenuItem
-              key={item.key}
-              onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}
-            >
-              {item.label}
-            </CustomMenu.MenuItem>
-          ))}
-        </CustomMenu>
       </div>
     </div>
   );

web/components/headers/project-view-issues.tsx

@@ -6,7 +6,6 @@ import Link from "next/link";
 // hooks
 import {
   useApplication,
-  useEventTracker,
   useIssues,
   useLabel,
   useMember,
@@ -18,7 +17,6 @@ import {
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, CustomMenu, PhotoFilterIcon } from "@plane/ui";
 // helpers
@@ -42,9 +40,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.PROJECT_VIEW);
-  const { setTrackElement } = useEventTracker();
   const {
     commandPalette: { toggleCreateIssueModal },
+    eventTracker: { setTrackElement },
   } = useApplication();
   const {
     membership: { currentProjectRole },
@@ -114,37 +112,29 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            link={
-              <BreadcrumbLink
-                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                label={currentProjectDetails?.name ?? "Project"}
-                icon={
-                  currentProjectDetails?.emoji ? (
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                      {renderEmoji(currentProjectDetails.emoji)}
-                    </span>
-                  ) : currentProjectDetails?.icon_prop ? (
-                    <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                      {renderEmoji(currentProjectDetails.icon_prop)}
-                    </div>
-                  ) : (
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                      {currentProjectDetails?.name.charAt(0)}
-                    </span>
-                  )
-                }
-              />
+            label={currentProjectDetails?.name ?? "Project"}
+            icon={
+              currentProjectDetails?.emoji ? (
+                <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                  {renderEmoji(currentProjectDetails.emoji)}
+                </span>
+              ) : currentProjectDetails?.icon_prop ? (
+                <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
+                  {renderEmoji(currentProjectDetails.icon_prop)}
+                </div>
+              ) : (
+                <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                  {currentProjectDetails?.name.charAt(0)}
+                </span>
+              )
             }
+            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
           />
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            link={
-              <BreadcrumbLink
-                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
-                label="Views"
-                icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
-              />
-            }
+            icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
+            label="Views"
+            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
           />
           <Breadcrumbs.BreadcrumbItem
             type="component"

web/components/headers/project-views.tsx

@@ -6,7 +6,6 @@ import { useApplication, useProject, useUser } from "hooks/store";
 // components
 import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // constants
@@ -32,38 +31,33 @@ export const ProjectViewsHeader: React.FC = observer(() => {
     <>
       <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <SidebarHamburgerToggle />
+          <SidebarHamburgerToggle/>
           <div>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={
-                  <BreadcrumbLink
-                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                    label={currentProjectDetails?.name ?? "Project"}
-                    icon={
-                      currentProjectDetails?.emoji ? (
-                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                          {renderEmoji(currentProjectDetails.emoji)}
-                        </span>
-                      ) : currentProjectDetails?.icon_prop ? (
-                        <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                          {renderEmoji(currentProjectDetails.icon_prop)}
-                        </div>
-                      ) : (
-                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                          {currentProjectDetails?.name.charAt(0)}
-                        </span>
-                      )
-                    }
-                  />
+                label={currentProjectDetails?.name ?? "Project"}
+                icon={
+                  currentProjectDetails?.emoji ? (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                      {renderEmoji(currentProjectDetails.emoji)}
+                    </span>
+                  ) : currentProjectDetails?.icon_prop ? (
+                    <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
+                      {renderEmoji(currentProjectDetails.icon_prop)}
+                    </div>
+                  ) : (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      {currentProjectDetails?.name.charAt(0)}
+                    </span>
+                  )
                 }
+                link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
               />
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={
-                  <BreadcrumbLink label="Views" icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />} />
-                }
+                icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
+                label="Views"
               />
             </Breadcrumbs>
           </div>

web/components/headers/projects.tsx

@@ -1,19 +1,20 @@
 import { observer } from "mobx-react-lite";
 import { Search, Plus, Briefcase } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
+import { useApplication, useProject, useUser } from "hooks/store";
 // ui
 import { Breadcrumbs, Button } from "@plane/ui";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 
 export const ProjectsHeader = observer(() => {
   // store hooks
-  const { commandPalette: commandPaletteStore } = useApplication();
-  const { setTrackElement } = useEventTracker();
+  const {
+    commandPalette: commandPaletteStore,
+    eventTracker: { setTrackElement },
+  } = useApplication();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -24,12 +25,13 @@ export const ProjectsHeader = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={<BreadcrumbLink label="Projects" icon={<Briefcase className="h-4 w-4 text-custom-text-300" />} />}
+              icon={<Briefcase className="h-4 w-4 text-custom-text-300" />}
+              label="Projects"
             />
           </Breadcrumbs>
         </div>
@@ -51,7 +53,7 @@ export const ProjectsHeader = observer(() => {
             prependIcon={<Plus />}
             size="sm"
             onClick={() => {
-              setTrackElement("Projects page");
+              setTrackElement("PROJECTS_PAGE_HEADER");
               commandPaletteStore.toggleCreateProjectModal(true);
             }}
           >

web/components/headers/user-profile.tsx

@@ -1,16 +1,15 @@
 // ui
 import { Breadcrumbs } from "@plane/ui";
-import { BreadcrumbLink } from "components/common";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
 export const UserProfileHeader = () => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-      <SidebarHamburgerToggle />
+      <SidebarHamburgerToggle/>
       <div>
         <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink href="/profile" label="Activity Overview" />} />
+          <Breadcrumbs.BreadcrumbItem type="text" label="Activity Overview" link="/profile" />
         </Breadcrumbs>
       </div>
     </div>

web/components/headers/workspace-active-cycles.tsx

@@ -1,10 +1,9 @@
 import { observer } from "mobx-react-lite";
 // ui
 import { Breadcrumbs, ContrastIcon } from "@plane/ui";
-import { BreadcrumbLink } from "components/common";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 // icons
 import { Crown } from "lucide-react";
+import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
 export const WorkspaceActiveCycleHeader = observer(() => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
@@ -14,12 +13,8 @@ export const WorkspaceActiveCycleHeader = observer(() => (
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            link={
-              <BreadcrumbLink
-                label="Active Cycles"
-                icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
-              />
-            }
+            icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
+            label="Active Cycles"
           />
         </Breadcrumbs>
         <Crown className="h-3.5 w-3.5 text-amber-400" />

web/components/headers/workspace-analytics.tsx

@@ -4,7 +4,6 @@ import { ArrowLeft, BarChart2 } from "lucide-react";
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 
 export const WorkspaceAnalyticsHeader = () => {
   const router = useRouter();
@@ -29,9 +28,8 @@ export const WorkspaceAnalyticsHeader = () => {
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={
-                  <BreadcrumbLink label="Analytics" icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />} />
-                }
+                icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />}
+                label="Analytics"
               />
             </Breadcrumbs>
           </div>

web/components/headers/workspace-dashboard.tsx

@@ -6,7 +6,7 @@ import { useTheme } from "next-themes";
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 // components
-import { BreadcrumbLink, ProductUpdatesModal } from "components/common";
+import { ProductUpdatesModal } from "components/common";
 import { Breadcrumbs } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
@@ -18,16 +18,15 @@ export const WorkspaceDashboardHeader = () => {
   return (
     <>
       <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
-      <div className="relative z-20 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <SidebarHamburgerToggle />
           <div>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={
-                  <BreadcrumbLink label="Dashboard" icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />} />
-                }
+                icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />}
+                label="Dashboard"
               />
             </Breadcrumbs>
           </div>

web/components/headers/workspace-settings.tsx

@@ -1,14 +1,12 @@
 import { FC } from "react";
 import { useRouter } from "next/router";
 // ui
-import { Breadcrumbs, CustomMenu } from "@plane/ui";
+import { Breadcrumbs } from "@plane/ui";
 import { Settings } from "lucide-react";
 // hooks
 import { observer } from "mobx-react-lite";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
-import { BreadcrumbLink } from "components/common";
 
 export interface IWorkspaceSettingHeader {
   title: string;
@@ -23,41 +21,18 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
+        <SidebarHamburgerToggle/>
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/settings`}
-                  label="Settings"
-                  icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
+              label="Settings"
+              icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+              link={`/${workspaceSlug}/settings`}
             />
-            <div className="hidden sm:hidden md:block lg:block">
-              <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
-            </div>
+            <Breadcrumbs.BreadcrumbItem type="text" label={title} />
           </Breadcrumbs>
         </div>
-        <CustomMenu
-          className="flex-shrink-0 block sm:block md:hidden lg:hidden"
-          maxHeight="lg"
-          customButton={
-            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">
-              {title}
-            </span>
-          }
-          placement="bottom-start"
-          closeOnSelect
-        >
-          {WORKSPACE_SETTINGS_LINKS.map((item) => (
-            <CustomMenu.MenuItem key={item.key} onClick={() => router.push(`/${workspaceSlug}${item.href}`)}>
-              {item.label}
-            </CustomMenu.MenuItem>
-          ))}
-        </CustomMenu>
       </div>
     </div>
   );

web/components/inbox/inbox-issue-actions.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import DatePicker from "react-datepicker";
 import { Popover } from "@headlessui/react";
 // hooks
-import { useUser, useInboxIssues, useIssueDetail, useWorkspace, useEventTracker } from "hooks/store";
+import { useApplication, useUser, useInboxIssues, useIssueDetail, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import {
@@ -38,7 +38,9 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
   // router
   const router = useRouter();
   // hooks
-  const { captureIssueEvent } = useEventTracker();
+  const {
+    eventTracker: { postHogEventTracker },
+  } = useApplication();
   const { currentWorkspace } = useWorkspace();
   const {
     issues: { getInboxIssuesByInboxId, getInboxIssueByIssueId, updateInboxIssueStatus, removeInboxIssue },
@@ -85,19 +87,17 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
           if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !currentWorkspace)
             throw new Error("Missing required parameters");
           await removeInboxIssue(workspaceSlug, projectId, inboxId, inboxIssueId);
-          captureIssueEvent({
-            eventName: "Issue deleted",
-            payload: {
-              id: inboxIssueId,
+          postHogEventTracker(
+            "ISSUE_DELETED",
+            {
               state: "SUCCESS",
-              element: "Inbox page",
             },
-            group: {
+            {
               isGrouping: true,
               groupType: "Workspace_metrics",
               groupId: currentWorkspace?.id!,
-            },
-          });
+            }
+          );
           router.push({
             pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
           });
@@ -107,19 +107,17 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             title: "Error!",
             message: "Something went wrong while deleting inbox issue. Please try again.",
           });
-          captureIssueEvent({
-            eventName: "Issue deleted",
-            payload: {
-              id: inboxIssueId,
+          postHogEventTracker(
+            "ISSUE_DELETED",
+            {
               state: "FAILED",
-              element: "Inbox page",
             },
-            group: {
+            {
               isGrouping: true,
               groupType: "Workspace_metrics",
               groupId: currentWorkspace?.id!,
-            },
-          });
+            }
+          );
         }
       },
     }),
@@ -132,7 +130,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
       updateInboxIssueStatus,
       removeInboxIssue,
       setToastAlert,
-      captureIssueEvent,
+      postHogEventTracker,
       router,
     ]
   );

web/components/inbox/modals/create-issue-modal.tsx

@@ -6,7 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 import { Sparkle } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useWorkspace, useInboxIssues, useMention } from "hooks/store";
+import { useApplication, useWorkspace, useInboxIssues, useMention } from "hooks/store";
 import useToast from "hooks/use-toast";
 // services
 import { FileService } from "services/file.service";
@@ -63,8 +63,8 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
   } = useInboxIssues();
   const {
     config: { envConfig },
+    eventTracker: { postHogEventTracker },
   } = useApplication();
-  const { captureIssueEvent } = useEventTracker();
   const { currentWorkspace } = useWorkspace();
 
   const {
@@ -93,37 +93,32 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
           router.push(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${res.id}`);
           handleClose();
         } else reset(defaultValues);
-        captureIssueEvent({
-          eventName: "Issue created",
-          payload: {
-            ...formData,
+        postHogEventTracker(
+          "ISSUE_CREATED",
+          {
+            ...res,
             state: "SUCCESS",
-            element: "Inbox page",
           },
-          group: {
+          {
             isGrouping: true,
             groupType: "Workspace_metrics",
             groupId: currentWorkspace?.id!,
-          },
-          path: router.pathname,
-        });
+          }
+        );
       })
       .catch((error) => {
         console.error(error);
-        captureIssueEvent({
-          eventName: "Issue created",
-          payload: {
-            ...formData,
+        postHogEventTracker(
+          "ISSUE_CREATED",
+          {
             state: "FAILED",
-            element: "Inbox page",
           },
-          group: {
+          {
             isGrouping: true,
             groupType: "Workspace_metrics",
             groupId: currentWorkspace?.id!,
-          },
-          path: router.pathname,
-        });
+          }
+        );
       });
   };
 

web/components/integration/jira/give-details.tsx

@@ -4,18 +4,18 @@ import { observer } from "mobx-react-lite";
 import { useFormContext, Controller } from "react-hook-form";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useProject } from "hooks/store";
+import { useApplication, useProject } from "hooks/store";
 // components
 import { CustomSelect, Input } from "@plane/ui";
-// helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IJiraImporterForm } from "@plane/types";
 
 export const JiraGetImportDetail: React.FC = observer(() => {
   // store hooks
-  const { commandPalette: commandPaletteStore } = useApplication();
-  const { setTrackElement } = useEventTracker();
+  const {
+    commandPalette: commandPaletteStore,
+    eventTracker: { setTrackElement },
+  } = useApplication();
   const { workspaceProjectIds, getProjectById } = useProject();
   // form info
   const {
@@ -46,18 +46,17 @@ export const JiraGetImportDetail: React.FC = observer(() => {
             render={({ field: { value, onChange, ref } }) => (
               <Input
                 id="metadata.api_token"
+                name="metadata.api_token"
                 type="text"
                 value={value}
                 onChange={onChange}
                 ref={ref}
-                hasError={Boolean(errors.metadata?.api_token)}
                 placeholder="XXXXXXXX"
                 className="w-full"
                 autoComplete="off"
               />
             )}
           />
-          {errors.metadata?.api_token && <p className="text-red-500 text-xs">{errors.metadata.api_token.message}</p>}
         </div>
       </div>
 
@@ -76,6 +75,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
             render={({ field: { value, onChange, ref } }) => (
               <Input
                 id="metadata.project_key"
+                name="metadata.project_key"
                 type="text"
                 value={value}
                 onChange={onChange}
@@ -86,9 +86,6 @@ export const JiraGetImportDetail: React.FC = observer(() => {
               />
             )}
           />
-          {errors.metadata?.project_key && (
-            <p className="text-red-500 text-xs">{errors.metadata.project_key.message}</p>
-          )}
         </div>
       </div>
 
@@ -103,11 +100,11 @@ export const JiraGetImportDetail: React.FC = observer(() => {
             name="metadata.email"
             rules={{
               required: "Please enter email address.",
-              validate: (value) => checkEmailValidity(value) || "Please enter a valid email address",
             }}
             render={({ field: { value, onChange, ref } }) => (
               <Input
                 id="metadata.email"
+                name="metadata.email"
                 type="email"
                 value={value}
                 onChange={onChange}
@@ -118,7 +115,6 @@ export const JiraGetImportDetail: React.FC = observer(() => {
               />
             )}
           />
-          {errors.metadata?.email && <p className="text-red-500 text-xs">{errors.metadata.email.message}</p>}
         </div>
       </div>
 
@@ -133,11 +129,12 @@ export const JiraGetImportDetail: React.FC = observer(() => {
             name="metadata.cloud_hostname"
             rules={{
               required: "Please enter your cloud host name.",
-              validate: (value) => !/^https?:\/\//.test(value) || "Hostname should not begin with http:// or https://",
             }}
             render={({ field: { value, onChange, ref } }) => (
               <Input
                 id="metadata.cloud_hostname"
+                name="metadata.cloud_hostname"
+                type="email"
                 value={value}
                 onChange={onChange}
                 ref={ref}
@@ -147,9 +144,6 @@ export const JiraGetImportDetail: React.FC = observer(() => {
               />
             )}
           />
-          {errors.metadata?.cloud_hostname && (
-            <p className="text-red-500 text-xs">{errors.metadata.cloud_hostname.message}</p>
-          )}
         </div>
       </div>
 
@@ -200,7 +194,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                   <button
                     type="button"
                     onClick={() => {
-                      setTrackElement("Jira import detail page");
+                      setTrackElement("JIRA_IMPORT_DETAIL");
                       commandPaletteStore.toggleCreateProjectModal(true);
                     }}
                     className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"