fix: adding new switch

fix: ui component library setup
2025-01-25 18:24:05 +05:30 · 2025-01-20 01:22:59 +05:30
219 changed files with 4427 additions and 6235 deletions
@@ -35,6 +35,7 @@
    "react-dom": "^18.3.1",
    "react-hook-form": "7.51.5",
    "swr": "^2.2.4",
+    "tailwindcss": "3.3.2",
    "uuid": "^9.0.1",
    "zxcvbn": "^4.4.2"
  },
@@ -15,4 +15,3 @@ from .state import StateLiteSerializer, StateSerializer
 from .cycle import CycleSerializer, CycleIssueSerializer, CycleLiteSerializer
 from .module import ModuleSerializer, ModuleIssueSerializer, ModuleLiteSerializer
 from .intake import IntakeIssueSerializer
-from .estimate import EstimatePointSerializer
@@ -72,7 +72,6 @@ class BaseSerializer(serializers.ModelSerializer):
                        StateLiteSerializer,
                        UserLiteSerializer,
                        WorkspaceLiteSerializer,
-                        EstimatePointSerializer,
                    )

                    # Expansion mapper
@@ -89,7 +88,6 @@ class BaseSerializer(serializers.ModelSerializer):
                        "owned_by": UserLiteSerializer,
                        "members": UserLiteSerializer,
                        "parent": IssueLiteSerializer,
-                        "estimate_point": EstimatePointSerializer,
                    }
                    # Check if field in expansion  then expand the field
                    if expand in expansion:
@@ -1,10 +0,0 @@
-# Module imports
-from plane.db.models import EstimatePoint
-from .base import BaseSerializer
-
-
-class EstimatePointSerializer(BaseSerializer):
-    class Meta:
-        model = EstimatePoint
-        fields = ["id", "value"]
-        read_only_fields = fields
@@ -207,7 +207,6 @@ class IssueSerializer(BaseSerializer):
                    for assignee_id in assignees
                ],
                batch_size=10,
-                ignore_conflicts=True,
            )

        if labels is not None:
@@ -225,7 +224,6 @@ class IssueSerializer(BaseSerializer):
                    for label_id in labels
                ],
                batch_size=10,
-                ignore_conflicts=True,
            )

        # Time updation occues even when other related models are updated
@@ -71,9 +71,4 @@ urlpatterns = [
        IssueAttachmentEndpoint.as_view(),
        name="attachment",
    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-attachments/<uuid:pk>/",
-        IssueAttachmentEndpoint.as_view(),
-        name="issue-attachment",
-    ),
 ]
@@ -72,8 +72,6 @@ from .issue import (
    IssueReactionLiteSerializer,
    IssueAttachmentLiteSerializer,
    IssueLinkLiteSerializer,
-    IssueVersionDetailSerializer,
-    IssueDescriptionVersionDetailSerializer,
 )

 from .module import (
@@ -33,8 +33,6 @@ from plane.db.models import (
    IssueVote,
    IssueRelation,
    State,
-    IssueVersion,
-    IssueDescriptionVersion,
 )


@@ -203,7 +201,6 @@ class IssueCreateSerializer(BaseSerializer):
                    for user in assignees
                ],
                batch_size=10,
-                ignore_conflicts=True,
            )

        if labels is not None:
@@ -221,7 +218,6 @@ class IssueCreateSerializer(BaseSerializer):
                    for label in labels
                ],
                batch_size=10,
-                ignore_conflicts=True,
            )

        # Time updation occues even when other related models are updated
@@ -285,26 +281,10 @@ class IssueRelationSerializer(BaseSerializer):
    )
    name = serializers.CharField(source="related_issue.name", read_only=True)
    relation_type = serializers.CharField(read_only=True)
-    state_id = serializers.UUIDField(source="related_issue.state.id", read_only=True)
-    priority = serializers.CharField(source="related_issue.priority", read_only=True)
-    assignee_ids = serializers.ListField(
-        child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
-        write_only=True,
-        required=False,
-    )

    class Meta:
        model = IssueRelation
-        fields = [
-            "id",
-            "project_id",
-            "sequence_id",
-            "relation_type",
-            "name",
-            "state_id",
-            "priority",
-            "assignee_ids",
-        ]
+        fields = ["id", "project_id", "sequence_id", "relation_type", "name"]
        read_only_fields = ["workspace", "project"]


@@ -316,26 +296,10 @@ class RelatedIssueSerializer(BaseSerializer):
    sequence_id = serializers.IntegerField(source="issue.sequence_id", read_only=True)
    name = serializers.CharField(source="issue.name", read_only=True)
    relation_type = serializers.CharField(read_only=True)
-    state_id = serializers.UUIDField(source="issue.state.id", read_only=True)
-    priority = serializers.CharField(source="issue.priority", read_only=True)
-    assignee_ids = serializers.ListField(
-        child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
-        write_only=True,
-        required=False,
-    )

    class Meta:
        model = IssueRelation
-        fields = [
-            "id",
-            "project_id",
-            "sequence_id",
-            "relation_type",
-            "name",
-            "state_id",
-            "priority",
-            "assignee_ids",
-        ]
+        fields = ["id", "project_id", "sequence_id", "relation_type", "name"]
        read_only_fields = ["workspace", "project"]


@@ -703,64 +667,3 @@ class IssueSubscriberSerializer(BaseSerializer):
        model = IssueSubscriber
        fields = "__all__"
        read_only_fields = ["workspace", "project", "issue"]
-
-
-class IssueVersionDetailSerializer(BaseSerializer):
-    class Meta:
-        model = IssueVersion
-        fields = [
-            "id",
-            "workspace",
-            "project",
-            "issue",
-            "parent",
-            "state",
-            "estimate_point",
-            "name",
-            "priority",
-            "start_date",
-            "target_date",
-            "assignees",
-            "sequence_id",
-            "labels",
-            "sort_order",
-            "completed_at",
-            "archived_at",
-            "is_draft",
-            "external_source",
-            "external_id",
-            "type",
-            "cycle",
-            "modules",
-            "meta",
-            "name",
-            "last_saved_at",
-            "owned_by",
-            "created_at",
-            "updated_at",
-            "created_by",
-            "updated_by",
-        ]
-        read_only_fields = ["workspace", "project", "issue"]
-
-
-class IssueDescriptionVersionDetailSerializer(BaseSerializer):
-    class Meta:
-        model = IssueDescriptionVersion
-        fields = [
-            "id",
-            "workspace",
-            "project",
-            "issue",
-            "description_binary",
-            "description_html",
-            "description_stripped",
-            "description_json",
-            "last_saved_at",
-            "owned_by",
-            "created_at",
-            "updated_at",
-            "created_by",
-            "updated_by",
-        ]
-        read_only_fields = ["workspace", "project", "issue"]
@@ -22,7 +22,6 @@ from plane.db.models import (
    ProjectMember,
    WorkspaceHomePreference,
    Sticky,
-    WorkspaceUserPreference,
 )
 from plane.utils.constants import RESTRICTED_WORKSPACE_SLUGS

@@ -259,10 +258,3 @@ class StickySerializer(BaseSerializer):
        fields = "__all__"
        read_only_fields = ["workspace", "owner"]
        extra_kwargs = {"name": {"required": False}}
-
-
-class WorkspaceUserPreferenceSerializer(BaseSerializer):
-    class Meta:
-        model = WorkspaceUserPreference
-        fields = ["key", "is_pinned", "sort_order"]
-        read_only_fields = ["workspace", "created_by", "updated_by"]
@@ -24,8 +24,6 @@ from plane.app.views import (
    IssueDetailEndpoint,
    IssueAttachmentV2Endpoint,
    IssueBulkUpdateDateEndpoint,
-    IssueVersionEndpoint,
-    IssueDescriptionVersionEndpoint,
 )

 urlpatterns = [
@@ -258,24 +256,4 @@ urlpatterns = [
        IssueBulkUpdateDateEndpoint.as_view(),
        name="project-issue-dates",
    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/versions/",
-        IssueVersionEndpoint.as_view(),
-        name="page-versions",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/versions/<uuid:pk>/",
-        IssueVersionEndpoint.as_view(),
-        name="page-versions",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/description-versions/",
-        IssueDescriptionVersionEndpoint.as_view(),
-        name="page-versions",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/description-versions/<uuid:pk>/",
-        IssueDescriptionVersionEndpoint.as_view(),
-        name="page-versions",
-    ),
 ]
@@ -31,7 +31,6 @@ from plane.app.views import (
    UserRecentVisitViewSet,
    WorkspaceHomePreferenceViewSet,
    WorkspaceStickyViewSet,
-    WorkspaceUserPreferenceViewSet,
 )


@@ -259,15 +258,4 @@ urlpatterns = [
        ),
        name="workspace-sticky",
    ),
-    # User Preference
-    path(
-        "workspaces/<str:slug>/sidebar-preferences/",
-        WorkspaceUserPreferenceViewSet.as_view(),
-        name="workspace-user-preference",
-    ),
-    path(
-        "workspaces/<str:slug>/sidebar-preferences/<str:key>/",
-        WorkspaceUserPreferenceViewSet.as_view(),
-        name="workspace-user-preference",
-    ),
 ]
@@ -48,7 +48,6 @@ from .workspace.favorite import (
    WorkspaceFavoriteGroupEndpoint,
 )
 from .workspace.recent_visit import UserRecentVisitViewSet
-from .workspace.user_preference import WorkspaceUserPreferenceViewSet

 from .workspace.member import (
    WorkSpaceMemberViewSet,
@@ -142,8 +141,6 @@ from .issue.sub_issue import SubIssuesEndpoint

 from .issue.subscriber import IssueSubscriberViewSet

-from .issue.version import IssueVersionEndpoint, IssueDescriptionVersionEndpoint
-
 from .module.base import (
    ModuleViewSet,
    ModuleLinkViewSet,
@@ -47,7 +47,6 @@ from plane.db.models import (
    User,
    Project,
    ProjectMember,
-    UserRecentVisit,
 )
 from plane.utils.analytics_plot import burndown_plot
 from plane.bgtasks.recent_visited_task import recent_visited_task
@@ -133,18 +132,6 @@ class CycleViewSet(BaseViewSet):
                    ),
                )
            )
-            .annotate(
-                pending_issues=Count(
-                    "issue_cycle__issue__id",
-                    distinct=True,
-                    filter=Q(
-                        issue_cycle__issue__state__group__in=["backlog", "unstarted", "started"],
-                        issue_cycle__issue__archived_at__isnull=True,
-                        issue_cycle__issue__is_draft=False,
-                        issue_cycle__deleted_at__isnull=True,
-                    ),
-                )
-            )
            .annotate(
                status=Case(
                    When(
@@ -227,7 +214,6 @@ class CycleViewSet(BaseViewSet):
                "is_favorite",
                "total_issues",
                "completed_issues",
-                "pending_issues",
                "assignee_ids",
                "status",
                "version",
@@ -259,7 +245,6 @@ class CycleViewSet(BaseViewSet):
            # meta fields
            "is_favorite",
            "total_issues",
-            "pending_issues",
            "completed_issues",
            "assignee_ids",
            "status",
@@ -544,13 +529,6 @@ class CycleViewSet(BaseViewSet):
            entity_identifier=pk,
            project_id=project_id,
        ).delete()
-        # Delete the cycle from recent visits
-        UserRecentVisit.objects.filter(
-            project_id=project_id,
-            workspace__slug=slug,
-            entity_identifier=pk,
-            entity_name="cycle",
-        ).delete(soft=False)
        return Response(status=status.HTTP_204_NO_CONTENT)


@@ -53,10 +53,10 @@ from .. import BaseAPIView
 def dashboard_overview_stats(self, request, slug):
    assigned_issues = (
        Issue.issue_objects.filter(
-            (Q(assignees__in=[request.user]) & Q(issue_assignee__deleted_at__isnull=True)),
            project__project_projectmember__is_active=True,
            project__project_projectmember__member=request.user,
            workspace__slug=slug,
+            assignees__in=[request.user],
        )
        .filter(
            Q(
@@ -133,13 +133,10 @@ def dashboard_overview_stats(self, request, slug):

    completed_issues_count = (
        Issue.issue_objects.filter(
-            (
-                Q(assignees__in=[request.user])
-                & Q(issue_assignee__deleted_at__isnull=True)
-            ),
            workspace__slug=slug,
            project__project_projectmember__is_active=True,
            project__project_projectmember__member=request.user,
+            assignees__in=[request.user],
            state__group="completed",
        )
        .filter(
@@ -179,13 +176,10 @@ def dashboard_assigned_issues(self, request, slug):
    # get all the assigned issues
    assigned_issues = (
        Issue.issue_objects.filter(
-            (
-                Q(assignees__in=[request.user])
-                & Q(issue_assignee__deleted_at__isnull=True)
-            ),
            workspace__slug=slug,
            project__project_projectmember__member=request.user,
            project__project_projectmember__is_active=True,
+            assignees__in=[request.user],
        )
        .filter(**filters)
        .select_related("workspace", "project", "state", "parent")
@@ -44,7 +44,6 @@ from plane.db.models import (
    Project,
    ProjectMember,
    CycleIssue,
-    UserRecentVisit,
 )
 from plane.utils.grouper import (
    issue_group_values,
@@ -672,13 +671,6 @@ class IssueViewSet(BaseViewSet):
        issue = Issue.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)

        issue.delete()
-        # delete the issue from recent visits
-        UserRecentVisit.objects.filter(
-            project_id=project_id,
-            workspace__slug=slug,
-            entity_identifier=pk,
-            entity_name="issue",
-        ).delete(soft=False)
        issue_activity.delay(
            type="issue.activity.deleted",
            requested_data=json.dumps({"issue_id": str(pk)}),
@@ -1,118 +0,0 @@
-# Third party imports
-from rest_framework import status
-from rest_framework.response import Response
-
-# Module imports
-from plane.db.models import IssueVersion, IssueDescriptionVersion
-from ..base import BaseAPIView
-from plane.app.serializers import (
-    IssueVersionDetailSerializer,
-    IssueDescriptionVersionDetailSerializer,
-)
-from plane.app.permissions import allow_permission, ROLE
-from plane.utils.global_paginator import paginate
-from plane.utils.timezone_converter import user_timezone_converter
-
-
-class IssueVersionEndpoint(BaseAPIView):
-    def process_paginated_result(self, fields, results, timezone):
-        paginated_data = results.values(*fields)
-
-        datetime_fields = ["created_at", "updated_at"]
-        paginated_data = user_timezone_converter(
-            paginated_data, datetime_fields, timezone
-        )
-
-        return paginated_data
-
-    @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
-    def get(self, request, slug, project_id, issue_id, pk=None):
-        if pk:
-            issue_version = IssueVersion.objects.get(
-                workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
-            )
-
-            serializer = IssueVersionDetailSerializer(issue_version)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-
-        cursor = request.GET.get("cursor", None)
-
-        required_fields = [
-            "id",
-            "workspace",
-            "project",
-            "issue",
-            "last_saved_at",
-            "owned_by",
-            "created_at",
-            "updated_at",
-            "created_by",
-            "updated_by",
-        ]
-
-        issue_versions_queryset = IssueVersion.objects.filter(
-            workspace__slug=slug, project_id=project_id, issue_id=issue_id
-        )
-
-        paginated_data = paginate(
-            base_queryset=issue_versions_queryset,
-            queryset=issue_versions_queryset,
-            cursor=cursor,
-            on_result=lambda results: self.process_paginated_result(
-                required_fields, results, request.user.user_timezone
-            ),
-        )
-
-        return Response(paginated_data, status=status.HTTP_200_OK)
-
-
-class IssueDescriptionVersionEndpoint(BaseAPIView):
-    def process_paginated_result(self, fields, results, timezone):
-        paginated_data = results.values(*fields)
-
-        datetime_fields = ["created_at", "updated_at"]
-        paginated_data = user_timezone_converter(
-            paginated_data, datetime_fields, timezone
-        )
-
-        return paginated_data
-
-    @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
-    def get(self, request, slug, project_id, issue_id, pk=None):
-        if pk:
-            issue_description_version = IssueDescriptionVersion.objects.get(
-                workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
-            )
-
-            serializer = IssueDescriptionVersionDetailSerializer(
-                issue_description_version
-            )
-            return Response(serializer.data, status=status.HTTP_200_OK)
-
-        cursor = request.GET.get("cursor", None)
-
-        required_fields = [
-            "id",
-            "workspace",
-            "project",
-            "issue",
-            "last_saved_at",
-            "owned_by",
-            "created_at",
-            "updated_at",
-            "created_by",
-            "updated_by",
-        ]
-
-        issue_description_versions_queryset = IssueDescriptionVersion.objects.filter(
-            workspace__slug=slug, project_id=project_id, issue_id=issue_id
-        )
-        paginated_data = paginate(
-            base_queryset=issue_description_versions_queryset,
-            queryset=issue_description_versions_queryset,
-            cursor=cursor,
-            on_result=lambda results: self.process_paginated_result(
-                required_fields, results, request.user.user_timezone
-            ),
-        )
-        return Response(paginated_data, status=status.HTTP_200_OK)
@@ -54,7 +54,6 @@ from plane.db.models import (
    ModuleLink,
    ModuleUserProperties,
    Project,
-    UserRecentVisit,
 )
 from plane.utils.analytics_plot import burndown_plot
 from plane.utils.timezone_converter import user_timezone_converter
@@ -809,13 +808,6 @@ class ModuleViewSet(BaseViewSet):
            entity_identifier=pk,
            project_id=project_id,
        ).delete()
-        # delete the module from recent visits
-        UserRecentVisit.objects.filter(
-            project_id=project_id,
-            workspace__slug=slug,
-            entity_identifier=pk,
-            entity_name="module",
-        ).delete(soft=False)
        return Response(status=status.HTTP_204_NO_CONTENT)


@@ -33,7 +33,6 @@ from plane.db.models import (
    ProjectMember,
    ProjectPage,
    Project,
-    UserRecentVisit,
 )
 from plane.utils.error_codes import ERROR_CODES
 from ..base import BaseAPIView, BaseViewSet
@@ -388,13 +387,6 @@ class PageViewSet(BaseViewSet):
            entity_identifier=pk,
            entity_type="page",
        ).delete()
-        # Delete the page from recent visit
-        UserRecentVisit.objects.filter(
-            project_id=project_id,
-            workspace__slug=slug,
-            entity_identifier=pk,
-            entity_name="page",
-        ).delete(soft=False)
        return Response(status=status.HTTP_204_NO_CONTENT)


@@ -53,23 +53,6 @@ class StateViewSet(BaseViewSet):
                    status=status.HTTP_400_BAD_REQUEST,
                )

-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
-    def partial_update(self, request, slug, project_id, pk):
-        try:
-            state = State.objects.get(
-                pk=pk, project_id=project_id, workspace__slug=slug
-            )
-            serializer = StateSerializer(state, data=request.data, partial=True)
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"name": "The state name is already taken"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )

    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
    def list(self, request, slug, project_id):
@@ -24,7 +24,6 @@ from plane.db.models import (
    ProjectMember,
    Project,
    CycleIssue,
-    UserRecentVisit,
 )
 from plane.utils.grouper import (
    issue_group_values,
@@ -496,13 +495,6 @@ class IssueViewViewSet(BaseViewSet):
                entity_identifier=pk,
                entity_type="view",
            ).delete()
-            # Delete the page from recent visit
-            UserRecentVisit.objects.filter(
-                project_id=project_id,
-                workspace__slug=slug,
-                entity_identifier=pk,
-                entity_name="view",
-            ).delete(soft=False)
        else:
            return Response(
                {"error": "Only admin or owner can delete the view"},
@@ -39,9 +39,9 @@ class WorkspaceStickyViewSet(BaseViewSet):
    )
    def list(self, request, slug):
        query = request.query_params.get("query", False)
-        stickies = self.get_queryset().order_by("-sort_order")
+        stickies = self.get_queryset()
        if query:
-            stickies = stickies.filter(description_stripped__icontains=query)
+            stickies = stickies.filter(name__icontains=query)

        return self.paginate(
            request=request,
@@ -49,7 +49,7 @@ class WorkspaceStickyViewSet(BaseViewSet):
            on_results=lambda stickies: StickySerializer(stickies, many=True).data,
            default_per_page=20,
        )
-
+        
    @allow_permission(allowed_roles=[], creator=True, model=Sticky, level="WORKSPACE")
    def partial_update(self, request, *args, **kwargs):
        return super().partial_update(request, *args, **kwargs)
@@ -375,11 +375,8 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):

        state_distribution = (
            Issue.issue_objects.filter(
-                (
-                    Q(assignees__in=[user_id])
-                    & Q(issue_assignee__deleted_at__isnull=True)
-                ),
                workspace__slug=slug,
+                assignees__in=[user_id],
                project__project_projectmember__member=request.user,
                project__project_projectmember__is_active=True,
            )
@@ -394,11 +391,8 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):

        priority_distribution = (
            Issue.issue_objects.filter(
-                (
-                    Q(assignees__in=[user_id])
-                    & Q(issue_assignee__deleted_at__isnull=True)
-                ),
                workspace__slug=slug,
+                assignees__in=[user_id],
                project__project_projectmember__member=request.user,
                project__project_projectmember__is_active=True,
            )
@@ -432,11 +426,8 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):

        assigned_issues_count = (
            Issue.issue_objects.filter(
-                (
-                    Q(assignees__in=[user_id])
-                    & Q(issue_assignee__deleted_at__isnull=True)
-                ),
                workspace__slug=slug,
+                assignees__in=[user_id],
                project__project_projectmember__member=request.user,
                project__project_projectmember__is_active=True,
            )
@@ -447,11 +438,8 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
        pending_issues_count = (
            Issue.issue_objects.filter(
                ~Q(state__group__in=["completed", "cancelled"]),
-                (
-                    Q(assignees__in=[user_id])
-                    & Q(issue_assignee__deleted_at__isnull=True)
-                ),
                workspace__slug=slug,
+                assignees__in=[user_id],
                project__project_projectmember__member=request.user,
                project__project_projectmember__is_active=True,
            )
@@ -461,11 +449,8 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):

        completed_issues_count = (
            Issue.issue_objects.filter(
-                (
-                    Q(assignees__in=[user_id])
-                    & Q(issue_assignee__deleted_at__isnull=True)
-                ),
                workspace__slug=slug,
+                assignees__in=[user_id],
                state__group="completed",
                project__project_projectmember__member=request.user,
                project__project_projectmember__is_active=True,
@@ -1,78 +0,0 @@
-# Module imports
-from ..base import BaseAPIView
-from plane.db.models.workspace import WorkspaceUserPreference
-from plane.app.serializers.workspace import WorkspaceUserPreferenceSerializer
-from plane.app.permissions import allow_permission, ROLE
-from plane.db.models import Workspace
-
-
-# Third party imports
-from rest_framework.response import Response
-from rest_framework import status
-
-
-class WorkspaceUserPreferenceViewSet(BaseAPIView):
-    model = WorkspaceUserPreference
-
-    def get_serializer_class(self):
-        return WorkspaceUserPreferenceSerializer
-
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
-    def get(self, request, slug):
-        workspace = Workspace.objects.get(slug=slug)
-
-        get_preference = WorkspaceUserPreference.objects.filter(
-            user=request.user, workspace_id=workspace.id
-        )
-
-        create_preference_keys = []
-
-        keys = [
-            key
-            for key, _ in WorkspaceUserPreference.UserPreferenceKeys.choices
-            if key not in ["projects"]
-        ]
-
-        for preference in keys:
-            if preference not in get_preference.values_list("key", flat=True):
-                create_preference_keys.append(preference)
-
-                preference = WorkspaceUserPreference.objects.bulk_create(
-                    [
-                        WorkspaceUserPreference(
-                            key=key, user=request.user, workspace=workspace
-                        )
-                        for key in create_preference_keys
-                    ],
-                    batch_size=10,
-                    ignore_conflicts=True,
-                )
-
-        preference = WorkspaceUserPreference.objects.filter(
-            user=request.user, workspace_id=workspace.id
-        )
-
-        return Response(
-            preference.values("key", "is_pinned", "sort_order"),
-            status=status.HTTP_200_OK,
-        )
-
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
-    def patch(self, request, slug, key):
-        preference = WorkspaceUserPreference.objects.filter(
-            key=key, workspace__slug=slug, user=request.user
-        ).first()
-
-        if preference:
-            serializer = WorkspaceUserPreferenceSerializer(
-                preference, data=request.data, partial=True
-            )
-
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-        return Response(
-            {"detail": "Preference not found"}, status=status.HTTP_404_NOT_FOUND
-        )
@@ -53,6 +53,7 @@ urlpatterns = [
    path("magic-generate/", MagicGenerateEndpoint.as_view(), name="magic-generate"),
    path("magic-sign-in/", MagicSignInEndpoint.as_view(), name="magic-sign-in"),
    path("magic-sign-up/", MagicSignUpEndpoint.as_view(), name="magic-sign-up"),
+    path("get-csrf-token/", CSRFTokenEndpoint.as_view(), name="get_csrf_token"),
    path(
        "spaces/magic-generate/",
        MagicGenerateSpaceEndpoint.as_view(),
@@ -69,8 +69,7 @@ from .workspace import (
    WorkspaceTheme,
    WorkspaceUserProperties,
    WorkspaceUserLink,
-    WorkspaceHomePreference,
-    WorkspaceUserPreference,
+    WorkspaceHomePreference
 )

 from .favorite import UserFavorite
@@ -5,9 +5,6 @@ from django.db import models
 # Module imports
 from .base import BaseModel

-# Third party imports
-from plane.utils.html_processor import strip_tags
-

 class Sticky(BaseModel):
    name = models.TextField(null=True, blank=True)
@@ -36,12 +33,6 @@ class Sticky(BaseModel):
        ordering = ("-created_at",)

    def save(self, *args, **kwargs):
-        # Strip the html tags using html parser
-        self.description_stripped = (
-            None
-            if (self.description_html == "" or self.description_html is None)
-            else strip_tags(self.description_html)
-        )
        if self._state.adding:
            # Get the maximum sequence value from the database
            last_id = Sticky.objects.filter(workspace=self.workspace).aggregate(
@@ -388,14 +388,15 @@ class WorkspaceHomePreference(BaseModel):
        return f"{self.workspace.name} {self.user.email} {self.key}"


+
 class WorkspaceUserPreference(BaseModel):
    """Preference for the workspace for a user"""

    class UserPreferenceKeys(models.TextChoices):
-        PROJECTS = "projects", "Projects"
-        ANALYTICS = "analytics", "Analytics"
        CYCLES = "cycles", "Cycles"
        VIEWS = "views", "Views"
+        ANALYTICS = "analytics", "Analytics"
+        PROJECTS = "projects", "Projects"

    workspace = models.ForeignKey(
        "db.Workspace",
@@ -290,12 +290,11 @@ class InstanceAdminSignInEndpoint(View):
        # Fetch the user
        user = User.objects.filter(email=email).first()

-        # Error out if the user is not present
-        if not user:
+        # is_active
+        if not user.is_active:
            exc = AuthenticationException(
-                error_code=AUTHENTICATION_ERROR_CODES["ADMIN_USER_DOES_NOT_EXIST"],
-                error_message="ADMIN_USER_DOES_NOT_EXIST",
-                payload={"email": email},
+                error_code=AUTHENTICATION_ERROR_CODES["ADMIN_USER_DEACTIVATED"],
+                error_message="ADMIN_USER_DEACTIVATED",
            )
            url = urljoin(
                base_host(request=request, is_admin=True),
@@ -303,11 +302,12 @@ class InstanceAdminSignInEndpoint(View):
            )
            return HttpResponseRedirect(url)

-        # is_active
-        if not user.is_active:
+        # Error out if the user is not present
+        if not user:
            exc = AuthenticationException(
-                error_code=AUTHENTICATION_ERROR_CODES["ADMIN_USER_DEACTIVATED"],
-                error_message="ADMIN_USER_DEACTIVATED",
+                error_code=AUTHENTICATION_ERROR_CODES["ADMIN_USER_DOES_NOT_EXIST"],
+                error_message="ADMIN_USER_DOES_NOT_EXIST",
+                payload={"email": email},
            )
            url = urljoin(
                base_host(request=request, is_admin=True),
@@ -1,14 +1,8 @@
-# Python imports
 import pytz
+from plane.db.models import Project
 from datetime import datetime, time
 from datetime import timedelta

-# Django imports
-from django.utils import timezone
-
-# Module imports
-from plane.db.models import Project
-

 def user_timezone_converter(queryset, datetime_fields, user_timezone):
    # Create a timezone object for the user's timezone
@@ -71,27 +65,16 @@ def convert_to_utc(
    if is_start_date:
        localized_datetime += timedelta(minutes=0, seconds=1)

-        # Convert the localized datetime to UTC
-        utc_datetime = localized_datetime.astimezone(pytz.utc)
+    # If it's start an end date are equal, add 23 hours, 59 minutes, and 59 seconds
+    # to make it the end of the day
+    if is_start_date_end_date_equal:
+        localized_datetime += timedelta(hours=23, minutes=59, seconds=59)

-        current_datetime_in_project_tz = timezone.now().astimezone(local_tz)
-        current_datetime_in_utc = current_datetime_in_project_tz.astimezone(pytz.utc)
+    # Convert the localized datetime to UTC
+    utc_datetime = localized_datetime.astimezone(pytz.utc)

-        if utc_datetime.date() == current_datetime_in_utc.date():
-            return current_datetime_in_utc
-
-        return utc_datetime
-    else:
-        # If it's start an end date are equal, add 23 hours, 59 minutes, and 59 seconds
-        # to make it the end of the day
-        if is_start_date_end_date_equal:
-            localized_datetime += timedelta(hours=23, minutes=59, seconds=59)
-
-        # Convert the localized datetime to UTC
-        utc_datetime = localized_datetime.astimezone(pytz.utc)
-
-        # Return the UTC datetime for storage
-        return utc_datetime
+    # Return the UTC datetime for storage
+    return utc_datetime


 def convert_utc_to_project_timezone(utc_datetime, project_id):
@@ -1,7 +1,7 @@
 # base requirements

 # django
-Django==4.2.18
+Django==4.2.17
 # rest framework
 djangorestframework==3.15.2
 # postgres 
@@ -131,18 +131,17 @@ function updateEnvFile() {
    fi

    if [ -f "$file" ]; then
-        # Check if key exists in the file
-        if ! grep -q "^$key=" "$file"; then
+        # check if key exists in the file
+        grep -q "^$key=" "$file"
+        if [ $? -ne 0 ]; then
            echo "$key=$value" >> "$file"
            return
-        else
-            # Escape special characters in value for sed
-            value=$(printf '%s\n' "$value" | sed -e 's/[\/&]/\\&/g')
-
+        else 
            if [ "$OS_NAME" == "Darwin" ]; then
-                sed -i '' "s|^$key=.*|$key=$value|" "$file"
+                value=$(echo "$value" | sed 's/|/\\|/g')
+                sed -i '' "s|^$key=.*|$key=$value|g" "$file"
            else
-                sed -i "s|^$key=.*|$key=$value|" "$file"
+                sed -i "s/^$key=.*/$key=$value/g" "$file"
            fi
        fi
    else
@@ -16,10 +16,10 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
-    "@hocuspocus/extension-database": "^2.15.0",
-    "@hocuspocus/extension-logger": "^2.15.0",
-    "@hocuspocus/extension-redis": "^2.15.0",
-    "@hocuspocus/server": "^2.15.0",
+    "@hocuspocus/extension-database": "^2.11.3",
+    "@hocuspocus/extension-logger": "^2.11.3",
+    "@hocuspocus/extension-redis": "^2.13.5",
+    "@hocuspocus/server": "^2.11.3",
    "@plane/constants": "*",
    "@plane/editor": "*",
    "@plane/types": "*",
@@ -40,9 +40,9 @@
    "pino-http": "^10.3.0",
    "pino-pretty": "^11.2.2",
    "uuid": "^10.0.0",
-    "y-prosemirror": "^1.2.15",
+    "y-prosemirror": "^1.2.9",
    "y-protocols": "^1.0.6",
-    "yjs": "^13.6.20"
+    "yjs": "^13.6.14"
  },
  "devDependencies": {
    "@babel/cli": "^7.25.6",
@@ -13,4 +13,3 @@ export * from "./state";
 export * from "./swr";
 export * from "./user";
 export * from "./workspace";
-export * from "./stickies";
@@ -1 +0,0 @@
-export const STICKIES_PER_PAGE = 30;
@@ -12,12 +12,14 @@
  "exports": {
    ".": {
      "types": "./dist/index.d.mts",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs"
    },
    "./lib": {
      "require": "./dist/lib.js",
      "types": "./dist/lib.d.mts",
-      "import": "./dist/lib.mjs"
+      "import": "./dist/lib.mjs",
+      "module": "./dist/lib.mjs"
    }
  },
  "scripts": {
@@ -34,7 +36,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "^0.26.4",
-    "@hocuspocus/provider": "^2.15.0",
+    "@hocuspocus/provider": "^2.13.5",
    "@plane/types": "*",
    "@plane/ui": "*",
    "@plane/utils": "*",
@@ -65,12 +67,12 @@
    "prosemirror-codemark": "^0.4.2",
    "prosemirror-utils": "^1.2.2",
    "tippy.js": "^6.3.7",
-    "tiptap-markdown": "^0.8.10",
+    "tiptap-markdown": "^0.8.9",
    "uuid": "^10.0.0",
    "y-indexeddb": "^9.0.12",
-    "y-prosemirror": "^1.2.15",
+    "y-prosemirror": "^1.2.5",
    "y-protocols": "^1.0.6",
-    "yjs": "^13.6.20"
+    "yjs": "^13.6.15"
  },
  "devDependencies": {
    "@plane/eslint-config": "*",
@@ -1,6 +1,5 @@
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { Extensions } from "@tiptap/core";
-import { AnyExtension } from "@tiptap/core";
 import { SlashCommands } from "@/extensions";
 // plane editor types
 import { TIssueEmbedConfig } from "@/plane-editor/types";
@@ -14,24 +13,15 @@ type Props = {
  userDetails: TUserDetails;
 };

-type ExtensionConfig = {
-  isEnabled: (disabledExtensions: TExtensions[]) => boolean;
-  getExtension: (props: Props) => AnyExtension;
-};
-
-const extensionRegistry: ExtensionConfig[] = [
-  {
-    isEnabled: (disabledExtensions) => !disabledExtensions.includes("slash-commands"),
-    getExtension: () => SlashCommands({}),
-  },
-];
-
 export const DocumentEditorAdditionalExtensions = (_props: Props) => {
-  const { disabledExtensions = [] } = _props;
+  const { disabledExtensions } = _props;
+  const extensions: Extensions = disabledExtensions?.includes("slash-commands")
+    ? []
+    : [
+        SlashCommands({
+          disabledExtensions,
+        }),
+      ];

-  const documentExtensions = extensionRegistry
-    .filter((config) => config.isEnabled(disabledExtensions))
-    .map((config) => config.getExtension(_props));
-
-  return documentExtensions;
+  return extensions;
 };
@@ -4,7 +4,7 @@ import { TSlashCommandAdditionalOption } from "@/extensions";
 import { TExtensions } from "@/types";

 type Props = {
-  disabledExtensions?: TExtensions[];
+  disabledExtensions: TExtensions[];
 };

 export const coreEditorAdditionalSlashCommandOptions = (props: Props): TSlashCommandAdditionalOption[] => {
@@ -16,7 +16,6 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
  const {
    onTransaction,
    aiHandler,
-    bubbleMenuEnabled = true,
    containerClassName,
    disabledExtensions,
    displayConfig = DEFAULT_DISPLAY_CONFIG,
@@ -76,9 +75,8 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {

  return (
    <PageRenderer
-      aiHandler={aiHandler}
-      bubbleMenuEnabled={bubbleMenuEnabled}
      displayConfig={displayConfig}
+      aiHandler={aiHandler}
      editor={editor}
      editorContainerClassName={editorContainerClassNames}
      id={id}
@@ -15,13 +15,12 @@ import { Editor, ReactRenderer } from "@tiptap/react";
 // components
 import { EditorContainer, EditorContentWrapper } from "@/components/editors";
 import { LinkView, LinkViewProps } from "@/components/links";
-import { AIFeaturesMenu, BlockMenu, EditorBubbleMenu } from "@/components/menus";
+import { AIFeaturesMenu, BlockMenu } from "@/components/menus";
 // types
 import { TAIHandler, TDisplayConfig } from "@/types";

 type IPageRenderer = {
  aiHandler?: TAIHandler;
-  bubbleMenuEnabled: boolean;
  displayConfig: TDisplayConfig;
  editor: Editor;
  editorContainerClassName: string;
@@ -30,7 +29,7 @@ type IPageRenderer = {
 };

 export const PageRenderer = (props: IPageRenderer) => {
-  const { aiHandler, bubbleMenuEnabled, displayConfig, editor, editorContainerClassName, id, tabIndex } = props;
+  const { aiHandler, displayConfig, editor, editorContainerClassName, id, tabIndex } = props;
  // states
  const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
  const [isOpen, setIsOpen] = useState(false);
@@ -142,7 +141,6 @@ export const PageRenderer = (props: IPageRenderer) => {
          <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
          {editor.isEditable && (
            <div>
-              {bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}
              <BlockMenu editor={editor} />
              <AIFeaturesMenu menu={aiHandler?.menu} />
            </div>
@@ -69,7 +69,6 @@ const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {

  return (
    <PageRenderer
-      bubbleMenuEnabled={false}
      displayConfig={displayConfig}
      editor={editor}
      editorContainerClassName={editorContainerClassName}
@@ -1,6 +1,6 @@
+import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
 import { Editor } from "@tiptap/core";
-import { Check, Link, Trash2 } from "lucide-react";
-import { Dispatch, FC, SetStateAction, useCallback, useRef, useState } from "react";
+import { Check, Link, Trash } from "lucide-react";
 // plane utils
 import { cn } from "@plane/utils";
 // helpers
@@ -15,26 +15,22 @@ type Props = {

 export const BubbleMenuLinkSelector: FC<Props> = (props) => {
  const { editor, isOpen, setIsOpen } = props;
-  // states
-  const [error, setError] = useState(false);
  // refs
  const inputRef = useRef<HTMLInputElement>(null);

-  const handleLinkSubmit = useCallback(() => {
+  const onLinkSubmit = useCallback(() => {
    const input = inputRef.current;
-    if (!input) return;
-    let url = input.value;
-    if (!url) return;
-    if (!url.startsWith("http")) url = `http://${url}`;
-    if (isValidHttpUrl(url)) {
+    const url = input?.value;
+    if (url && isValidHttpUrl(url)) {
      setLinkEditor(editor, url);
      setIsOpen(false);
-      setError(false);
-    } else {
-      setError(true);
    }
  }, [editor, inputRef, setIsOpen]);

+  useEffect(() => {
+    inputRef.current && inputRef.current?.focus();
+  });
+
  return (
    <div className="relative h-full">
      <button
@@ -51,62 +47,52 @@ export const BubbleMenuLinkSelector: FC<Props> = (props) => {
          e.stopPropagation();
        }}
      >
-        Link
+        <span>Link</span>
        <Link className="flex-shrink-0 size-3" />
      </button>
      {isOpen && (
-        <div className="fixed top-full z-[99999] mt-1 w-60 animate-in fade-in slide-in-from-top-1 rounded bg-custom-background-100 shadow-custom-shadow-rg">
-          <div
-            className={cn("flex rounded border border-custom-border-300 transition-colors", {
-              "border-red-500": error,
-            })}
-          >
-            <input
-              ref={inputRef}
-              type="url"
-              placeholder="Enter or paste a link"
-              onClick={(e) => e.stopPropagation()}
-              className="flex-1 border-r border-custom-border-300 bg-custom-background-100 py-2 px-1.5 text-xs outline-none placeholder:text-custom-text-400 rounded"
-              defaultValue={editor.getAttributes("link").href || ""}
-              onKeyDown={(e) => {
-                setError(false);
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  handleLinkSubmit();
-                }
+        <div
+          className="dow-xl fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 animate-in fade-in slide-in-from-top-1"
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              onLinkSubmit();
+            }
+          }}
+        >
+          <input
+            ref={inputRef}
+            type="url"
+            placeholder="Paste a link"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex-1 border-r border-custom-border-300 bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400"
+            defaultValue={editor.getAttributes("link").href || ""}
+          />
+          {editor.getAttributes("link").href ? (
+            <button
+              type="button"
+              className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
+              onClick={(e) => {
+                unsetLinkEditor(editor);
+                setIsOpen(false);
+                e.stopPropagation();
              }}
-              onFocus={() => setError(false)}
-              autoFocus
-            />
-            {editor.getAttributes("link").href ? (
-              <button
-                type="button"
-                className="grid place-items-center rounded-sm p-1 text-red-500 hover:bg-red-500/20 transition-all"
-                onClick={(e) => {
-                  unsetLinkEditor(editor);
-                  setIsOpen(false);
-                  e.stopPropagation();
-                }}
-              >
-                <Trash2 className="size-4" />
-              </button>
-            ) : (
-              <button
-                type="button"
-                className="h-full aspect-square grid place-items-center p-1 rounded-sm text-custom-text-300 hover:bg-custom-background-80 transition-all"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleLinkSubmit();
-                }}
-              >
-                <Check className="size-4" />
-              </button>
-            )}
-          </div>
-          {error && (
-            <p className="text-xs text-red-500 my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
-              Please enter a valid URL
-            </p>
+            >
+              <Trash className="h-4 w-4" />
+            </button>
+          ) : (
+            <button
+              className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90"
+              type="button"
+              onClick={(e) => {
+                onLinkSubmit();
+                e.stopPropagation();
+              }}
+            >
+              <Check className="h-4 w-4" />
+            </button>
          )}
        </div>
      )}
@@ -202,7 +202,8 @@ export const ImageItem = (editor: Editor): EditorMenuItem<"image"> => ({
  key: "image",
  name: "Image",
  isActive: () => editor?.isActive("image") || editor?.isActive("imageComponent"),
-  command: () => insertImage({ editor, event: "insert", pos: editor.state.selection.from }),
+  command: ({ savedSelection }) =>
+    insertImage({ editor, event: "insert", pos: savedSelection?.from ?? editor.state.selection.from }),
  icon: ImageIcon,
 });

@@ -93,19 +93,6 @@ export const CustomColorExtension = Mark.create({
    };
  },

-  addStorage() {
-    return {
-      markdown: {
-        serialize: {
-          open: "",
-          close: "",
-          mixable: true,
-          expelEnclosingWhitespace: true,
-        },
-      },
-    };
-  },
-
  parseHTML() {
    return [
      {
@@ -134,6 +134,10 @@ const SideMenu = (options: SideMenuPluginProps) => {
            rect.left -= 8;
          }

+          if (node.parentElement?.matches("td") || node.parentElement?.matches("th")) {
+            rect.left += 8;
+          }
+
          rect.width = options.dragHandleWidth;

          if (!editorSideMenu) return;
@@ -39,11 +39,11 @@ import {
  setText,
 } from "@/helpers/editor-commands";
 // types
-import { CommandProps, ISlashCommandItem, TSlashCommandSectionKeys } from "@/types";
+import { CommandProps, ISlashCommandItem, TExtensions, TSlashCommandSectionKeys } from "@/types";
 // plane editor extensions
 import { coreEditorAdditionalSlashCommandOptions } from "@/plane-editor/extensions";
 // local types
-import { TExtensionProps } from "./root";
+import { TSlashCommandAdditionalOption } from "./root";

 export type TSlashCommandSection = {
  key: TSlashCommandSectionKeys;
@@ -51,8 +51,13 @@ export type TSlashCommandSection = {
  items: ISlashCommandItem[];
 };

+type TArgs = {
+  additionalOptions?: TSlashCommandAdditionalOption[];
+  disabledExtensions: TExtensions[];
+};
+
 export const getSlashCommandFilteredSections =
-  (args: TExtensionProps) =>
+  (args: TArgs) =>
  ({ query }: { query: string }): TSlashCommandSection[] => {
    const { additionalOptions, disabledExtensions } = args;
    const SLASH_COMMAND_SECTIONS: TSlashCommandSection[] = [
@@ -103,9 +103,9 @@ const renderItems = () => {
  };
 };

-export type TExtensionProps = {
+type TExtensionProps = {
  additionalOptions?: TSlashCommandAdditionalOption[];
-  disabledExtensions?: TExtensions[];
+  disabledExtensions: TExtensions[];
 };

 export const SlashCommands = (props: TExtensionProps) =>
@@ -39,12 +39,7 @@ export interface TableOptions {
 declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    table: {
-      insertTable: (options?: {
-        rows?: number;
-        cols?: number;
-        withHeaderRow?: boolean;
-        columnWidth?: number;
-      }) => ReturnType;
+      insertTable: (options?: { rows?: number; cols?: number; withHeaderRow?: boolean }) => ReturnType;
      addColumnBefore: () => ReturnType;
      addColumnAfter: () => ReturnType;
      deleteColumn: () => ReturnType;
@@ -113,9 +108,9 @@ export const Table = Node.create({
  addCommands() {
    return {
      insertTable:
-        ({ rows = 3, cols = 3, withHeaderRow = false, columnWidth = 150 } = {}) =>
+        ({ rows = 3, cols = 3, withHeaderRow = false } = {}) =>
        ({ tr, dispatch, editor }) => {
-          const node = createTable(editor.schema, rows, cols, withHeaderRow, undefined, columnWidth);
+          const node = createTable(editor.schema, rows, cols, withHeaderRow);
          if (dispatch) {
            const offset = tr.selection.anchor + 1;

@@ -2,12 +2,11 @@ import { Fragment, Node as ProsemirrorNode, NodeType } from "@tiptap/pm/model";

 export function createCell(
  cellType: NodeType,
-  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
-  attrs?: Record<string, any>
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
 ): ProsemirrorNode | null | undefined {
  if (cellContent) {
-    return cellType.createChecked(attrs, cellContent);
+    return cellType.createChecked(null, cellContent);
  }

-  return cellType.createAndFill(attrs);
+  return cellType.createAndFill();
 }
@@ -8,22 +8,21 @@ export function createTable(
  rowsCount: number,
  colsCount: number,
  withHeaderRow: boolean,
-  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
-  columnWidth: number = 100
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
 ): ProsemirrorNode {
  const types = getTableNodeTypes(schema);
  const headerCells: ProsemirrorNode[] = [];
  const cells: ProsemirrorNode[] = [];

  for (let index = 0; index < colsCount; index += 1) {
-    const cell = createCell(types.cell, cellContent, { colwidth: [columnWidth] });
+    const cell = createCell(types.cell, cellContent);

    if (cell) {
      cells.push(cell);
    }

    if (withHeaderRow) {
-      const headerCell = createCell(types.header_cell, cellContent, { colwidth: [columnWidth] });
+      const headerCell = createCell(types.header_cell, cellContent);

      if (headerCell) {
        headerCells.push(headerCell);
@@ -138,9 +138,8 @@ export const insertTableCommand = (editor: Editor, range?: Range) => {
      }
    }
  }
-  if (range)
-    editor.chain().focus().deleteRange(range).clearNodes().insertTable({ rows: 3, cols: 3, columnWidth: 150 }).run();
-  else editor.chain().focus().clearNodes().insertTable({ rows: 3, cols: 3, columnWidth: 150 }).run();
+  if (range) editor.chain().focus().deleteRange(range).clearNodes().insertTable({ rows: 3, cols: 3 }).run();
+  else editor.chain().focus().clearNodes().insertTable({ rows: 3, cols: 3 }).run();
 };

 export const insertImage = ({
@@ -1,21 +1,27 @@
+import { MutableRefObject } from "react";
+import { Selection } from "@tiptap/pm/state";
 import { Editor } from "@tiptap/react";

-export const insertContentAtSavedSelection = (editor: Editor, content: string) => {
-  if (!editor || editor.isDestroyed) {
+export const insertContentAtSavedSelection = (
+  editorRef: MutableRefObject<Editor | null>,
+  content: string,
+  savedSelection: Selection
+) => {
+  if (!editorRef.current || editorRef.current.isDestroyed) {
    console.error("Editor reference is not available or has been destroyed.");
    return;
  }

-  if (!editor.state.selection) {
+  if (!savedSelection) {
    console.error("Saved selection is invalid.");
    return;
  }

-  const docSize = editor.state.doc.content.size;
-  const safePosition = Math.max(0, Math.min(editor.state.selection.anchor, docSize));
+  const docSize = editorRef.current.state.doc.content.size;
+  const safePosition = Math.max(0, Math.min(savedSelection.anchor, docSize));

  try {
-    editor.chain().focus().insertContentAt(safePosition, content).run();
+    editorRef.current.chain().focus().insertContentAt(safePosition, content).run();
  } catch (error) {
    console.error("An error occurred while inserting content at saved selection:", error);
  }
@@ -1,11 +1,12 @@
+import { useImperativeHandle, useRef, MutableRefObject, useState, useEffect } from "react";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { DOMSerializer } from "@tiptap/pm/model";
+import { Selection } from "@tiptap/pm/state";
 import { EditorProps } from "@tiptap/pm/view";
-import { useEditor as useTiptapEditor, Extensions } from "@tiptap/react";
-import { useImperativeHandle, MutableRefObject, useEffect } from "react";
+import { useEditor as useTiptapEditor, Editor, Extensions } from "@tiptap/react";
 import * as Y from "yjs";
 // components
-import { getEditorMenuItems } from "@/components/menus";
+import { EditorMenuItem, getEditorMenuItems } from "@/components/menus";
 // extensions
 import { CoreEditorExtensions } from "@/extensions";
 // helpers
@@ -70,12 +71,14 @@ export const useEditor = (props: CustomEditorProps) => {
    provider,
    autofocus = false,
  } = props;
-
+  // states
+  const [savedSelection, setSavedSelection] = useState<Selection | null>(null);
+  // refs
+  const editorRef: MutableRefObject<Editor | null> = useRef(null);
+  const savedSelectionRef = useRef(savedSelection);
  const editor = useTiptapEditor(
    {
      editable,
-      immediatelyRender: false,
-      shouldRerenderOnTransaction: false,
      autofocus,
      editorProps: {
        ...CoreEditorProps({
@@ -97,7 +100,8 @@ export const useEditor = (props: CustomEditorProps) => {
      ],
      content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",
      onCreate: () => handleEditorReady?.(true),
-      onTransaction: () => {
+      onTransaction: ({ editor }) => {
+        setSavedSelection(editor.state.selection);
        onTransaction?.();
      },
      onUpdate: ({ editor }) => onChange?.(editor.getJSON(), editor.getHTML()),
@@ -106,17 +110,23 @@ export const useEditor = (props: CustomEditorProps) => {
    [editable]
  );

+  // Update the ref whenever savedSelection changes
+  useEffect(() => {
+    savedSelectionRef.current = savedSelection;
+  }, [savedSelection]);
+
  // Effect for syncing SWR data
  useEffect(() => {
    // value is null when intentionally passed where syncing is not yet
    // supported and value is undefined when the data from swr is not populated
-    if (value == null) return;
+    if (value === null || value === undefined) return;
    if (editor && !editor.isDestroyed && !editor.storage.imageComponent.uploadInProgress) {
      try {
        editor.commands.setContent(value, false, { preserveWhitespace: "full" });
-        if (editor.state.selection) {
+        const currentSavedSelection = savedSelectionRef.current;
+        if (currentSavedSelection) {
          const docLength = editor.state.doc.content.size;
-          const relativePosition = Math.min(editor.state.selection.from, docLength - 1);
+          const relativePosition = Math.min(currentSavedSelection.from, docLength - 1);
          editor.commands.setTextSelection(relativePosition);
        }
      } catch (error) {
@@ -128,40 +138,46 @@ export const useEditor = (props: CustomEditorProps) => {
  useImperativeHandle(
    forwardedRef,
    () => ({
-      blur: () => editor.commands.blur(),
+      blur: () => editorRef.current?.commands.blur(),
      scrollToNodeViaDOMCoordinates(behavior?: ScrollBehavior, pos?: number) {
-        const resolvedPos = pos ?? editor.state.selection.from;
-        if (!editor || !resolvedPos) return;
-        scrollToNodeViaDOMCoordinates(editor, resolvedPos, behavior);
+        const resolvedPos = pos ?? savedSelection?.from;
+        if (!editorRef.current || !resolvedPos) return;
+        scrollToNodeViaDOMCoordinates(editorRef.current, resolvedPos, behavior);
      },
-      getCurrentCursorPosition: () => editor.state.selection.from,
+      getCurrentCursorPosition: () => savedSelection?.from,
      clearEditor: (emitUpdate = false) => {
-        editor?.chain().setMeta("skipImageDeletion", true).clearContent(emitUpdate).run();
+        editorRef.current?.chain().setMeta("skipImageDeletion", true).clearContent(emitUpdate).run();
      },
      setEditorValue: (content: string) => {
-        editor?.commands.setContent(content, false, { preserveWhitespace: "full" });
+        editorRef.current?.commands.setContent(content, false, { preserveWhitespace: "full" });
      },
      setEditorValueAtCursorPosition: (content: string) => {
-        if (editor.state.selection) {
-          insertContentAtSavedSelection(editor, content);
+        if (savedSelection) {
+          insertContentAtSavedSelection(editorRef, content, savedSelection);
        }
      },
      executeMenuItemCommand: (props) => {
        const { itemKey } = props;
-        const editorItems = getEditorMenuItems(editor);
+        const editorItems = getEditorMenuItems(editorRef.current);

        const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);

        const item = getEditorMenuItem(itemKey);
        if (item) {
-          item.command(props);
+          if (item.key === "image") {
+            (item as EditorMenuItem<"image">).command({
+              savedSelection: savedSelectionRef.current,
+            });
+          } else {
+            item.command(props);
+          }
        } else {
          console.warn(`No command found for item: ${itemKey}`);
        }
      },
      isMenuItemActive: (props) => {
        const { itemKey } = props;
-        const editorItems = getEditorMenuItems(editor);
+        const editorItems = getEditorMenuItems(editorRef.current);

        const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
        const item = getEditorMenuItem(itemKey);
@@ -171,20 +187,20 @@ export const useEditor = (props: CustomEditorProps) => {
      },
      onHeadingChange: (callback: (headings: IMarking[]) => void) => {
        // Subscribe to update event emitted from headers extension
-        editor?.on("update", () => {
-          callback(editor?.storage.headingList.headings);
+        editorRef.current?.on("update", () => {
+          callback(editorRef.current?.storage.headingList.headings);
        });
        // Return a function to unsubscribe to the continuous transactions of
        // the editor on unmounting the component that has subscribed to this
        // method
        return () => {
-          editor?.off("update");
+          editorRef.current?.off("update");
        };
      },
-      getHeadings: () => editor?.storage.headingList.headings,
+      getHeadings: () => editorRef?.current?.storage.headingList.headings,
      onStateChange: (callback: () => void) => {
        // Subscribe to editor state changes
-        editor?.on("transaction", () => {
+        editorRef.current?.on("transaction", () => {
          callback();
        });

@@ -192,17 +208,17 @@ export const useEditor = (props: CustomEditorProps) => {
        // the editor on unmounting the component that has subscribed to this
        // method
        return () => {
-          editor?.off("transaction");
+          editorRef.current?.off("transaction");
        };
      },
      getMarkDown: (): string => {
-        const markdownOutput = editor?.storage.markdown.getMarkdown();
+        const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();
        return markdownOutput;
      },
      getDocument: () => {
        const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
-        const documentHTML = editor?.getHTML() ?? "<p></p>";
-        const documentJSON = editor.getJSON() ?? null;
+        const documentHTML = editorRef.current?.getHTML() ?? "<p></p>";
+        const documentJSON = editorRef.current?.getJSON() ?? null;

        return {
          binary: documentBinary,
@@ -211,19 +227,19 @@ export const useEditor = (props: CustomEditorProps) => {
        };
      },
      scrollSummary: (marking: IMarking): void => {
-        if (!editor) return;
-        scrollSummary(editor, marking);
+        if (!editorRef.current) return;
+        scrollSummary(editorRef.current, marking);
      },
-      isEditorReadyToDiscard: () => editor?.storage.imageComponent.uploadInProgress === false,
+      isEditorReadyToDiscard: () => editorRef.current?.storage.imageComponent.uploadInProgress === false,
      setFocusAtPosition: (position: number) => {
-        if (!editor || editor.isDestroyed) {
+        if (!editorRef.current || editorRef.current.isDestroyed) {
          console.error("Editor reference is not available or has been destroyed.");
          return;
        }
        try {
-          const docSize = editor.state.doc.content.size;
+          const docSize = editorRef.current.state.doc.content.size;
          const safePosition = Math.max(0, Math.min(position, docSize));
-          editor
+          editorRef.current
            .chain()
            .insertContentAt(safePosition, [{ type: "paragraph" }])
            .focus()
@@ -233,17 +249,17 @@ export const useEditor = (props: CustomEditorProps) => {
        }
      },
      getSelectedText: () => {
-        if (!editor) return null;
+        if (!editorRef.current) return null;

-        const { state } = editor;
+        const { state } = editorRef.current;
        const { from, to, empty } = state.selection;

        if (empty) return null;

        const nodesArray: string[] = [];
        state.doc.nodesBetween(from, to, (node, _pos, parent) => {
-          if (parent === state.doc && editor) {
-            const serializer = DOMSerializer.fromSchema(editor.schema);
+          if (parent === state.doc && editorRef.current) {
+            const serializer = DOMSerializer.fromSchema(editorRef.current?.schema);
            const dom = serializer.serializeNode(node);
            const tempDiv = document.createElement("div");
            tempDiv.appendChild(dom);
@@ -254,21 +270,28 @@ export const useEditor = (props: CustomEditorProps) => {
        return selection;
      },
      insertText: (contentHTML, insertOnNextLine) => {
-        if (!editor) return;
-        const { from, to, empty } = editor.state.selection;
+        if (!editorRef.current) return;
+        // get selection
+        const { from, to, empty } = editorRef.current.state.selection;
        if (empty) return;
        if (insertOnNextLine) {
          // move cursor to the end of the selection and insert a new line
-          editor.chain().focus().setTextSelection(to).insertContent("<br />").insertContent(contentHTML).run();
+          editorRef.current
+            .chain()
+            .focus()
+            .setTextSelection(to)
+            .insertContent("<br />")
+            .insertContent(contentHTML)
+            .run();
        } else {
          // replace selected text with the content provided
-          editor.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
+          editorRef.current.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
        }
      },
      getDocumentInfo: () => ({
-        characters: editor?.storage?.characterCount?.characters?.() ?? 0,
-        paragraphs: getParagraphCount(editor?.state),
-        words: editor?.storage?.characterCount?.words?.() ?? 0,
+        characters: editorRef?.current?.storage?.characterCount?.characters?.() ?? 0,
+        paragraphs: getParagraphCount(editorRef?.current?.state),
+        words: editorRef?.current?.storage?.characterCount?.words?.() ?? 0,
      }),
      setProviderDocument: (value) => {
        const document = provider?.document;
@@ -278,12 +301,16 @@ export const useEditor = (props: CustomEditorProps) => {
      emitRealTimeUpdate: (message: TDocumentEventsServer) => provider?.sendStateless(message),
      listenToRealTimeUpdate: () => provider && { on: provider.on.bind(provider), off: provider.off.bind(provider) },
    }),
-    [editor]
+    [editorRef, savedSelection]
  );

  if (!editor) {
    return null;
  }

+  // the editorRef is used to access the editor instance from outside the hook
+  // and should only be used after editor is initialized
+  editorRef.current = editor;
+
  return editor;
 };
@@ -1,7 +1,7 @@
+import { useImperativeHandle, useRef, MutableRefObject, useEffect } from "react";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { EditorProps } from "@tiptap/pm/view";
-import { useEditor as useTiptapEditor, Extensions } from "@tiptap/react";
-import { useImperativeHandle, MutableRefObject, useEffect } from "react";
+import { useEditor as useCustomEditor, Editor, Extensions } from "@tiptap/react";
 import * as Y from "yjs";
 // extensions
 import { CoreReadOnlyEditorExtensions } from "@/extensions";
@@ -11,7 +11,13 @@ import { IMarking, scrollSummary } from "@/helpers/scroll-to-node";
 // props
 import { CoreReadOnlyEditorProps } from "@/props";
 // types
-import type { EditorReadOnlyRefApi, TExtensions, TFileHandler, TReadOnlyMentionHandler } from "@/types";
+import type {
+  EditorReadOnlyRefApi,
+  TExtensions,
+  TDocumentEventsServer,
+  TFileHandler,
+  TReadOnlyMentionHandler,
+} from "@/types";

 interface CustomReadOnlyEditorProps {
  disabledExtensions: TExtensions[];
@@ -40,10 +46,8 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
    provider,
  } = props;

-  const editor = useTiptapEditor({
+  const editor = useCustomEditor({
    editable: false,
-    immediatelyRender: true,
-    shouldRerenderOnTransaction: false,
    content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",
    editorProps: {
      ...CoreReadOnlyEditorProps({
@@ -73,21 +77,23 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
    if (editor && !editor.isDestroyed) editor?.commands.setContent(initialValue, false, { preserveWhitespace: "full" });
  }, [editor, initialValue]);

+  const editorRef: MutableRefObject<Editor | null> = useRef(null);
+
  useImperativeHandle(forwardedRef, () => ({
    clearEditor: (emitUpdate = false) => {
-      editor?.chain().setMeta("skipImageDeletion", true).clearContent(emitUpdate).run();
+      editorRef.current?.chain().setMeta("skipImageDeletion", true).clearContent(emitUpdate).run();
    },
    setEditorValue: (content: string) => {
-      editor?.commands.setContent(content, false, { preserveWhitespace: "full" });
+      editorRef.current?.commands.setContent(content, false, { preserveWhitespace: "full" });
    },
    getMarkDown: (): string => {
-      const markdownOutput = editor?.storage.markdown.getMarkdown();
+      const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();
      return markdownOutput;
    },
    getDocument: () => {
      const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
-      const documentHTML = editor?.getHTML() ?? "<p></p>";
-      const documentJSON = editor?.getJSON() ?? null;
+      const documentHTML = editorRef.current?.getHTML() ?? "<p></p>";
+      const documentJSON = editorRef.current?.getJSON() ?? null;

      return {
        binary: documentBinary,
@@ -96,22 +102,35 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
      };
    },
    scrollSummary: (marking: IMarking): void => {
-      if (!editor) return;
-      scrollSummary(editor, marking);
+      if (!editorRef.current) return;
+      scrollSummary(editorRef.current, marking);
    },
-    getDocumentInfo: () => {
-      if (!editor) return;
-      return {
-        characters: editor.storage?.characterCount?.characters?.() ?? 0,
-        paragraphs: getParagraphCount(editor.state),
-        words: editor.storage?.characterCount?.words?.() ?? 0,
+    getDocumentInfo: () => ({
+      characters: editorRef?.current?.storage?.characterCount?.characters?.() ?? 0,
+      paragraphs: getParagraphCount(editorRef?.current?.state),
+      words: editorRef?.current?.storage?.characterCount?.words?.() ?? 0,
+    }),
+    onHeadingChange: (callback: (headings: IMarking[]) => void) => {
+      // Subscribe to update event emitted from headers extension
+      editorRef.current?.on("update", () => {
+        callback(editorRef.current?.storage.headingList.headings);
+      });
+      // Return a function to unsubscribe to the continuous transactions of
+      // the editor on unmounting the component that has subscribed to this
+      // method
+      return () => {
+        editorRef.current?.off("update");
      };
    },
+    emitRealTimeUpdate: (message: TDocumentEventsServer) => provider?.sendStateless(message),
+    listenToRealTimeUpdate: () => provider && { on: provider.on.bind(provider), off: provider.off.bind(provider) },
+    getHeadings: () => editorRef?.current?.storage.headingList.headings,
  }));

  if (!editor) {
    return null;
  }

+  editorRef.current = editor;
  return editor;
 };
@@ -88,18 +88,16 @@ export const nodeDOMAtCoords = (coords: { x: number; y: number }) => {
  const elements = document.elementsFromPoint(coords.x, coords.y);

  for (const elem of elements) {
-    // Check for table wrapper first
-    if (elem.matches(".table-wrapper")) {
-      return elem;
-    }
-
    if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) {
      return elem;
    }

-    // Skip table cells
-    if (elem.closest(".table-wrapper")) {
-      continue;
+    // if the element is a <p> tag that is the first child of a td or th
+    if (
+      (elem.matches("td > p:first-child") || elem.matches("th > p:first-child")) &&
+      elem?.textContent?.trim() !== ""
+    ) {
+      return elem; // Return only if p tag is not empty in td or th
    }

    // apply general selector
@@ -86,6 +86,10 @@ export type EditorReadOnlyRefApi = {
    paragraphs: number;
    words: number;
  };
+  onHeadingChange: (callback: (headings: IMarking[]) => void) => () => void;
+  getHeadings: () => IMarking[];
+  emitRealTimeUpdate: (action: TDocumentEventsServer) => void;
+  listenToRealTimeUpdate: () => TDocumentEventEmitter | undefined;
 };

 export interface EditorRefApi extends EditorReadOnlyRefApi {
@@ -101,10 +105,6 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
  getSelectedText: () => string | null;
  insertText: (contentHTML: string, insertOnNextLine?: boolean) => void;
  setProviderDocument: (value: Uint8Array) => void;
-  onHeadingChange: (callback: (headings: IMarking[]) => void) => () => void;
-  getHeadings: () => IMarking[];
-  emitRealTimeUpdate: (action: TDocumentEventsServer) => void;
-  listenToRealTimeUpdate: () => TDocumentEventEmitter | undefined;
 }

 // editor props
@@ -138,9 +138,8 @@ export interface IRichTextEditor extends IEditorProps {

 export interface ICollaborativeDocumentEditor
  extends Omit<IEditorProps, "initialValue" | "onChange" | "onEnterKeyPress" | "value"> {
-  aiHandler?: TAIHandler;
-  bubbleMenuEnabled?: boolean;
  editable: boolean;
+  aiHandler?: TAIHandler;
  embedHandler: TEmbedConfig;
  handleEditorReady?: (value: boolean) => void;
  id: string;
@@ -25,7 +25,7 @@
 .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
-  color: var(--color-placeholder);
+  color: rgb(var(--color-text-400));
  pointer-events: none;
  height: 0;
 }
@@ -34,7 +34,7 @@
 .ProseMirror p.is-empty::before {
  content: attr(data-placeholder);
  float: left;
-  color: var(--color-placeholder);
+  color: rgb(var(--color-text-400));
  pointer-events: none;
  height: 0;
 }
@@ -105,14 +105,14 @@ ul[data-type="taskList"] li > div {
 }

 ul[data-type="taskList"] li > label input[type="checkbox"] {
-  border: 1px solid rgba(var(--color-text-100), 0.2) !important;
+  border: 1px solid rgba(var(--color-border-300)) !important;
  outline: none;
  border-radius: 2px;
  transform: scale(1.05);
 }

 .ProseMirror[contenteditable="true"] input[type="checkbox"]:hover {
-  background-color: rgba(var(--color-text-100), 0.1);
+  background-color: rgba(var(--color-background-80));
 }

 .ProseMirror[contenteditable="false"] input[type="checkbox"] {
@@ -145,7 +145,7 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
-  background-color: transparent;
+  background-color: rgb(var(--color-background-100));
  margin: 0;
  cursor: pointer;
  width: 0.8rem;
@@ -192,7 +192,7 @@ ul[data-type="taskList"] li > div {

 ul[data-type="taskList"] li[data-checked="true"] {
  & > div > p.editor-paragraph-block {
-    color: var(--color-placeholder);
+    color: rgb(var(--color-text-400));
  }

  [data-text-color] {
@@ -408,14 +408,12 @@ p.editor-paragraph-block {
    padding-top: 4px;
  }

-  &:not(td p.editor-paragraph-block, th p.editor-paragraph-block) {
-    &:last-child {
-      padding-bottom: 4px;
-    }
+  &:last-child {
+    padding-bottom: 4px;
+  }

-    &:not(:last-child) {
-      padding-bottom: 8px;
-    }
+  &:not(:last-child) {
+    padding-bottom: 8px;
  }

  font-size: var(--font-size-regular);
@@ -16,7 +16,7 @@
 .table-wrapper table th {
  min-width: 1em;
  border: 1px solid rgba(var(--color-border-200));
-  padding: 7px 10px;
+  padding: 10px 20px;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
@@ -48,7 +48,7 @@
 /* table dropdown */
 .table-wrapper table .column-resize-handle {
  position: absolute;
-  right: 0;
+  right: -2px;
  top: 0;
  width: 2px;
  height: 100%;
@@ -1,6 +1,42 @@
-.editor-container {
-  --color-placeholder: rgba(var(--color-text-100), 0.5);
+:root {
+  /* text colors */
+  --editor-colors-gray-text: #5c5e63;
+  --editor-colors-peach-text: #ff5b59;
+  --editor-colors-pink-text: #f65385;
+  --editor-colors-orange-text: #fd9038;
+  --editor-colors-green-text: #0fc27b;
+  --editor-colors-light-blue-text: #17bee9;
+  --editor-colors-dark-blue-text: #266df0;
+  --editor-colors-purple-text: #9162f9;
+  /* end text colors */
+}

+/* text background colors */
+[data-theme="light"],
+[data-theme="light-contrast"] {
+  --editor-colors-gray-background: #d6d6d8;
+  --editor-colors-peach-background: #ffd5d7;
+  --editor-colors-pink-background: #fdd4e3;
+  --editor-colors-orange-background: #ffe3cd;
+  --editor-colors-green-background: #c3f0de;
+  --editor-colors-light-blue-background: #c5eff9;
+  --editor-colors-dark-blue-background: #c9dafb;
+  --editor-colors-purple-background: #e3d8fd;
+}
+[data-theme="dark"],
+[data-theme="dark-contrast"] {
+  --editor-colors-gray-background: #404144;
+  --editor-colors-peach-background: #593032;
+  --editor-colors-pink-background: #562e3d;
+  --editor-colors-orange-background: #583e2a;
+  --editor-colors-green-background: #1d4a3b;
+  --editor-colors-light-blue-background: #1f495c;
+  --editor-colors-dark-blue-background: #223558;
+  --editor-colors-purple-background: #3d325a;
+}
+/* end text background colors */
+
+.editor-container {
  /* font sizes and line heights */
  &.large-font {
    --font-size-h1: 1.75rem;
@@ -49,6 +49,11 @@ module.exports = {
      {
        groups: ["builtin", "external", "internal", "parent", "sibling"],
        pathGroups: [
+          {
+            pattern: "react",
+            group: "external",
+            position: "before",
+          },
          {
            pattern: "@plane/**",
            group: "external",
@@ -10,8 +10,7 @@
    "lint:errors": "eslint src --ext .ts,.tsx --quiet"
  },
  "dependencies": {
-    "@plane/utils": "*",
-    "intl-messageformat": "^10.7.11"
+    "@plane/utils": "*"
  },
  "devDependencies": {
    "@plane/eslint-config": "*",
@@ -0,0 +1,29 @@
+import { observer } from "mobx-react";
+import React, { createContext, useEffect } from "react";
+import { Language, languages } from "../config";
+import { TranslationStore } from "./store";
+
+// Create the store instance
+const translationStore = new TranslationStore();
+
+// Create Context
+export const TranslationContext = createContext<TranslationStore>(translationStore);
+
+export const TranslationProvider = observer(({ children }: { children: React.ReactNode }) => {
+  // Handle storage events for cross-tab synchronization
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === "userLanguage" && event.newValue) {
+        const newLang = event.newValue as Language;
+        if (languages.includes(newLang)) {
+          translationStore.setLanguage(newLang);
+        }
+      }
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+    return () => window.removeEventListener("storage", handleStorageChange);
+  }, []);
+
+  return <TranslationContext.Provider value={translationStore}>{children}</TranslationContext.Provider>;
+});
@@ -0,0 +1,42 @@
+import { makeObservable, observable } from "mobx";
+import { Language, fallbackLng, languages, translations } from "../config";
+
+export class TranslationStore {
+  currentLocale: Language = fallbackLng;
+
+  constructor() {
+    makeObservable(this, {
+      currentLocale: observable.ref,
+    });
+    this.initializeLanguage();
+  }
+
+  get availableLanguages() {
+    return languages;
+  }
+
+  t(key: string) {
+    return translations[this.currentLocale]?.[key] || translations[fallbackLng][key] || key;
+  }
+
+  setLanguage(lng: Language) {
+    try {
+      localStorage.setItem("userLanguage", lng);
+      this.currentLocale = lng;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  initializeLanguage() {
+    if (typeof window === "undefined") return;
+    const savedLocale = localStorage.getItem("userLanguage") as Language;
+    if (savedLocale && languages.includes(savedLocale)) {
+      this.setLanguage(savedLocale);
+    } else {
+      const browserLang = navigator.language.split("-")[0] as Language;
+      const newLocale = languages.includes(browserLang as Language) ? (browserLang as Language) : fallbackLng;
+      this.setLanguage(newLocale);
+    }
+  }
+}
@@ -0,0 +1,39 @@
+import en from "../locales/en/translations.json";
+import fr from "../locales/fr/translations.json";
+import es from "../locales/es/translations.json";
+import ja from "../locales/ja/translations.json";
+
+export type Language = (typeof languages)[number];
+export type Translations = {
+  [key: string]: {
+    [key: string]: string;
+  };
+};
+
+export const fallbackLng = "en";
+export const languages = ["en", "fr", "es", "ja"] as const;
+export const translations: Translations = {
+  en,
+  fr,
+  es,
+  ja,
+};
+
+export const SUPPORTED_LANGUAGES = [
+  {
+    label: "English",
+    value: "en",
+  },
+  {
+    label: "French",
+    value: "fr",
+  },
+  {
+    label: "Spanish",
+    value: "es",
+  },
+  {
+    label: "Japanese",
+    value: "ja",
+  },
+];
@@ -1 +0,0 @@
-export * from "./language";
@@ -1,13 +0,0 @@
-import { TLanguage, ILanguageOption } from "../types";
-
-export const FALLBACK_LANGUAGE: TLanguage = "en";
-
-export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
-  { label: "English", value: "en" },
-  { label: "Français", value: "fr" },
-  { label: "Español", value: "es" },
-  { label: "日本語", value: "ja" },
-  { label: "中文", value: "zh-CN" },
-];
-
-export const STORAGE_KEY = "userLanguage";
@@ -1,19 +0,0 @@
-import { observer } from "mobx-react";
-import React, { createContext } from "react";
-// store
-import { TranslationStore } from "../store";
-
-export const TranslationContext = createContext<TranslationStore | null>(null);
-
-interface TranslationProviderProps {
-  children: React.ReactNode;
-}
-
-/**
- * Provides the translation store to the application
- */
-export const TranslationProvider: React.FC<TranslationProviderProps> = observer(({ children }) => {
-  const [store] = React.useState(() => new TranslationStore());
-
-  return <TranslationContext.Provider value={store}>{children}</TranslationContext.Provider>;
-});
@@ -1,35 +1,17 @@
-import { useContext } from 'react';
-// context
-import { TranslationContext } from '../context';
-// types
-import { ILanguageOption, TLanguage } from '../types';
+import { useContext } from "react";
+import { TranslationContext } from "../components";
+import { Language } from "../config";

-export type TTranslationStore = {
-  t: (key: string, params?: Record<string, any>) => string;
-  currentLocale: TLanguage;
-  changeLanguage: (lng: TLanguage) => void;
-  languages: ILanguageOption[];
-};
-
-/**
- * Provides the translation store to the application
- * @returns {TTranslationStore}
- * @returns {(key: string, params?: Record<string, any>) => string} t: method to translate the key with params
- * @returns {TLanguage} currentLocale - current locale language
- * @returns {(lng: TLanguage) => void} changeLanguage - method to change the language
- * @returns {ILanguageOption[]} languages - available languages
- * @throws {Error} if the TranslationProvider is not used
- */
-export function useTranslation(): TTranslationStore {
+export function useTranslation() {
  const store = useContext(TranslationContext);
  if (!store) {
-    throw new Error('useTranslation must be used within a TranslationProvider');
+    throw new Error("useTranslation must be used within a TranslationProvider");
  }

  return {
-    t: store.t.bind(store),
+    t: (key: string) => store.t(key),
    currentLocale: store.currentLocale,
-    changeLanguage: (lng: TLanguage) => store.setLanguage(lng),
+    changeLanguage: (lng: Language) => store.setLanguage(lng),
    languages: store.availableLanguages,
  };
 }
@@ -1,4 +1,3 @@
-export * from "./constants";
-export * from "./context";
+export * from "./config";
+export * from "./components";
 export * from "./hooks";
-export * from "./types";
@@ -19,12 +19,12 @@
  "remove_members": "Supprimer des membres",
  "add": "Ajouter",
  "remove": "Supprimer",
-  "add_new": "Ajouter un nouveau",
+  "add_new": "Ajouter nouveau",
  "remove_selected": "Supprimer la sélection",
  "first_name": "Prénom",
  "last_name": "Nom de famille",
  "email": "Email",
-  "display_name": "Pseudonyme",
+  "display_name": "Nom d'affichage",
  "role": "Rôle",
  "timezone": "Fuseau horaire",
  "avatar": "Avatar",
@@ -32,7 +32,7 @@
  "password": "Mot de passe",
  "change_cover": "Modifier la couverture",
  "language": "Langue",
-  "saving": "Enregistrement en cours...",
+  "saving": "Enregistrement...",
  "save_changes": "Enregistrer les modifications",
  "deactivate_account": "Désactiver le compte",
  "deactivate_account_description": "Lors de la désactivation d'un compte, toutes les données et ressources de ce compte seront définitivement supprimées et ne pourront pas être récupérées.",
@@ -43,14 +43,14 @@
  "activity": "Activité",
  "appearance": "Apparence",
  "notifications": "Notifications",
-  "workspaces": "Espaces de travail",
-  "create_workspace": "Créer un espace de travail",
+  "workspaces": "Workspaces",
+  "create_workspace": "Créer un workspace",
  "invitations": "Invitations",
  "summary": "Résumé",
  "assigned": "Assigné",
  "created": "Créé",
  "subscribed": "Souscrit",
-  "you_do_not_have_the_permission_to_access_this_page": "Vous n'avez pas les permissions d'accéder à cette page.",
+  "you_do_not_have_the_permission_to_access_this_page": "Vous n'avez pas les permissions pour accéder à cette page.",
  "failed_to_sign_out_please_try_again": "Impossible de se déconnecter. Veuillez réessayer.",
  "password_changed_successfully": "Mot de passe changé avec succès.",
  "something_went_wrong_please_try_again": "Quelque chose s'est mal passé. Veuillez réessayer.",
@@ -62,7 +62,7 @@
  "this_field_is_required": "Ce champ est requis",
  "passwords_dont_match": "Les mots de passe ne correspondent pas",
  "please_enter_your_password": "Veuillez entrer votre mot de passe.",
-  "password_length_should_me_more_than_8_characters": "La longueur du mot de passe doit faire au moins 8 caractères.",
+  "password_length_should_me_more_than_8_characters": "La longueur du mot de passe doit être supérieure à 8 caractères.",
  "password_is_weak": "Le mot de passe est faible.",
  "password_is_strong": "Le mot de passe est fort.",
  "load_more": "Charger plus",
@@ -106,8 +106,8 @@
  "comments_description": "Me notifier lorsqu'un utilisateur commente un problème",
  "mentions": "Mention",
  "mentions_description": "Me notifier uniquement lorsqu'un utilisateur mentionne un problème",
-  "create_your_workspace": "Créer votre espace de travail",
-  "only_your_instance_admin_can_create_workspaces": "Seuls les administrateurs de votre instance peuvent créer des espaces de travail",
+  "create_your_workspace": "Créer votre workspace",
+  "only_your_instance_admin_can_create_workspaces": "Seuls les administrateurs de votre instance peuvent créer des workspaces",
  "only_your_instance_admin_can_create_workspaces_description": "Si vous connaissez l'adresse email de votre administrateur d'instance, cliquez sur le bouton ci-dessous pour les contacter.",
  "go_back": "Retour",
  "request_instance_admin": "Demander à l'administrateur de l'instance",
@@ -135,7 +135,7 @@
  "old_password": "Mot de passe actuel",
  "general_settings": "Paramètres généraux",
  "sign_out": "Déconnexion",
-  "signing_out": "Déconnexion en cours",
+  "signing_out": "Déconnexion",
  "active_cycles": "Cycles actifs",
  "active_cycles_description": "Surveillez les cycles dans les projets, suivez les issues de haute priorité et zoomez sur les cycles qui nécessitent attention.",
  "on_demand_snapshots_of_all_your_cycles": "Captures instantanées sur demande de tous vos cycles",
@@ -190,17 +190,17 @@
  "project_created_successfully_description": "Projet créé avec succès. Vous pouvez maintenant ajouter des issues à ce projet.",
  "project_cover_image_alt": "Image de couverture du projet",
  "name_is_required": "Le nom est requis",
-  "title_should_be_less_than_255_characters": "Le titre ne doit pas dépasser 255 caractères",
+  "title_should_be_less_than_255_characters": "Le titre doit être inférieur à 255 caractères",
  "project_name": "Nom du projet",
-  "project_id_must_be_at_least_1_character": "L'ID du projet doit être au moins de 1 caractère",
-  "project_id_must_be_at_most_5_characters": "L'ID du projet doit être au plus de 5 caractères",
+  "project_id_must_be_at_least_1_character": "Le projet ID doit être au moins de 1 caractère",
+  "project_id_must_be_at_most_5_characters": "Le projet ID doit être au plus de 5 caractères",
  "project_id": "ID du projet",
  "project_id_tooltip_content": "Aide à identifier les issues du projet de manière unique. Max 5 caractères.",
  "description_placeholder": "Description...",
  "only_alphanumeric_non_latin_characters_allowed": "Seuls les caractères alphanumériques et non latins sont autorisés.",
-  "project_id_is_required": "L'ID du projet est requis",
+  "project_id_is_required": "Le projet ID est requis",
  "select_network": "Sélectionner le réseau",
-  "lead": "Responsable",
+  "lead": "Lead",
  "private": "Privé",
  "public": "Public",
  "accessible_only_by_invite": "Accessible uniquement par invitation",
@@ -245,11 +245,11 @@
  "contact_sales": "Contacter les ventes",
  "hyper_mode": "Mode hyper",
  "keyboard_shortcuts": "Raccourcis clavier",
-  "whats_new": "Nouveautés ?",
+  "whats_new": "Nouveautés?",
  "version": "Version",
  "we_are_having_trouble_fetching_the_updates": "Nous avons des difficultés à récupérer les mises à jour.",
-  "our_changelogs": "Notre journal de modifications",
-  "for_the_latest_updates": "Pour les dernières mises à jour.",
+  "our_changelogs": "nos changelogs",
+  "for_the_latest_updates": "pour les dernières mises à jour.",
  "please_visit": "Veuillez visiter",
  "docs": "Documentation",
  "full_changelog": "Journal complet",
@@ -316,5 +316,5 @@
  "remove_parent_issue": "Supprimer le problème parent",
  "add_parent": "Ajouter un parent",
  "loading_members": "Chargement des membres...",
-  "inbox": "Boîte de réception"
+  "inbox": "boîte de réception"
 }
@@ -1,319 +0,0 @@
-{
-  "submit": "提交",
-  "cancel": "取消",
-  "loading": "加载中",
-  "error": "错误",
-  "success": "成功",
-  "warning": "警告",
-  "info": "信息",
-  "close": "关闭",
-  "yes": "是",
-  "no": "否",
-  "ok": "确定",
-  "name": "名称",
-  "description": "描述",
-  "search": "搜索",
-  "add_member": "添加成员",
-  "remove_member": "移除成员",
-  "add_members": "添加成员",
-  "remove_members": "移除成员",
-  "add": "添加",
-  "remove": "移除",
-  "add_new": "新增",
-  "remove_selected": "移除选中项",
-  "first_name": "名字",
-  "last_name": "姓氏",
-  "email": "电子邮件",
-  "display_name": "显示名称",
-  "role": "角色",
-  "timezone": "时区",
-  "avatar": "头像",
-  "cover_image": "封面图片",
-  "password": "密码",
-  "change_cover": "更换封面",
-  "language": "语言",
-  "saving": "保存中...",
-  "save_changes": "保存更改",
-  "deactivate_account": "停用账户",
-  "deactivate_account_description": "停用账户后，该账户内的所有数据和资源将被永久删除，且无法恢复。",
-  "profile_settings": "个人资料设置",
-  "your_account": "账户",
-  "profile": "个人资料",
-  "security": "安全",
-  "activity": "活动",
-  "appearance": "外观",
-  "notifications": "通知",
-  "workspaces": "工作区",
-  "create_workspace": "创建工作区",
-  "invitations": "邀请",
-  "summary": "摘要",
-  "assigned": "已分配",
-  "created": "已创建",
-  "subscribed": "已订阅",
-  "you_do_not_have_the_permission_to_access_this_page": "您没有权限访问此页面。",
-  "failed_to_sign_out_please_try_again": "登出失败，请重试。",
-  "password_changed_successfully": "密码已成功更改。",
-  "something_went_wrong_please_try_again": "出错了，请重试。",
-  "change_password": "更改密码",
-  "passwords_dont_match": "密码不匹配",
-  "current_password": "当前密码",
-  "new_password": "新密码",
-  "confirm_password": "确认密码",
-  "this_field_is_required": "此字段为必填项",
-  "changing_password": "正在更改密码",
-  "please_enter_your_password": "请输入您的密码。",
-  "password_length_should_me_more_than_8_characters": "密码长度应大于8个字符。",
-  "password_is_weak": "密码强度较弱。",
-  "password_is_strong": "密码强度较强。",
-  "load_more": "加载更多",
-  "select_or_customize_your_interface_color_scheme": "选择或自定义界面配色方案。",
-  "theme": "主题",
-  "system_preference": "系统偏好",
-  "light": "浅色",
-  "dark": "深色",
-  "light_contrast": "浅色高对比",
-  "dark_contrast": "深色高对比",
-  "custom": "自定义主题",
-  "select_your_theme": "选择主题",
-  "customize_your_theme": "自定义主题",
-  "background_color": "背景颜色",
-  "text_color": "文字颜色",
-  "primary_color": "主色调",
-  "sidebar_background_color": "侧边栏背景颜色",
-  "sidebar_text_color": "侧边栏文字颜色",
-  "set_theme": "设置主题",
-  "enter_a_valid_hex_code_of_6_characters": "请输入6位有效的十六进制代码",
-  "background_color_is_required": "背景颜色为必填项",
-  "text_color_is_required": "文字颜色为必填项",
-  "primary_color_is_required": "主色调为必填项",
-  "sidebar_background_color_is_required": "侧边栏背景颜色为必填项",
-  "sidebar_text_color_is_required": "侧边栏文字颜色为必填项",
-  "updating_theme": "正在更新主题",
-  "theme_updated_successfully": "主题已成功更新",
-  "failed_to_update_the_theme": "主题更新失败",
-  "email_notifications": "电子邮件通知",
-  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "启用此功能以接收您订阅问题的通知。",
-  "email_notification_setting_updated_successfully": "电子邮件通知设置已成功更新",
-  "failed_to_update_email_notification_setting": "电子邮件通知设置更新失败",
-  "notify_me_when": "在以下情况下通知我",
-  "property_changes": "属性更改",
-  "property_changes_description": "当负责人、优先级、估算等属性更改时通知。",
-  "state_change": "状态更改",
-  "state_change_description": "当问题状态更改时通知",
-  "issue_completed": "问题完成",
-  "issue_completed_description": "仅在问题完成时通知",
-  "comments": "评论",
-  "comments_description": "当有人在问题中添加评论时通知",
-  "mentions": "提及",
-  "mentions_description": "仅在评论或描述中提及您时通知",
-  "create_your_workspace": "创建工作区",
-  "only_your_instance_admin_can_create_workspaces": "只有实例管理员可以创建工作区",
-  "only_your_instance_admin_can_create_workspaces_description": "如果您知道实例管理员的电子邮件地址，请点击以下按钮联系他们。",
-  "go_back": "返回",
-  "request_instance_admin": "请求实例管理员",
-  "plane_logo": "Plane 徽标",
-  "workspace_creation_disabled": "工作区创建已禁用",
-  "workspace_request_subject": "新工作区请求",
-  "workspace_request_body": "实例管理员：\n\n请在 URL [/workspace-name] 处创建一个新的工作区。[工作区创建目的]\n\n谢谢。\n{{firstName}} {{lastName}}\n{{email}}",
-  "creating_workspace": "正在创建工作区",
-  "workspace_created_successfully": "工作区已成功创建",
-  "create_workspace_page": "创建工作区页面",
-  "workspace_could_not_be_created_please_try_again": "无法创建工作区，请重试。",
-  "workspace_could_not_be_created_please_try_again_description": "创建工作区时出错，请重试。",
-  "this_is_a_required_field": "此字段为必填项。",
-  "name_your_workspace": "为工作区命名",
-  "workspaces_names_can_contain_only_space_dash_and_alphanumeric_characters": "工作区名称只能包含空格、破折号和字母数字字符。",
-  "limit_your_name_to_80_characters": "名称长度限制为80个字符。",
-  "set_your_workspace_url": "设置工作区URL",
-  "limit_your_url_to_48_characters": "URL长度限制为48个字符。",
-  "how_many_people_will_use_this_workspace": "有多少人将使用此工作区？",
-  "how_many_people_will_use_this_workspace_description": "这将帮助确定购买的席位数量。",
-  "select_a_range": "选择一个范围",
-  "urls_can_contain_only_dash_and_alphanumeric_characters": "URL只能包含破折号和字母数字字符。",
-  "something_familiar_and_recognizable_is_always_best": "熟悉且易于识别的名称总是最佳选择。",
-  "workspace_url_is_already_taken": "工作区URL已被占用！",
-  "old_password": "旧密码",
-  "general_settings": "常规设置",
-  "sign_out": "登出",
-  "signing_out": "正在登出",
-  "active_cycles": "活跃周期",
-  "active_cycles_description": "监控所有项目的周期，跟踪高优先级问题，并关注需要关注的周期。",
-  "on_demand_snapshots_of_all_your_cycles": "所有周期的按需快照",
-  "upgrade": "升级",
-  "10000_feet_view": "所有活跃周期的概览",
-  "10000_feet_view_description": "放大查看所有项目的周期，而不是单独查看每个项目的周期。",
-  "get_snapshot_of_each_active_cycle": "获取每个活跃周期的快照",
-  "get_snapshot_of_each_active_cycle_description": "跟踪所有活跃周期的高级指标，查看进度并了解范围与截止日期的关系。",
-  "compare_burndowns": "比较燃尽图",
-  "compare_burndowns_description": "监控每个团队的表现，查看每个周期的燃尽报告。",
-  "quickly_see_make_or_break_issues": "快速查看关键问题",
-  "quickly_see_make_or_break_issues_description": "预览每个周期中与截止日期相关的高优先级问题。一键查看所有周期的详细信息。",
-  "zoom_into_cycles_that_need_attention": "关注需要关注的周期",
-  "zoom_into_cycles_that_need_attention_description": "一键调查未达预期的周期状态。",
-  "stay_ahead_of_blockers": "提前解决阻碍",
-  "stay_ahead_of_blockers_description": "发现项目间的挑战，查看其他视图中不明显的周期依赖关系。",
-  "analytics": "分析",
-  "workspace_invites": "工作区邀请",
-  "workspace_settings": "工作区设置",
-  "enter_god_mode": "进入上帝模式",
-  "workspace_logo": "工作区徽标",
-  "new_issue": "新建问题",
-  "home": "首页",
-  "your_work": "您的工作",
-  "drafts": "草稿",
-  "projects": "项目",
-  "views": "视图",
-  "workspace": "工作区",
-  "archives": "归档",
-  "settings": "设置",
-  "failed_to_move_favorite": "移动收藏失败",
-  "your_favorites": "您的收藏",
-  "no_favorites_yet": "尚无收藏",
-  "create_folder": "创建文件夹",
-  "new_folder": "新建文件夹",
-  "favorite_updated_successfully": "收藏已成功更新",
-  "favorite_created_successfully": "收藏已成功创建",
-  "folder_already_exists": "文件夹已存在",
-  "folder_name_cannot_be_empty": "文件夹名称不能为空",
-  "something_went_wrong": "出错了",
-  "failed_to_reorder_favorite": "重新排序收藏失败",
-  "favorite_removed_successfully": "收藏已成功移除",
-  "failed_to_create_favorite": "创建收藏失败",
-  "failed_to_rename_favorite": "重命名收藏失败",
-  "project_link_copied_to_clipboard": "项目链接已复制到剪贴板",
-  "link_copied": "链接已复制",
-  "your_projects": "您的项目",
-  "add_project": "添加项目",
-  "create_project": "创建项目",
-  "failed_to_remove_project_from_favorites": "无法从收藏中移除项目，请重试。",
-  "project_created_successfully": "项目已成功创建",
-  "project_created_successfully_description": "项目已成功创建。您现在可以开始添加问题。",
-  "project_cover_image_alt": "项目封面图片",
-  "name_is_required": "名称为必填项",
-  "title_should_be_less_than_255_characters": "标题应少于255个字符",
-  "project_name": "项目名称",
-  "project_id_must_be_at_least_1_character": "项目ID至少为1个字符",
-  "project_id_must_be_at_most_5_characters": "项目ID最多为5个字符",
-  "project_id": "项目ID",
-  "project_id_tooltip_content": "用于唯一标识项目中的问题。最多5个字符。",
-  "description_placeholder": "描述...",
-  "only_alphanumeric_non_latin_characters_allowed": "仅允许字母数字和非拉丁字符。",
-  "project_id_is_required": "项目ID为必填项",
-  "select_network": "选择网络",
-  "lead": "负责人",
-  "private": "私有",
-  "public": "公开",
-  "accessible_only_by_invite": "仅限邀请访问",
-  "anyone_in_the_workspace_except_guests_can_join": "除访客外，工作区中的任何人都可以加入",
-  "creating": "创建中",
-  "creating_project": "正在创建项目",
-  "adding_project_to_favorites": "正在将项目添加到收藏",
-  "project_added_to_favorites": "项目已添加到收藏",
-  "couldnt_add_the_project_to_favorites": "无法将项目添加到收藏，请重试。",
-  "removing_project_from_favorites": "正在从收藏中移除项目",
-  "project_removed_from_favorites": "项目已从收藏中移除",
-  "couldnt_remove_the_project_from_favorites": "无法从收藏中移除项目，请重试。",
-  "add_to_favorites": "添加到收藏",
-  "remove_from_favorites": "从收藏中移除",
-  "publish_settings": "发布设置",
-  "publish": "发布",
-  "copy_link": "复制链接",
-  "leave_project": "离开项目",
-  "join_the_project_to_rearrange": "加入项目以重新排序",
-  "drag_to_rearrange": "拖动以重新排序",
-  "congrats": "恭喜！",
-  "project": "项目",
-  "open_project": "打开项目",
-  "issues": "问题",
-  "cycles": "周期",
-  "modules": "模块",
-  "pages": "页面",
-  "intake": "接收",
-  "time_tracking": "时间跟踪",
-  "work_management": "工作管理",
-  "projects_and_issues": "项目与问题",
-  "projects_and_issues_description": "在此项目上启用或禁用。",
-  "cycles_description": "按时间段对项目工作进行时间盒管理，并调整频率。",
-  "modules_description": "将工作分组为类似子项目的设置，拥有自己的负责人和分配人。",
-  "views_description": "保存排序、过滤和显示选项以供以后使用或共享。",
-  "pages_description": "写下一些内容。",
-  "intake_description": "启用此功能以接收您订阅问题的通知。",
-  "time_tracking_description": "跟踪问题和项目所花费的时间。",
-  "work_management_description": "轻松管理工作和项目。",
-  "documentation": "文档",
-  "message_support": "联系支持",
-  "contact_sales": "联系销售",
-  "hyper_mode": "超速模式",
-  "keyboard_shortcuts": "键盘快捷键",
-  "whats_new": "新功能",
-  "version": "版本",
-  "we_are_having_trouble_fetching_the_updates": "获取更新时出现问题。",
-  "our_changelogs": "我们的更新日志",
-  "for_the_latest_updates": "获取最新更新，请访问",
-  "please_visit": "请访问",
-  "docs": "文档",
-  "full_changelog": "完整更新日志",
-  "support": "支持",
-  "discord": "Discord",
-  "powered_by_plane_pages": "由 Plane Pages 提供支持",
-  "please_select_at_least_one_invitation": "请至少选择一个邀请。",
-  "please_select_at_least_one_invitation_description": "请至少选择一个邀请以加入工作区。",
-  "we_see_that_someone_has_invited_you_to_join_a_workspace": "我们发现有人邀请您加入一个工作区",
-  "join_a_workspace": "加入工作区",
-  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "我们发现有人邀请您加入一个工作区",
-  "join_a_workspace_description": "加入工作区",
-  "accept_and_join": "接受并加入",
-  "go_home": "返回首页",
-  "no_pending_invites": "没有待处理的邀请",
-  "you_can_see_here_if_someone_invites_you_to_a_workspace": "如果有人邀请您加入工作区，您可以在此处查看",
-  "back_to_home": "返回首页",
-  "workspace_name": "工作区名称",
-  "deactivate_your_account": "停用您的账户",
-  "deactivate_your_account_description": "停用后，您将无法再分配问题，工作区的计费也将停止。要重新激活账户，您需要使用此电子邮件地址收到工作区邀请。",
-  "deactivating": "正在停用",
-  "confirm": "确认",
-  "draft_created": "草稿已创建",
-  "issue_created_successfully": "问题已成功创建",
-  "draft_creation_failed": "草稿创建失败",
-  "issue_creation_failed": "问题创建失败",
-  "draft_issue": "草稿问题",
-  "issue_updated_successfully": "问题已成功更新",
-  "issue_could_not_be_updated": "无法更新问题",
-  "create_a_draft": "创建草稿",
-  "save_to_drafts": "保存为草稿",
-  "save": "保存",
-  "updating": "正在更新",
-  "create_new_issue": "创建新问题",
-  "editor_is_not_ready_to_discard_changes": "编辑器尚未准备好丢弃更改",
-  "failed_to_move_issue_to_project": "无法将问题移动到项目",
-  "create_more": "创建更多",
-  "add_to_project": "添加到项目",
-  "discard": "丢弃",
-  "duplicate_issue_found": "发现重复问题",
-  "duplicate_issues_found": "发现重复问题",
-  "no_matching_results": "没有匹配的结果",
-  "title_is_required": "标题为必填项",
-  "title": "标题",
-  "state": "状态",
-  "priority": "优先级",
-  "none": "无",
-  "urgent": "紧急",
-  "high": "高",
-  "medium": "中",
-  "low": "低",
-  "members": "成员",
-  "assignee": "分配人",
-  "assignees": "分配人",
-  "you": "您",
-  "labels": "标签",
-  "create_new_label": "创建新标签",
-  "start_date": "开始日期",
-  "due_date": "截止日期",
-  "cycle": "周期",
-  "estimate": "估算",
-  "change_parent_issue": "更改父问题",
-  "remove_parent_issue": "移除父问题",
-  "add_parent": "添加父问题",
-  "loading_members": "正在加载成员...",
-  "inbox": "收件箱"
-}
@@ -1,202 +0,0 @@
-import IntlMessageFormat from "intl-messageformat";
-import get from "lodash/get";
-import { makeAutoObservable } from "mobx";
-// constants
-import { FALLBACK_LANGUAGE, SUPPORTED_LANGUAGES, STORAGE_KEY } from "../constants";
-// types
-import { TLanguage, ILanguageOption, ITranslations } from "../types";
-
-/**
- * Mobx store class for handling translations and language changes in the application
- * Provides methods to translate keys with params and change the language
- * Uses IntlMessageFormat to format the translations
- */
-export class TranslationStore {
-  // List of translations for each language
-  private translations: ITranslations = {};
-  // Cache for IntlMessageFormat instances
-  private messageCache: Map<string, IntlMessageFormat> = new Map();
-  // Current language
-  currentLocale: TLanguage = FALLBACK_LANGUAGE;
-
-  /**
-   * Constructor for the TranslationStore class
-   */
-  constructor() {
-    makeAutoObservable(this);
-    this.initializeLanguage();
-    this.loadTranslations();
-  }
-
-  /**
-   * Loads translations from JSON files and initializes the message cache
-   */
-  private async loadTranslations() {
-    try {
-      // dynamic import of translations
-      const translations = {
-        en: (await import("../locales/en/translations.json")).default,
-        fr: (await import("../locales/fr/translations.json")).default,
-        es: (await import("../locales/es/translations.json")).default,
-        ja: (await import("../locales/ja/translations.json")).default,
-        "zh-CN": (await import("../locales/zh-CN/translations.json")).default,
-      };
-      this.translations = translations;
-      this.messageCache.clear(); // Clear cache when translations change
-    } catch (error) {
-      console.error("Failed to load translations:", error);
-    }
-  }
-
-  /** Initializes the language based on the local storage or browser language */
-  private initializeLanguage() {
-    if (typeof window === "undefined") return;
-
-    const savedLocale = localStorage.getItem(STORAGE_KEY) as TLanguage;
-    if (this.isValidLanguage(savedLocale)) {
-      this.setLanguage(savedLocale);
-      return;
-    }
-
-    const browserLang = this.getBrowserLanguage();
-    this.setLanguage(browserLang);
-  }
-
-  /** Checks if the language is valid based on the supported languages */
-  private isValidLanguage(lang: string | null): lang is TLanguage {
-    return lang !== null && this.availableLanguages.some((l) => l.value === lang);
-  }
-
-  /** Checks if a language code is similar to any supported language */
-  private findSimilarLanguage(lang: string): TLanguage | null {
-    // Convert to lowercase for case-insensitive comparison
-    const normalizedLang = lang.toLowerCase();
-
-    // Find a supported language that includes or is included in the browser language
-    const similarLang = this.availableLanguages.find(
-      (l) => normalizedLang.includes(l.value.toLowerCase()) || l.value.toLowerCase().includes(normalizedLang)
-    );
-
-    return similarLang ? similarLang.value : null;
-  }
-
-  /** Gets the browser language based on the navigator.language */
-  private getBrowserLanguage(): TLanguage {
-    const browserLang = navigator.language;
-
-    // Check exact match first
-    if (this.isValidLanguage(browserLang)) {
-      return browserLang;
-    }
-
-    // Check base language without region code
-    const baseLang = browserLang.split("-")[0];
-    if (this.isValidLanguage(baseLang)) {
-      return baseLang as TLanguage;
-    }
-
-    // Try to find a similar language
-    const similarLang = this.findSimilarLanguage(browserLang) || this.findSimilarLanguage(baseLang);
-
-    return similarLang || FALLBACK_LANGUAGE;
-  }
-
-  /**
-   * Gets the cache key for the given key and locale
-   * @param key - the key to get the cache key for
-   * @param locale - the locale to get the cache key for
-   * @returns the cache key for the given key and locale
-   */
-  private getCacheKey(key: string, locale: TLanguage): string {
-    return `${locale}:${key}`;
-  }
-
-  /**
-   * Gets the IntlMessageFormat instance for the given key and locale
-   * Returns cached instance if available
-   * Throws an error if the key is not found in the translations
-   */
-  private getMessageInstance(key: string, locale: TLanguage): IntlMessageFormat | null {
-    const cacheKey = this.getCacheKey(key, locale);
-
-    // Check if the cache already has the key
-    if (this.messageCache.has(cacheKey)) {
-      return this.messageCache.get(cacheKey) || null;
-    }
-
-    // Get the message from the translations
-    const message = get(this.translations[locale], key);
-    if (!message) return null;
-
-    try {
-      const formatter = new IntlMessageFormat(message as any, locale);
-      this.messageCache.set(cacheKey, formatter);
-      return formatter;
-    } catch (error) {
-      console.error(`Failed to create message formatter for key "${key}":`, error);
-      return null;
-    }
-  }
-
-  /**
-   * Translates a key with params using the current locale
-   * Falls back to the default language if the translation is not found
-   * Returns the key itself if the translation is not found
-   * @param key - The key to translate
-   * @param params - The params to format the translation with
-   * @returns The translated string
-   */
-  t(key: string, params?: Record<string, any>): string {
-    try {
-      // Try current locale
-      let formatter = this.getMessageInstance(key, this.currentLocale);
-
-      // Fallback to default language if necessary
-      if (!formatter && this.currentLocale !== FALLBACK_LANGUAGE) {
-        formatter = this.getMessageInstance(key, FALLBACK_LANGUAGE);
-      }
-
-      // If we have a formatter, use it
-      if (formatter) {
-        return formatter.format(params || {}) as string;
-      }
-
-      // Last resort: return the key itself
-      return key;
-    } catch (error) {
-      console.error(`Translation error for key "${key}":`, error);
-      return key;
-    }
-  }
-
-  /**
-   * Sets the current language and updates the translations
-   * @param lng - The new language
-   */
-  setLanguage(lng: TLanguage): void {
-    try {
-      if (!this.isValidLanguage(lng)) {
-        throw new Error(`Invalid language: ${lng}`);
-      }
-
-      if (typeof window !== "undefined") {
-        localStorage.setItem(STORAGE_KEY, lng);
-      }
-      this.currentLocale = lng;
-      this.messageCache.clear(); // Clear cache when language changes
-      if (typeof window !== "undefined") {
-        document.documentElement.lang = lng;
-      }
-    } catch (error) {
-      console.error("Failed to set language:", error);
-    }
-  }
-
-  /**
-   * Gets the available language options for the dropdown
-   * @returns An array of language options
-   */
-  get availableLanguages(): ILanguageOption[] {
-    return SUPPORTED_LANGUAGES;
-  }
-}
@@ -1,2 +0,0 @@
-export * from "./language";
-export * from "./translation";
@@ -1,6 +0,0 @@
-export type TLanguage = "en" | "fr" | "es" | "ja" | "zh-CN";
-
-export interface ILanguageOption {
-  label: string;
-  value: TLanguage;
-}
@@ -1,7 +0,0 @@
-export interface ITranslation {
-  [key: string]: string | ITranslation;
-}
-
-export interface ITranslations {
-  [locale: string]: ITranslation;
-}
@@ -0,0 +1,6 @@
+.next
+.vercel
+.tubro
+out/
+dis/
+build/
@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
@@ -15,13 +15,21 @@
    "typescript": "^5.3.3"
  },
  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-aspect-ratio": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-popover": "^1.1.4",
    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.469.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.0",
    "tailwindcss-animate": "^1.0.7"
  }
 }
@@ -0,0 +1 @@
+export {};
@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@plane/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@plane/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+  )
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  )
+);
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };
@@ -0,0 +1,7 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };
@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "@plane/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@plane/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
@@ -0,0 +1,90 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@plane/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  )
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)} {...props}>
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
@@ -1,6 +1,6 @@
+import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";

 import { cn } from "@plane/utils";

@@ -9,14 +9,10 @@ const buttonVariants = cva(
  {
    variants: {
      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
@@ -43,13 +39,7 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
  }
 );
 Button.displayName = "Button";
@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import { cn } from "@plane/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  )
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@plane/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
@@ -0,0 +1,182 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@plane/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+);
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@plane/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@plane/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
@@ -10,7 +10,7 @@
    "postcss": "^8.4.38",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^3.2.7",
    "tailwindcss-animate": "^1.0.6"
  }
 }
@@ -25,6 +25,10 @@ module.exports = {
  },
  theme: {
    extend: {
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
      boxShadow: {
        "custom-shadow-2xs": "var(--color-shadow-2xs)",
        "custom-shadow-xs": "var(--color-shadow-xs)",
@@ -261,6 +265,14 @@ module.exports = {
          from: { left: "-100%" },
          to: { left: "100%" },
        },
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
      },
      typography: () => ({
        brand: {
@@ -104,7 +104,6 @@ export interface ICycle extends TProgressSnapshot {
  project_detail: IProjectDetails;
  progress: any[];
  version: number;
-  pending_issues: number;
 }

 export interface CycleIssueResponse {
@@ -121,7 +120,9 @@ export interface CycleIssueResponse {
  sub_issues_count: number;
 }

-export type SelectCycleType = (ICycle & { actionType: "edit" | "delete" | "create-issue" }) | undefined;
+export type SelectCycleType =
+  | (ICycle & { actionType: "edit" | "delete" | "create-issue" })
+  | undefined;

 export type CycleDateCheckData = {
  start_date: string;
@@ -1,7 +1,7 @@
 import { TLogoProps } from "./common";
 import { TIssuePriorities } from "./issues";

-export type TRecentActivityFilterKeys = "all item" | "issue" | "page" | "project" | "workspace_page";
+export type TRecentActivityFilterKeys = "all item" | "issue" | "page" | "project";
 export type THomeWidgetKeys = "quick_links" | "recents" | "my_stickies" | "quick_tutorial" | "new_at_plane";

 export type THomeWidgetProps = {
@@ -12,9 +12,9 @@ export type TPageEntityData = {
  id: string;
  name: string;
  logo_props: TLogoProps;
-  project_id?: string;
+  project_id: string;
  owned_by: string;
-  project_identifier?: string;
+  project_identifier: string;
 };

 export type TProjectEntityData = {
@@ -39,7 +39,7 @@ export type TIssueEntityData = {

 export type TActivityEntityData = {
  id: string;
-  entity_name: "page" | "project" | "issue" | "workspace_page";
+  entity_name: "page" | "project" | "issue";
  entity_identifier: string;
  visited_at: string;
  entity_data: TPageEntityData | TProjectEntityData | TIssueEntityData;
@@ -1,16 +1,8 @@
-import { TLogoProps } from "./common";
-
 export type TSticky = {
-  created_at?: string | undefined;
-  created_by?: string | undefined;
-  background_color?: string | null | undefined;
-  description?: object | undefined;
-  description_html?: string | undefined;
  id: string;
-  logo_props: TLogoProps | undefined;
  name?: string;
-  sort_order: number | undefined;
-  updated_at?: string | undefined;
-  updated_by?: string | undefined;
-  workspace: string | undefined;
+  description_html?: string;
+  color?: string;
+  createdAt?: Date;
+  updatedAt?: Date;
 };
@@ -69,6 +69,7 @@
    "postcss-cli": "^11.0.0",
    "postcss-nested": "^6.0.1",
    "storybook": "^8.1.1",
+    "tailwindcss": "^3.4.3",
    "tsup": "^7.2.0",
    "typescript": "5.3.3"
  },
@@ -300,53 +300,6 @@
    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
  }
-
-  /* stickies and editor colors */
-  :root {
-    /* text colors */
-    --editor-colors-gray-text: #5c5e63;
-    --editor-colors-peach-text: #ff5b59;
-    --editor-colors-pink-text: #f65385;
-    --editor-colors-orange-text: #fd9038;
-    --editor-colors-green-text: #0fc27b;
-    --editor-colors-light-blue-text: #17bee9;
-    --editor-colors-dark-blue-text: #266df0;
-    --editor-colors-purple-text: #9162f9;
-    /* end text colors */
-
-    /* background colors */
-    --editor-colors-gray-background: #d6d6d8;
-    --editor-colors-peach-background: #ffd5d7;
-    --editor-colors-pink-background: #fdd4e3;
-    --editor-colors-orange-background: #ffe3cd;
-    --editor-colors-green-background: #c3f0de;
-    --editor-colors-light-blue-background: #c5eff9;
-    --editor-colors-dark-blue-background: #c9dafb;
-    --editor-colors-purple-background: #e3d8fd;
-    /* end background colors */
-  }
-  /* background colors */
-  [data-theme*="light"] {
-    --editor-colors-gray-background: #d6d6d8;
-    --editor-colors-peach-background: #ffd5d7;
-    --editor-colors-pink-background: #fdd4e3;
-    --editor-colors-orange-background: #ffe3cd;
-    --editor-colors-green-background: #c3f0de;
-    --editor-colors-light-blue-background: #c5eff9;
-    --editor-colors-dark-blue-background: #c9dafb;
-    --editor-colors-purple-background: #e3d8fd;
-  }
-  [data-theme*="dark"] {
-    --editor-colors-gray-background: #404144;
-    --editor-colors-peach-background: #593032;
-    --editor-colors-pink-background: #562e3d;
-    --editor-colors-orange-background: #583e2a;
-    --editor-colors-green-background: #1d4a3b;
-    --editor-colors-light-blue-background: #1f495c;
-    --editor-colors-dark-blue-background: #223558;
-    --editor-colors-purple-background: #3d325a;
-  }
-  /* end background colors */
 }

 * {
@@ -402,6 +355,7 @@ body {
  -webkit-background-clip: text;
 }

+
@-moz-document url-prefix() {
  * {
    scrollbar-width: none;
@@ -1,6 +1,6 @@
 "use client";

-import { useCallback, useRef } from "react";
+import { useCallback } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -15,11 +15,11 @@ import { Breadcrumbs, Button, CustomMenu, Tooltip, Header } from "@plane/ui";
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
-import { ViewQuickActions } from "@/components/views";
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
 import { EViewAccess } from "@/constants/views";
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
+import { getPublishViewLink } from "@/helpers/project-views.helpers";
 import { truncateText } from "@/helpers/string.helper";
 // hooks
 import {
@@ -38,8 +38,6 @@ import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";

 export const ProjectViewIssuesHeader: React.FC = observer(() => {
-  // refs
-  const parentRef = useRef(null);
  // router
  const { workspaceSlug, projectId, viewId } = useParams();
  // store hooks
@@ -135,8 +133,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
    EUserPermissionsLevel.PROJECT
  );
-
-  if (!viewDetails) return;
+  const publishLink = getPublishViewLink(viewDetails?.anchor);

  return (
    <Header>
@@ -206,14 +203,19 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
          <></>
        )}

-        <div className="hidden md:block">
-          <ViewQuickActions
-            parentRef={parentRef}
-            projectId={projectId.toString()}
-            view={viewDetails}
-            workspaceSlug={workspaceSlug.toString()}
-          />
-        </div>
+        {viewDetails?.anchor && publishLink ? (
+          <a
+            href={publishLink}
+            className="px-3 py-1.5 bg-green-500/20 text-green-500 rounded text-xs font-medium flex items-center gap-1.5"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
+            Live
+          </a>
+        ) : (
+          <></>
+        )}
      </Header.LeftItem>
      <Header.RightItem>
        {!viewDetails?.is_locked ? (
@@ -244,7 +246,6 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
                layoutDisplayFiltersOptions={
                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
                }
-                projectId={projectId.toString()}
                labels={projectLabels}
                memberIds={projectMemberIds ?? undefined}
                states={projectStates}
@@ -1,59 +0,0 @@
-"use client";
-
-import { observer } from "mobx-react";
-// ui
-import { useParams } from "next/navigation";
-import { Breadcrumbs, Button, Header, RecentStickyIcon } from "@plane/ui";
-// components
-import { BreadcrumbLink } from "@/components/common";
-
-// hooks
-import { StickySearch } from "@/components/stickies/modal/search";
-import { useStickyOperations } from "@/components/stickies/sticky/use-operations";
-// plane-web
-import { useSticky } from "@/hooks/use-stickies";
-
-export const WorkspaceStickyHeader = observer(() => {
-  const { workspaceSlug } = useParams();
-  // hooks
-  const { creatingSticky, toggleShowNewSticky } = useSticky();
-  const { stickyOperations } = useStickyOperations({ workspaceSlug: workspaceSlug?.toString() });
-
-  return (
-    <>
-      <Header>
-        <Header.LeftItem>
-          <div className="flex items-center gap-2.5">
-            <Breadcrumbs>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
-                  <BreadcrumbLink
-                    label={`Stickies`}
-                    icon={<RecentStickyIcon className="size-5 rotate-90 text-custom-text-200" />}
-                  />
-                }
-              />
-            </Breadcrumbs>
-          </div>
-        </Header.LeftItem>
-
-        <Header.RightItem>
-          <StickySearch />
-          <Button
-            variant="primary"
-            size="sm"
-            className="items-center gap-1"
-            onClick={() => {
-              toggleShowNewSticky(true);
-              stickyOperations.create();
-            }}
-            loading={creatingSticky}
-          >
-            Add sticky
-          </Button>
-        </Header.RightItem>
-      </Header>
-    </>
-  );
-});
@@ -1,13 +0,0 @@
-"use client";
-
-import { AppHeader, ContentWrapper } from "@/components/core";
-import { WorkspaceStickyHeader } from "./header";
-
-export default function WorkspaceStickiesLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <AppHeader header={<WorkspaceStickyHeader />} />
-      <ContentWrapper>{children}</ContentWrapper>
-    </>
-  );
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sriram veeraghanta	adb858a294	fix: adding new switch	2025-01-25 18:24:05 +05:30
sriram veeraghanta	b97e4f2f41	fix: ui component library setup	2025-01-20 01:22:59 +05:30