Potential fix for code scanning alert no. 590: URL redirection from remote source

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

CONTRIBUTING.md

@@ -62,17 +62,143 @@ To ensure consistency throughout the source code, please keep these rules in min
 - All features or bug fixes must be tested by one or more specs (unit-tests).
 - We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
 
-## Need help? Questions and suggestions
-
-Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Discord Server](https://discord.com/invite/A92xrEGCge).
-
 ## Ways to contribute
 
 - Try Plane Cloud and the self hosting platform and give feedback
 - Add new integrations
+- Add or update translations
 - Help with open [issues](https://github.com/makeplane/plane/issues) or [create your own](https://github.com/makeplane/plane/issues/new/choose)
 - Share your thoughts and suggestions with us
 - Help create tutorials and blog posts
 - Request a feature by submitting a proposal
 - Report a bug
 - **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations.
+
+## Contributing to language support
+This guide is designed to help contributors understand how to add or update translations in the application. 
+
+### Understanding translation structure
+
+#### File organization
+Translations are organized by language in the locales directory. Each language has its own folder containing JSON files for translations. Here's how it looks:
+
+```
+packages/i18n/src/locales/
+    ├── en/
+    │   ├── core.json       # Critical translations
+    │   └── translations.json
+    ├── fr/
+    │   └── translations.json
+    └── [language]/
+        └── translations.json   
+```
+#### Nested structure
+To keep translations organized, we use a nested structure for keys. This makes it easier to manage and locate specific translations. For example:
+
+```json
+{
+  "issue": {
+    "label": "Work item",
+    "title": {
+      "label": "Work item title"
+    }
+  }
+}
+```
+
+### Translation formatting guide
+We use [IntlMessageFormat](https://formatjs.github.io/docs/intl-messageformat/) to handle dynamic content, such as variables and pluralization. Here's how to format your translations:
+
+#### Examples
+- **Simple variables** 
+    ```json
+    {
+    "greeting": "Hello, {name}!"
+    }
+    ```
+
+- **Pluralization** 
+    ```json
+    {
+    "items": "{count, plural, one {Work item} other {Work items}}"
+    }
+    ```
+
+### Contributing guidelines
+
+#### Updating existing translations
+1. Locate the key in `locales/<language>/translations.json`.
+
+2. Update the value while ensuring the key structure remains intact.
+3. Preserve any existing ICU formats (e.g., variables, pluralization).
+
+#### Adding new translation keys
+1. When introducing a new key, ensure it is added to **all** language files, even if translations are not immediately available. Use English as a placeholder if needed.
+
+2. Keep the nesting structure consistent across all languages.
+
+3. If the new key requires dynamic content (e.g., variables or pluralization), ensure the ICU format is applied uniformly across all languages.
+
+### Adding new languages
+Adding a new language involves several steps to ensure it integrates seamlessly with the project. Follow these instructions carefully:
+
+1. **Update type definitions**  
+Add the new language to the TLanguage type in the language definitions file:
+
+    ```typescript
+    // types/language.ts
+    export type TLanguage = "en" | "fr" | "your-lang";
+    ``` 
+
+2. **Add language configuration**  
+Include the new language in the list of supported languages:
+
+    ```typescript
+    // constants/language.ts
+    export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
+    { label: "English", value: "en" },
+    { label: "Your Language", value: "your-lang" }
+    ];
+    ```
+
+3. **Create translation files**  
+    1.  Create a new folder for your language under locales (e.g., `locales/your-lang/`).
+
+    2. Add a `translations.json` file inside the folder.
+
+    3. Copy the structure from an existing translation file and translate all keys.
+
+4. **Update import logic**  
+Modify the language import logic to include your new language:
+
+    ```typescript
+    private importLanguageFile(language: TLanguage): Promise<any> {
+    switch (language) {
+        case "your-lang":
+        return import("../locales/your-lang/translations.json");
+        // ...
+    }
+    }
+    ```
+
+### Quality checklist
+Before submitting your contribution, please ensure the following:
+
+- All translation keys exist in every language file.
+- Nested structures match across all language files.
+- ICU message formats are correctly implemented.
+- All languages load without errors in the application.
+- Dynamic values and pluralization work as expected.
+- There are no missing or untranslated keys.
+
+#### Pro tips
+- When in doubt, refer to the English translations for context.
+- Verify pluralization works with different numbers.
+- Ensure dynamic values (e.g., `{name}`) are correctly interpolated.
+- Double-check that nested key access paths are accurate.
+
+Happy translating! 🌍✨
+
+## Need help? Questions and suggestions
+
+Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Discord Server](https://discord.com/invite/A92xrEGCge).

admin/app/general/form.tsx

@@ -123,7 +123,7 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
                 No PII is collected.This anonymized data is used to understand how you use Plane and build new features
                 in line with{" "}
                 <a
-                  href="https://docs.plane.so/self-hosting/telemetry"
+                  href="https://developers.plane.so/self-hosting/telemetry"
                   target="_blank"
                   className="text-custom-primary-100 hover:underline"
                   rel="noreferrer"

admin/core/components/instance/setup-form.tsx

@@ -336,7 +336,7 @@ export const InstanceSetupForm: FC = (props) => {
             </label>
             <a
               tabIndex={-1}
-              href="https://docs.plane.so/telemetry"
+              href="https://developers.plane.so/self-hosting/telemetry"
               target="_blank"
               rel="noopener noreferrer"
               className="text-sm font-medium text-blue-500 hover:text-blue-600"

apiserver/plane/api/serializers/issue.py

@@ -1,6 +1,7 @@
 # Django imports
 from django.utils import timezone
 from lxml import html
+from django.db import IntegrityError
 
 #  Third party imports
 from rest_framework import serializers
@@ -138,47 +139,56 @@ class IssueSerializer(BaseSerializer):
         updated_by_id = issue.updated_by_id
 
         if assignees is not None and len(assignees):
-            IssueAssignee.objects.bulk_create(
-                [
-                    IssueAssignee(
-                        assignee_id=assignee_id,
+            try:
+                IssueAssignee.objects.bulk_create(
+                    [
+                        IssueAssignee(
+                            assignee_id=assignee_id,
+                            issue=issue,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for assignee_id in assignees
+                    ],
+                    batch_size=10,
+                )
+            except IntegrityError:
+                pass
+        else:
+            try:
+                # Then assign it to default assignee
+                if default_assignee_id is not None:
+                    IssueAssignee.objects.create(
+                        assignee_id=default_assignee_id,
                         issue=issue,
                         project_id=project_id,
                         workspace_id=workspace_id,
                         created_by_id=created_by_id,
                         updated_by_id=updated_by_id,
                     )
-                    for assignee_id in assignees
-                ],
-                batch_size=10,
-            )
-        else:
-            # Then assign it to default assignee
-            if default_assignee_id is not None:
-                IssueAssignee.objects.create(
-                    assignee_id=default_assignee_id,
-                    issue=issue,
-                    project_id=project_id,
-                    workspace_id=workspace_id,
-                    created_by_id=created_by_id,
-                    updated_by_id=updated_by_id,
-                )
+            except IntegrityError:
+                pass
 
         if labels is not None and len(labels):
-            IssueLabel.objects.bulk_create(
-                [
-                    IssueLabel(
-                        label_id=label_id,
-                        issue=issue,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for label_id in labels
-                ],
-                batch_size=10,
-            )
+            try:
+                IssueLabel.objects.bulk_create(
+                    [
+                        IssueLabel(
+                            label_id=label_id,
+                            issue=issue,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for label_id in labels
+                    ],
+                    batch_size=10,
+                )
+            except IntegrityError:
+                pass
 
         return issue
 
@@ -194,39 +204,45 @@ class IssueSerializer(BaseSerializer):
 
         if assignees is not None:
             IssueAssignee.objects.filter(issue=instance).delete()
-            IssueAssignee.objects.bulk_create(
-                [
-                    IssueAssignee(
-                        assignee_id=assignee_id,
-                        issue=instance,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for assignee_id in assignees
-                ],
-                batch_size=10,
-                ignore_conflicts=True,
-            )
+            try:
+                IssueAssignee.objects.bulk_create(
+                    [
+                        IssueAssignee(
+                            assignee_id=assignee_id,
+                            issue=instance,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for assignee_id in assignees
+                    ],
+                    batch_size=10,
+                    ignore_conflicts=True,
+                )
+            except IntegrityError:
+                pass
 
         if labels is not None:
             IssueLabel.objects.filter(issue=instance).delete()
-            IssueLabel.objects.bulk_create(
-                [
-                    IssueLabel(
-                        label_id=label_id,
-                        issue=instance,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for label_id in labels
-                ],
-                batch_size=10,
-                ignore_conflicts=True,
-            )
+            try:
+                IssueLabel.objects.bulk_create(
+                    [
+                        IssueLabel(
+                            label_id=label_id,
+                            issue=instance,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for label_id in labels
+                    ],
+                    batch_size=10,
+                    ignore_conflicts=True,
+                )
+            except IntegrityError:
+                pass
 
         # Time updation occues even when other related models are updated
         instance.updated_at = timezone.now()

apiserver/plane/app/serializers/issue.py

@@ -2,6 +2,7 @@
 from django.utils import timezone
 from django.core.validators import URLValidator
 from django.core.exceptions import ValidationError
+from django.db import IntegrityError
 
 # Third Party imports
 from rest_framework import serializers
@@ -134,47 +135,56 @@ class IssueCreateSerializer(BaseSerializer):
         updated_by_id = issue.updated_by_id
 
         if assignees is not None and len(assignees):
-            IssueAssignee.objects.bulk_create(
-                [
-                    IssueAssignee(
-                        assignee=user,
-                        issue=issue,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for user in assignees
-                ],
-                batch_size=10,
-            )
+            try:
+                IssueAssignee.objects.bulk_create(
+                    [
+                        IssueAssignee(
+                            assignee=user,
+                            issue=issue,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for user in assignees
+                    ],
+                    batch_size=10,
+                )
+            except IntegrityError:
+                pass
         else:
             # Then assign it to default assignee
             if default_assignee_id is not None:
-                IssueAssignee.objects.create(
-                    assignee_id=default_assignee_id,
-                    issue=issue,
-                    project_id=project_id,
-                    workspace_id=workspace_id,
-                    created_by_id=created_by_id,
-                    updated_by_id=updated_by_id,
-                )
-
-        if labels is not None and len(labels):
-            IssueLabel.objects.bulk_create(
-                [
-                    IssueLabel(
-                        label=label,
+                try:
+                    IssueAssignee.objects.create(
+                        assignee_id=default_assignee_id,
                         issue=issue,
                         project_id=project_id,
                         workspace_id=workspace_id,
                         created_by_id=created_by_id,
                         updated_by_id=updated_by_id,
                     )
-                    for label in labels
-                ],
-                batch_size=10,
-            )
+                except IntegrityError:
+                    pass
+
+        if labels is not None and len(labels):
+            try:
+                IssueLabel.objects.bulk_create(
+                    [
+                        IssueLabel(
+                            label=label,
+                            issue=issue,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for label in labels
+                    ],
+                    batch_size=10,
+                )
+            except IntegrityError:
+                pass
 
         return issue
 
@@ -190,39 +200,45 @@ class IssueCreateSerializer(BaseSerializer):
 
         if assignees is not None:
             IssueAssignee.objects.filter(issue=instance).delete()
-            IssueAssignee.objects.bulk_create(
-                [
-                    IssueAssignee(
-                        assignee=user,
-                        issue=instance,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for user in assignees
-                ],
-                batch_size=10,
-                ignore_conflicts=True,
-            )
+            try:
+                IssueAssignee.objects.bulk_create(
+                    [
+                        IssueAssignee(
+                            assignee=user,
+                            issue=instance,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for user in assignees
+                    ],
+                    batch_size=10,
+                    ignore_conflicts=True,
+                )
+            except IntegrityError:
+                pass
 
         if labels is not None:
             IssueLabel.objects.filter(issue=instance).delete()
-            IssueLabel.objects.bulk_create(
-                [
-                    IssueLabel(
-                        label=label,
-                        issue=instance,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for label in labels
-                ],
-                batch_size=10,
-                ignore_conflicts=True,
-            )
+            try:
+                IssueLabel.objects.bulk_create(
+                    [
+                        IssueLabel(
+                            label=label,
+                            issue=instance,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for label in labels
+                    ],
+                    batch_size=10,
+                    ignore_conflicts=True,
+                )
+            except IntegrityError:
+                pass
 
         # Time updation occues even when other related models are updated
         instance.updated_at = timezone.now()
@@ -506,6 +522,7 @@ class IssueAttachmentLiteSerializer(DynamicBaseSerializer):
             "asset",
             "attributes",
             # "issue_id",
+            "created_by",
             "updated_at",
             "updated_by",
             "asset_url",

apiserver/plane/app/serializers/workspace.py

@@ -59,7 +59,7 @@ class WorkSpaceSerializer(DynamicBaseSerializer):
 class WorkspaceLiteSerializer(BaseSerializer):
     class Meta:
         model = Workspace
-        fields = ["name", "slug", "id"]
+        fields = ["name", "slug", "id", "logo_url"]
         read_only_fields = fields
 
 
@@ -90,9 +90,11 @@ class WorkspaceMemberAdminSerializer(DynamicBaseSerializer):
 
 
 class WorkSpaceMemberInviteSerializer(BaseSerializer):
-    workspace = WorkSpaceSerializer(read_only=True)
-    total_members = serializers.IntegerField(read_only=True)
-    created_by_detail = UserLiteSerializer(read_only=True, source="created_by")
+    workspace = WorkspaceLiteSerializer(read_only=True)
+    invite_link = serializers.SerializerMethodField()
+
+    def get_invite_link(self, obj):
+        return f"/workspace-invitations/?invitation_id={obj.id}&email={obj.email}&slug={obj.workspace.slug}"
 
     class Meta:
         model = WorkspaceMemberInvite
@@ -106,6 +108,7 @@ class WorkSpaceMemberInviteSerializer(BaseSerializer):
             "responded_at",
             "created_at",
             "updated_at",
+            "invite_link",
         ]
 
 
@@ -148,12 +151,12 @@ class WorkspaceUserLinkSerializer(BaseSerializer):
 
     def create(self, validated_data):
         # Filtering the WorkspaceUserLink with the given url to check if the link already exists.
-        
+
         url = validated_data.get("url")
 
         workspace_user_link = WorkspaceUserLink.objects.filter(
-            url=url, 
-            workspace_id=validated_data.get("workspace_id"), 
+            url=url,
+            workspace_id=validated_data.get("workspace_id"),
             owner_id=validated_data.get("owner_id")
         )
 
@@ -170,8 +173,8 @@ class WorkspaceUserLinkSerializer(BaseSerializer):
         url = validated_data.get("url")
 
         workspace_user_link = WorkspaceUserLink.objects.filter(
-                url=url, 
-                workspace_id=instance.workspace_id, 
+                url=url,
+                workspace_id=instance.workspace_id,
                 owner=instance.owner
             )
 

apiserver/plane/app/urls/issue.py

@@ -26,6 +26,8 @@ from plane.app.views import (
     IssueBulkUpdateDateEndpoint,
     IssueVersionEndpoint,
     IssueDescriptionVersionEndpoint,
+    IssueMetaEndpoint,
+    IssueDetailIdentifierEndpoint,
 )
 
 urlpatterns = [
@@ -278,4 +280,14 @@ urlpatterns = [
         IssueDescriptionVersionEndpoint.as_view(),
         name="page-versions",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/meta/",
+        IssueMetaEndpoint.as_view(),
+        name="issue-meta",
+    ),
+    path(
+        "workspaces/<str:slug>/work-items/<str:project_identifier>-<str:issue_identifier>/",
+        IssueDetailIdentifierEndpoint.as_view(),
+        name="issue-detail-identifier",
+    ),
 ]

apiserver/plane/app/views/__init__.py

@@ -116,6 +116,8 @@ from .issue.base import (
     IssuePaginatedViewSet,
     IssueDetailEndpoint,
     IssueBulkUpdateDateEndpoint,
+    IssueMetaEndpoint,
+    IssueDetailIdentifierEndpoint,
 )
 
 from .issue.activity import IssueActivityEndpoint

apiserver/plane/app/views/asset/v2.py

@@ -5,6 +5,7 @@ import uuid
 from django.conf import settings
 from django.http import HttpResponseRedirect
 from django.utils import timezone
+from django.db import IntegrityError
 
 # Third party imports
 from rest_framework import status
@@ -679,15 +680,30 @@ class ProjectBulkAssetEndpoint(BaseAPIView):
             [self.save_project_cover(asset, project_id) for asset in assets]
 
         if asset.entity_type == FileAsset.EntityTypeContext.ISSUE_DESCRIPTION:
-            assets.update(issue_id=entity_id)
+            # For some cases, the bulk api is called after the issue is deleted creating
+            # an integrity error
+            try:
+                assets.update(issue_id=entity_id)
+            except IntegrityError:
+                pass
 
         if asset.entity_type == FileAsset.EntityTypeContext.COMMENT_DESCRIPTION:
-            assets.update(comment_id=entity_id)
+            # For some cases, the bulk api is called after the comment is deleted
+            # creating an integrity error
+            try:
+                assets.update(comment_id=entity_id)
+            except IntegrityError:
+                pass
 
         if asset.entity_type == FileAsset.EntityTypeContext.PAGE_DESCRIPTION:
             assets.update(page_id=entity_id)
 
         if asset.entity_type == FileAsset.EntityTypeContext.DRAFT_ISSUE_DESCRIPTION:
-            assets.update(draft_issue_id=entity_id)
+            # For some cases, the bulk api is called after the draft issue is deleted
+            # creating an integrity error
+            try:
+                assets.update(draft_issue_id=entity_id)
+            except IntegrityError:
+                pass
 
         return Response(status=status.HTTP_204_NO_CONTENT)

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

@@ -1096,3 +1096,178 @@ class IssueBulkUpdateDateEndpoint(BaseAPIView):
         return Response(
             {"message": "Issues updated successfully"}, status=status.HTTP_200_OK
         )
+
+
+class IssueMetaEndpoint(BaseAPIView):
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="PROJECT")
+    def get(self, request, slug, project_id, issue_id):
+        issue = Issue.issue_objects.only("sequence_id", "project__identifier").get(
+            id=issue_id, project_id=project_id, workspace__slug=slug
+        )
+        return Response(
+            {
+                "sequence_id": issue.sequence_id,
+                "project_identifier": issue.project.identifier,
+            },
+            status=status.HTTP_200_OK,
+        )
+
+
+class IssueDetailIdentifierEndpoint(BaseAPIView):
+
+    def get(self, request, slug, project_identifier, issue_identifier):
+        
+        # Fetch the project
+        project = Project.objects.get(
+            identifier__iexact=project_identifier,
+            workspace__slug=slug,
+        )
+
+        # Check if the user is a member of the project
+        if not ProjectMember.objects.filter(
+            workspace__slug=slug,
+            project_id=project.id,
+            member=request.user,
+            is_active=True,
+        ).exists():
+            return Response(
+                {"error": "You are not allowed to view this issue"},
+                status=status.HTTP_403_FORBIDDEN,
+            )
+
+        # Fetch the issue
+        issue = (
+            Issue.issue_objects.filter(project_id=project.id)
+            .filter(workspace__slug=slug)
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels", "issue_module__module")
+            .annotate(
+                cycle_id=Subquery(
+                    CycleIssue.objects.filter(issue=OuterRef("id")).values("cycle_id")[
+                        :1
+                    ]
+                )
+            )
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=FileAsset.objects.filter(
+                    issue_id=OuterRef("id"),
+                    entity_type=FileAsset.EntityTypeContext.ISSUE_ATTACHMENT,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .filter(sequence_id=issue_identifier)
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=Q(
+                            ~Q(labels__id__isnull=True)
+                            & Q(label_issue__deleted_at__isnull=True)
+                        ),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=Q(
+                            ~Q(assignees__id__isnull=True)
+                            & Q(assignees__member_project__is_active=True)
+                            & Q(issue_assignee__deleted_at__isnull=True)
+                        ),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "issue_module__module_id",
+                        distinct=True,
+                        filter=Q(
+                            ~Q(issue_module__module_id__isnull=True)
+                            & Q(issue_module__module__archived_at__isnull=True)
+                            & Q(issue_module__deleted_at__isnull=True)
+                        ),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("issue", "actor"),
+                )
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_link",
+                    queryset=IssueLink.objects.select_related("created_by"),
+                )
+            )
+            .annotate(
+                is_subscribed=Exists(
+                    IssueSubscriber.objects.filter(
+                            workspace__slug=slug,
+                            project_id=project.id,
+                        issue__sequence_id=issue_identifier,
+                        subscriber=request.user,
+                    )
+                )
+            )
+        ).first()
+
+        # Check if the issue exists
+        if not issue:
+            return Response(
+                {"error": "The required object does not exist."},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+
+        """
+        if the role is guest and guest_view_all_features is false and owned by is not 
+        the requesting user then dont show the issue
+        """
+
+        if (
+            ProjectMember.objects.filter(
+                workspace__slug=slug,
+                project_id=project.id,
+                member=request.user,
+                role=5,
+                is_active=True,
+            ).exists()
+            and not project.guest_view_all_features
+            and not issue.created_by == request.user
+        ):
+            return Response(
+                {"error": "You are not allowed to view this issue"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        recent_visited_task.delay(
+            slug=slug,
+            entity_name="issue",
+            entity_identifier=str(issue.id),
+            user_id=str(request.user.id),
+            project_id=str(project.id),
+        )
+
+        # Serialize the issue
+        serializer = IssueDetailSerializer(issue, expand=self.expand)
+        return Response(serializer.data, status=status.HTTP_200_OK)

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

@@ -5,6 +5,7 @@ import json
 from django.utils import timezone
 from django.db.models import Exists
 from django.core.serializers.json import DjangoJSONEncoder
+from django.db import IntegrityError
 
 # Third Party imports
 from rest_framework.response import Response
@@ -164,24 +165,32 @@ class CommentReactionViewSet(BaseViewSet):
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def create(self, request, slug, project_id, comment_id):
-        serializer = CommentReactionSerializer(data=request.data)
-        if serializer.is_valid():
-            serializer.save(
-                project_id=project_id, actor_id=request.user.id, comment_id=comment_id
+        try:
+            serializer = CommentReactionSerializer(data=request.data)
+            if serializer.is_valid():
+                serializer.save(
+                    project_id=project_id,
+                    actor_id=request.user.id,
+                    comment_id=comment_id,
+                )
+                issue_activity.delay(
+                    type="comment_reaction.activity.created",
+                    requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+                    actor_id=str(request.user.id),
+                    issue_id=None,
+                    project_id=str(project_id),
+                    current_instance=None,
+                    epoch=int(timezone.now().timestamp()),
+                    notification=True,
+                    origin=request.META.get("HTTP_ORIGIN"),
+                )
+                return Response(serializer.data, status=status.HTTP_201_CREATED)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except IntegrityError:
+            return Response(
+                {"error": "Reaction already exists for the user"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
-            issue_activity.delay(
-                type="comment_reaction.activity.created",
-                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                actor_id=str(request.user.id),
-                issue_id=None,
-                project_id=str(project_id),
-                current_instance=None,
-                epoch=int(timezone.now().timestamp()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def destroy(self, request, slug, project_id, comment_id, reaction_code):

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

@@ -55,6 +55,20 @@ class LabelViewSet(BaseViewSet):
     @invalidate_cache(path="/api/workspaces/:slug/labels/", url_params=True, user=False)
     @allow_permission([ROLE.ADMIN])
     def partial_update(self, request, *args, **kwargs):
+        # Check if the label name is unique within the project
+        if (
+            "name" in request.data
+            and Label.objects.filter(
+                project_id=kwargs["project_id"], name=request.data["name"]
+            )
+            .exclude(pk=kwargs["pk"])
+            .exists()
+        ):
+            return Response(
+                {"error": "Label with the same name already exists in the project"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        # call the parent method to perform the update
         return super().partial_update(request, *args, **kwargs)
 
     @invalidate_cache(path="/api/workspaces/:slug/labels/", url_params=True, user=False)
@@ -74,7 +88,7 @@ class BulkCreateIssueLabelsEndpoint(BaseAPIView):
                 Label(
                     name=label.get("name", "Migrated"),
                     description=label.get("description", "Migrated Issue"),
-                    color=f"#{random.randint(0, 0xFFFFFF+1):06X}",
+                    color=f"#{random.randint(0, 0xFFFFFF + 1):06X}",
                     project_id=project_id,
                     workspace_id=project.workspace_id,
                     created_by=request.user,

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

@@ -4,6 +4,7 @@ from rest_framework.response import Response
 
 # Django modules
 from django.db.models import Q
+from django.db import IntegrityError
 
 # Module imports
 from plane.app.views.base import BaseAPIView
@@ -31,16 +32,21 @@ class WorkspaceFavoriteEndpoint(BaseAPIView):
 
     @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE")
     def post(self, request, slug):
-        workspace = Workspace.objects.get(slug=slug)
-        serializer = UserFavoriteSerializer(data=request.data)
-        if serializer.is_valid():
-            serializer.save(
-                user_id=request.user.id,
-                workspace=workspace,
-                project_id=request.data.get("project_id", None),
+        try:
+            workspace = Workspace.objects.get(slug=slug)
+            serializer = UserFavoriteSerializer(data=request.data)
+            if serializer.is_valid():
+                serializer.save(
+                    user_id=request.user.id,
+                    workspace=workspace,
+                    project_id=request.data.get("project_id", None),
+                )
+                return Response(serializer.data, status=status.HTTP_200_OK)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except IntegrityError:
+            return Response(
+                {"error": "Favorite already exists"}, status=status.HTTP_400_BAD_REQUEST
             )
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE")
     def patch(self, request, slug, favorite_id):

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

@@ -251,8 +251,7 @@ class UserWorkspaceInvitationsViewSet(BaseViewSet):
             super()
             .get_queryset()
             .filter(email=self.request.user.email)
-            .select_related("workspace", "workspace__owner", "created_by")
-            .annotate(total_members=Count("workspace__workspace_member"))
+            .select_related("workspace")
         )
 
     @invalidate_cache(path="/api/workspaces/", user=False)

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

@@ -30,7 +30,6 @@ class WorkspaceUserPreferenceViewSet(BaseAPIView):
         keys = [
             key
             for key, _ in WorkspaceUserPreference.UserPreferenceKeys.choices
-            if key not in ["projects"]
         ]
 
         for preference in keys:
@@ -40,20 +39,28 @@ class WorkspaceUserPreferenceViewSet(BaseAPIView):
                 preference = WorkspaceUserPreference.objects.bulk_create(
                     [
                         WorkspaceUserPreference(
-                            key=key, user=request.user, workspace=workspace
+                            key=key, user=request.user, workspace=workspace, sort_order=(65535 + (i*10000))
                         )
-                        for key in create_preference_keys
+                        for i, key in enumerate(create_preference_keys)
                     ],
                     batch_size=10,
                     ignore_conflicts=True,
                 )
 
-        preference = WorkspaceUserPreference.objects.filter(
+        preferences = WorkspaceUserPreference.objects.filter(
             user=request.user, workspace_id=workspace.id
-        )
+        ).order_by("sort_order").values("key", "is_pinned", "sort_order")
 
+
+        user_preferences = {}
+
+        for preference in preferences:
+            user_preferences[(str(preference["key"]))] = {
+                "is_pinned": preference["is_pinned"],
+                "sort_order": preference["sort_order"],
+        }
         return Response(
-            preference.values("key", "is_pinned", "sort_order"),
+            user_preferences,
             status=status.HTTP_200_OK,
         )
 

apiserver/plane/bgtasks/issue_activities_task.py

@@ -790,14 +790,15 @@ def create_cycle_issue_activity(
                 issue_id=updated_record.get("issue_id"),
                 actor_id=actor_id,
                 verb="updated",
-                old_value=old_cycle.name,
-                new_value=new_cycle.name,
+                old_value=old_cycle.name if old_cycle else "",
+                new_value=new_cycle.name if new_cycle else "",
                 field="cycles",
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"updated cycle from {old_cycle.name} to {new_cycle.name}",
-                old_identifier=old_cycle.id,
-                new_identifier=new_cycle.id,
+                comment=f"""updated cycle from {old_cycle.name if old_cycle else ""}
+                to {new_cycle.name if new_cycle else ""}""",
+                old_identifier=old_cycle.id if old_cycle else None,
+                new_identifier=new_cycle.id if new_cycle else None,
                 epoch=epoch,
             )
         )
@@ -893,11 +894,11 @@ def create_module_issue_activity(
             actor_id=actor_id,
             verb="created",
             old_value="",
-            new_value=module.name,
+            new_value=module.name if module else "",
             field="modules",
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"added module {module.name}",
+            comment=f"added module {module.name if module else ''}",
             new_identifier=requested_data.get("module_id"),
             epoch=epoch,
         )
@@ -1413,7 +1414,7 @@ def delete_issue_relation_activity(
             ),
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f'deleted {requested_data.get("relation_type")} relation',
+            comment=f"deleted {requested_data.get('relation_type')} relation",
             old_identifier=requested_data.get("related_issue"),
             epoch=epoch,
         )

apiserver/plane/bgtasks/recent_visited_task.py

@@ -1,5 +1,6 @@
 # Python imports
 from django.utils import timezone
+from django.db import DatabaseError
 
 # Third party imports
 from celery import shared_task
@@ -22,8 +23,12 @@ def recent_visited_task(entity_name, entity_identifier, user_id, project_id, slu
         ).first()
 
         if recent_visited:
-            recent_visited.visited_at = timezone.now()
-            recent_visited.save(update_fields=["visited_at"])
+            # Check if the database is available
+            try:
+                recent_visited.visited_at = timezone.now()
+                recent_visited.save(update_fields=["visited_at"])
+            except DatabaseError:
+                pass
         else:
             recent_visited_count = UserRecentVisit.objects.filter(
                 user_id=user_id, workspace_id=workspace.id

apiserver/plane/db/models/workspace.py

@@ -391,13 +391,13 @@ class WorkspaceHomePreference(BaseModel):
 class WorkspaceUserPreference(BaseModel):
     """Preference for the workspace for a user"""
 
-    class UserPreferenceKeys(models.TextChoices):
-        PROJECTS = "projects", "Projects"
-        ANALYTICS = "analytics", "Analytics"
-        CYCLES = "cycles", "Cycles"
+    class UserPreferenceKeys(models.TextChoices):        
         VIEWS = "views", "Views"
+        ACTIVE_CYCLES = "active_cycles", "Active Cycles"
+        ANALYTICS = "analytics", "Analytics"
+        DRAFTS = "drafts", "Drafts"
         YOUR_WORK = "your_work", "Your Work"
-
+        ARCHIVES = "archives", "Archives"
 
     workspace = models.ForeignKey(
         "db.Workspace",

apiserver/plane/license/api/views/admin.py

@@ -11,6 +11,7 @@ from django.core.exceptions import ValidationError
 from django.utils import timezone
 from django.contrib.auth.hashers import make_password
 from django.contrib.auth import logout
+from django.utils.http import url_has_allowed_host_and_scheme
 
 # Third party imports
 from rest_framework.response import Response
@@ -248,11 +249,12 @@ class InstanceAdminSignInEndpoint(View):
                 error_code=AUTHENTICATION_ERROR_CODES["INSTANCE_NOT_CONFIGURED"],
                 error_message="INSTANCE_NOT_CONFIGURED",
             )
-            url = urljoin(
-                base_host(request=request, is_admin=True),
-                "?" + urlencode(exc.get_error_dict()),
-            )
-            return HttpResponseRedirect(url)
+            base_url = base_host(request=request, is_admin=True)
+            redirect_url = urljoin(base_url, "?" + urlencode(exc.get_error_dict()))
+            if url_has_allowed_host_and_scheme(redirect_url, allowed_hosts=None):
+                return HttpResponseRedirect(redirect_url)
+            else:
+                return HttpResponseRedirect('/')
 
         # Get email and password
         email = request.POST.get("email", False)
@@ -265,11 +267,12 @@ class InstanceAdminSignInEndpoint(View):
                 error_message="REQUIRED_ADMIN_EMAIL_PASSWORD",
                 payload={"email": email},
             )
-            url = urljoin(
-                base_host(request=request, is_admin=True),
-                "?" + urlencode(exc.get_error_dict()),
-            )
-            return HttpResponseRedirect(url)
+            base_url = base_host(request=request, is_admin=True)
+            redirect_url = urljoin(base_url, "?" + urlencode(exc.get_error_dict()))
+            if url_has_allowed_host_and_scheme(redirect_url, allowed_hosts=None):
+                return HttpResponseRedirect(redirect_url)
+            else:
+                return HttpResponseRedirect('/')
 
         # Validate the email
         email = email.strip().lower()
@@ -281,11 +284,12 @@ class InstanceAdminSignInEndpoint(View):
                 error_message="INVALID_ADMIN_EMAIL",
                 payload={"email": email},
             )
-            url = urljoin(
-                base_host(request=request, is_admin=True),
-                "?" + urlencode(exc.get_error_dict()),
-            )
-            return HttpResponseRedirect(url)
+            base_url = base_host(request=request, is_admin=True)
+            redirect_url = urljoin(base_url, "?" + urlencode(exc.get_error_dict()))
+            if url_has_allowed_host_and_scheme(redirect_url, allowed_hosts=None):
+                return HttpResponseRedirect(redirect_url)
+            else:
+                return HttpResponseRedirect('/')
 
         # Fetch the user
         user = User.objects.filter(email=email).first()
@@ -297,11 +301,12 @@ class InstanceAdminSignInEndpoint(View):
                 error_message="ADMIN_USER_DOES_NOT_EXIST",
                 payload={"email": email},
             )
-            url = urljoin(
-                base_host(request=request, is_admin=True),
-                "?" + urlencode(exc.get_error_dict()),
-            )
-            return HttpResponseRedirect(url)
+            base_url = base_host(request=request, is_admin=True)
+            redirect_url = urljoin(base_url, "?" + urlencode(exc.get_error_dict()))
+            if url_has_allowed_host_and_scheme(redirect_url, allowed_hosts=None):
+                return HttpResponseRedirect(redirect_url)
+            else:
+                return HttpResponseRedirect('/')
 
         # is_active
         if not user.is_active:
@@ -309,11 +314,12 @@ class InstanceAdminSignInEndpoint(View):
                 error_code=AUTHENTICATION_ERROR_CODES["ADMIN_USER_DEACTIVATED"],
                 error_message="ADMIN_USER_DEACTIVATED",
             )
-            url = urljoin(
-                base_host(request=request, is_admin=True),
-                "?" + urlencode(exc.get_error_dict()),
-            )
-            return HttpResponseRedirect(url)
+            base_url = base_host(request=request, is_admin=True)
+            redirect_url = urljoin(base_url, "?" + urlencode(exc.get_error_dict()))
+            if url_has_allowed_host_and_scheme(redirect_url, allowed_hosts=None):
+                return HttpResponseRedirect(redirect_url)
+            else:
+                return HttpResponseRedirect('/')
 
         # Check password of the user
         if not user.check_password(password):

apiserver/plane/space/views/meta.py

@@ -14,9 +14,9 @@ class ProjectMetaDataEndpoint(BaseAPIView):
 
     def get(self, request, anchor):
         try:
-            deploy_board = DeployBoard.objects.filter(
+            deploy_board = DeployBoard.objects.get(
                 anchor=anchor, entity_name="project"
-            ).first()
+            )
         except DeployBoard.DoesNotExist:
             return Response(
                 {"error": "Project is not published"}, status=status.HTTP_404_NOT_FOUND

package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "prettier": "latest",
     "prettier-plugin-tailwindcss": "^0.5.4",
-    "turbo": "^2.4.1"
+    "turbo": "^2.4.2"
   },
   "resolutions": {
     "nanoid": "3.3.8",

packages/constants/src/workspace.ts

@@ -84,48 +84,42 @@ export const WORKSPACE_SETTINGS = {
     i18n_label: "workspace_settings.settings.general.title",
     href: `/settings`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
   },
   members: {
     key: "members",
     i18n_label: "workspace_settings.settings.members.title",
     href: `/settings/members`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/members/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
   },
   "billing-and-plans": {
     key: "billing-and-plans",
     i18n_label: "workspace_settings.settings.billing_and_plans.title",
     href: `/settings/billing`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/billing/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing/`,
   },
   export: {
     key: "export",
     i18n_label: "workspace_settings.settings.exports.title",
     href: `/settings/exports`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/exports/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports/`,
   },
   webhooks: {
     key: "webhooks",
     i18n_label: "workspace_settings.settings.webhooks.title",
     href: `/settings/webhooks`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/webhooks/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks/`,
   },
   "api-tokens": {
     key: "api-tokens",
     i18n_label: "workspace_settings.settings.api_tokens.title",
     href: `/settings/api-tokens`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/api-tokens/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/api-tokens/`,
   },
 };
 
@@ -256,3 +250,77 @@ export const DEFAULT_GLOBAL_VIEWS_LIST: {
     i18n_label: "default_global_view.subscribed",
   },
 ];
+
+export interface IWorkspaceSidebarNavigationItem {
+  key: string;
+  labelTranslationKey: string;
+  href: string;
+  access: EUserWorkspaceRoles[];
+}
+
+export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspaceSidebarNavigationItem> = {
+  "your-work": {
+    key: "your_work",
+    labelTranslationKey: "your_work",
+    href: `/profile/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+  views: {
+    key: "views",
+    labelTranslationKey: "views",
+    href: `/workspace-views/all-issues/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+  },
+  analytics: {
+    key: "analytics",
+    labelTranslationKey: "analytics",
+    href: `/analytics/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+  drafts: {
+    key: "drafts",
+    labelTranslationKey: "drafts",
+    href: `/drafts/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+  archives: {
+    key: "archives",
+    labelTranslationKey: "archives",
+    href: `/projects/archives/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+};
+export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["views"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["analytics"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["your-work"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["drafts"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["archives"],
+];
+
+export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspaceSidebarNavigationItem> = {
+  home: {
+    key: "home",
+    labelTranslationKey: "home.title",
+    href: `/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+  },
+  inbox: {
+    key: "inbox",
+    labelTranslationKey: "notification.label",
+    href: `/notifications/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+  },
+  projects: {
+    key: "projects",
+    labelTranslationKey: "projects",
+    href: `/projects/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+  },
+};
+
+export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["home"],
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["inbox"],
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"],
+];

packages/editor/src/core/components/editors/document/collaborative-editor.tsx

@@ -1,3 +1,4 @@
+import { Extensions } from "@tiptap/core";
 import React from "react";
 // components
 import { DocumentContentLoader, PageRenderer } from "@/components/editors";
@@ -35,7 +36,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     user,
   } = props;
 
-  const extensions = [];
+  const extensions: Extensions = [];
   if (embedHandler?.issue) {
     extensions.push(
       IssueWidget({

packages/editor/src/core/components/editors/document/read-only-editor.tsx

@@ -1,3 +1,4 @@
+import { Extensions } from "@tiptap/core";
 import { forwardRef, MutableRefObject } from "react";
 // components
 import { PageRenderer } from "@/components/editors";
@@ -10,7 +11,13 @@ import { getEditorClassNames } from "@/helpers/common";
 // hooks
 import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
 // types
-import { EditorReadOnlyRefApi, TDisplayConfig, TExtensions, TFileHandler, TReadOnlyMentionHandler } from "@/types";
+import {
+  EditorReadOnlyRefApi,
+  TDisplayConfig,
+  TExtensions,
+  TReadOnlyFileHandler,
+  TReadOnlyMentionHandler,
+} from "@/types";
 
 interface IDocumentReadOnlyEditor {
   disabledExtensions: TExtensions[];
@@ -20,7 +27,7 @@ interface IDocumentReadOnlyEditor {
   displayConfig?: TDisplayConfig;
   editorClassName?: string;
   embedHandler: any;
-  fileHandler: Pick<TFileHandler, "getAssetSrc">;
+  fileHandler: TReadOnlyFileHandler;
   tabIndex?: number;
   handleEditorReady?: (value: boolean) => void;
   mentionHandler: TReadOnlyMentionHandler;
@@ -41,7 +48,7 @@ const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
     initialValue,
     mentionHandler,
   } = props;
-  const extensions = [];
+  const extensions: Extensions = [];
   if (embedHandler?.issue) {
     extensions.push(
       IssueWidget({

packages/editor/src/core/components/menus/ai-menu.tsx

@@ -23,6 +23,7 @@ export const AIFeaturesMenu: React.FC<Props> = (props) => {
     menuRef.current.remove();
     menuRef.current.style.visibility = "visible";
 
+    // @ts-expect-error - Tippy types are incorrect
     popup.current = tippy(document.body, {
       getReferenceClientRect: null,
       content: menuRef.current,

packages/editor/src/core/components/menus/block-menu.tsx

@@ -34,6 +34,7 @@ export const BlockMenu = (props: BlockMenuProps) => {
       menuRef.current.remove();
       menuRef.current.style.visibility = "visible";
 
+      // @ts-expect-error - Tippy types are incorrect
       popup.current = tippy(document.body, {
         getReferenceClientRect: null,
         content: menuRef.current,

packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx

@@ -6,15 +6,15 @@ import { cn } from "@plane/utils";
 import { TextAlignItem } from "@/components/menus";
 // types
 import { TEditorCommands } from "@/types";
+import { EditorStateType } from "./root";
 
 type Props = {
   editor: Editor;
-  onClose: () => void;
+  editorState: EditorStateType;
 };
 
 export const TextAlignmentSelector: React.FC<Props> = (props) => {
-  const { editor, onClose } = props;
-
+  const { editor, editorState } = props;
   const menuItem = TextAlignItem(editor);
 
   const textAlignmentOptions: {
@@ -32,10 +32,7 @@ export const TextAlignmentSelector: React.FC<Props> = (props) => {
         menuItem.command({
           alignment: "left",
         }),
-      isActive: () =>
-        menuItem.isActive({
-          alignment: "left",
-        }),
+      isActive: () => editorState.left,
     },
     {
       itemKey: "text-align",
@@ -45,10 +42,7 @@ export const TextAlignmentSelector: React.FC<Props> = (props) => {
         menuItem.command({
           alignment: "center",
         }),
-      isActive: () =>
-        menuItem.isActive({
-          alignment: "center",
-        }),
+      isActive: () => editorState.center,
     },
     {
       itemKey: "text-align",
@@ -58,10 +52,7 @@ export const TextAlignmentSelector: React.FC<Props> = (props) => {
         menuItem.command({
           alignment: "right",
         }),
-      isActive: () =>
-        menuItem.isActive({
-          alignment: "right",
-        }),
+      isActive: () => editorState.right,
     },
   ];
 
@@ -74,7 +65,6 @@ export const TextAlignmentSelector: React.FC<Props> = (props) => {
           onClick={(e) => {
             e.stopPropagation();
             item.command();
-            onClose();
           }}
           className={cn(
             "size-7 grid place-items-center rounded text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 transition-colors",

packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx

@@ -1,24 +1,26 @@
-import { Dispatch, FC, SetStateAction } from "react";
 import { Editor } from "@tiptap/react";
 import { ALargeSmall, Ban } from "lucide-react";
+import { Dispatch, FC, SetStateAction } from "react";
 // plane utils
 import { cn } from "@plane/utils";
 // constants
 import { COLORS_LIST } from "@/constants/common";
 // helpers
 import { BackgroundColorItem, TextColorItem } from "../menu-items";
+import { EditorStateType } from "./root";
 
 type Props = {
   editor: Editor;
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
+  editorState: EditorStateType;
 };
 
 export const BubbleMenuColorSelector: FC<Props> = (props) => {
-  const { editor, isOpen, setIsOpen } = props;
+  const { editor, isOpen, setIsOpen, editorState } = props;
 
-  const activeTextColor = COLORS_LIST.find((c) => TextColorItem(editor).isActive({ color: c.key }));
-  const activeBackgroundColor = COLORS_LIST.find((c) => BackgroundColorItem(editor).isActive({ color: c.key }));
+  const activeTextColor = editorState.color;
+  const activeBackgroundColor = editorState.backgroundColor;
 
   return (
     <div className="relative h-full">

packages/editor/src/core/components/menus/bubble-menu/root.tsx

@@ -1,9 +1,10 @@
-import { FC, useEffect, useState } from "react";
-import { BubbleMenu, BubbleMenuProps, Editor, isNodeSelection } from "@tiptap/react";
+import { BubbleMenu, BubbleMenuProps, Editor, isNodeSelection, useEditorState } from "@tiptap/react";
+import { FC, useEffect, useState, useRef } from "react";
 // plane utils
 import { cn } from "@plane/utils";
 // components
 import {
+  BackgroundColorItem,
   BoldItem,
   BubbleMenuColorSelector,
   BubbleMenuLinkSelector,
@@ -11,8 +12,12 @@ import {
   CodeItem,
   ItalicItem,
   StrikeThroughItem,
+  TextAlignItem,
+  TextColorItem,
   UnderLineItem,
 } from "@/components/menus";
+// constants
+import { COLORS_LIST } from "@/constants/common";
 // extensions
 import { isCellSelection } from "@/extensions/table/table/utilities/is-cell-selection";
 // local components
@@ -20,16 +25,61 @@ import { TextAlignmentSelector } from "./alignment-selector";
 
 type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
 
-export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
-  // states
+export interface EditorStateType {
+  code: boolean;
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strike: boolean;
+  left: boolean;
+  right: boolean;
+  center: boolean;
+  color: { key: string; label: string; textColor: string; backgroundColor: string } | undefined;
+  backgroundColor:
+    | {
+        key: string;
+        label: string;
+        textColor: string;
+        backgroundColor: string;
+      }
+    | undefined;
+}
+
+export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: { editor: Editor }) => {
+  const menuRef = useRef<HTMLDivElement>(null);
   const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
   const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
   const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
   const [isSelecting, setIsSelecting] = useState(false);
 
-  const basicFormattingOptions = props.editor.isActive("code")
-    ? [CodeItem(props.editor)]
-    : [BoldItem(props.editor), ItalicItem(props.editor), UnderLineItem(props.editor), StrikeThroughItem(props.editor)];
+  const formattingItems = {
+    code: CodeItem(props.editor),
+    bold: BoldItem(props.editor),
+    italic: ItalicItem(props.editor),
+    underline: UnderLineItem(props.editor),
+    strike: StrikeThroughItem(props.editor),
+    textAlign: TextAlignItem(props.editor),
+  };
+
+  const editorState: EditorStateType = useEditorState({
+    editor: props.editor,
+    selector: ({ editor }: { editor: Editor }) => ({
+      code: formattingItems.code.isActive(),
+      bold: formattingItems.bold.isActive(),
+      italic: formattingItems.italic.isActive(),
+      underline: formattingItems.underline.isActive(),
+      strike: formattingItems.strike.isActive(),
+      left: formattingItems.textAlign.isActive({ alignment: "left" }),
+      right: formattingItems.textAlign.isActive({ alignment: "right" }),
+      center: formattingItems.textAlign.isActive({ alignment: "center" }),
+      color: COLORS_LIST.find((c) => TextColorItem(editor).isActive({ color: c.key })),
+      backgroundColor: COLORS_LIST.find((c) => BackgroundColorItem(editor).isActive({ color: c.key })),
+    }),
+  });
+
+  const basicFormattingOptions = editorState.code
+    ? [formattingItems.code]
+    : [formattingItems.bold, formattingItems.italic, formattingItems.underline, formattingItems.strike];
 
   const bubbleMenuProps: EditorBubbleMenuProps = {
     ...props,
@@ -51,6 +101,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
     },
     tippyOptions: {
       moveTransition: "transform 0.15s ease-out",
+      duration: [300, 0],
       onHidden: () => {
         setIsNodeSelectorOpen(false);
         setIsLinkSelectorOpen(false);
@@ -60,7 +111,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
   };
 
   useEffect(() => {
-    function handleMouseDown() {
+    function handleMouseDown(e: MouseEvent) {
+      if (menuRef.current?.contains(e.target as Node)) return;
+
       function handleMouseMove() {
         if (!props.editor.state.selection.empty) {
           setIsSelecting(true);
@@ -70,7 +123,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
 
       function handleMouseUp() {
         setIsSelecting(false);
-
         document.removeEventListener("mousemove", handleMouseMove);
         document.removeEventListener("mouseup", handleMouseUp);
       }
@@ -84,27 +136,28 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
     return () => {
       document.removeEventListener("mousedown", handleMouseDown);
     };
-  }, []);
+  }, [props.editor]);
 
   return (
     <BubbleMenu {...bubbleMenuProps}>
       {!isSelecting && (
-        <div className="flex py-2 divide-x divide-custom-border-200 rounded-lg border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg">
+        <div
+          ref={menuRef}
+          className="flex py-2 divide-x divide-custom-border-200 rounded-lg border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+        >
           <div className="px-2">
-            {!props.editor.isActive("table") && (
-              <BubbleMenuNodeSelector
-                editor={props.editor!}
-                isOpen={isNodeSelectorOpen}
-                setIsOpen={() => {
-                  setIsNodeSelectorOpen((prev) => !prev);
-                  setIsLinkSelectorOpen(false);
-                  setIsColorSelectorOpen(false);
-                }}
-              />
-            )}
+            <BubbleMenuNodeSelector
+              editor={props.editor!}
+              isOpen={isNodeSelectorOpen}
+              setIsOpen={() => {
+                setIsNodeSelectorOpen((prev) => !prev);
+                setIsLinkSelectorOpen(false);
+                setIsColorSelectorOpen(false);
+              }}
+            />
           </div>
-          <div className="px-2">
-            {!props.editor.isActive("code") && (
+          {!editorState.code && (
+            <div className="px-2">
               <BubbleMenuLinkSelector
                 editor={props.editor}
                 isOpen={isLinkSelectorOpen}
@@ -114,21 +167,22 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
                   setIsColorSelectorOpen(false);
                 }}
               />
-            )}
-          </div>
-          <div className="px-2">
-            {!props.editor.isActive("code") && (
+            </div>
+          )}
+          {!editorState.code && (
+            <div className="px-2">
               <BubbleMenuColorSelector
                 editor={props.editor}
                 isOpen={isColorSelectorOpen}
+                editorState={editorState}
                 setIsOpen={() => {
                   setIsColorSelectorOpen((prev) => !prev);
                   setIsNodeSelectorOpen(false);
                   setIsLinkSelectorOpen(false);
                 }}
               />
-            )}
-          </div>
+            </div>
+          )}
           <div className="flex gap-0.5 px-2">
             {basicFormattingOptions.map((item) => (
               <button
@@ -141,7 +195,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
                 className={cn(
                   "size-7 grid place-items-center rounded text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 transition-colors",
                   {
-                    "bg-custom-background-80 text-custom-text-100": item.isActive(""),
+                    "bg-custom-background-80 text-custom-text-100": editorState[item.key],
                   }
                 )}
               >
@@ -149,15 +203,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
               </button>
             ))}
           </div>
-          <TextAlignmentSelector
-            editor={props.editor}
-            onClose={() => {
-              const editor = props.editor as Editor;
-              if (!editor) return;
-              const pos = editor.state.selection.to;
-              editor.commands.setTextSelection(pos ?? 0);
-            }}
-          />
+          <TextAlignmentSelector editor={props.editor} editorState={editorState} />
         </div>
       )}
     </BubbleMenu>

packages/editor/src/core/components/menus/menu-items.ts

@@ -142,8 +142,8 @@ export const UnderLineItem = (editor: Editor): EditorMenuItem<"underline"> => ({
   icon: UnderlineIcon,
 });
 
-export const StrikeThroughItem = (editor: Editor): EditorMenuItem<"strikethrough"> => ({
-  key: "strikethrough",
+export const StrikeThroughItem = (editor: Editor): EditorMenuItem<"strike"> => ({
+  key: "strike",
   name: "Strikethrough",
   isActive: () => editor?.isActive("strike"),
   command: () => toggleStrike(editor),
@@ -218,24 +218,33 @@ export const HorizontalRuleItem = (editor: Editor) =>
 export const TextColorItem = (editor: Editor): EditorMenuItem<"text-color"> => ({
   key: "text-color",
   name: "Color",
-  isActive: ({ color }) => editor.isActive("customColor", { color }),
-  command: ({ color }) => toggleTextColor(color, editor),
+  isActive: (props) => editor.isActive("customColor", { color: props?.color }),
+  command: (props) => {
+    if (!props) return;
+    toggleTextColor(props.color, editor);
+  },
   icon: Palette,
 });
 
 export const BackgroundColorItem = (editor: Editor): EditorMenuItem<"background-color"> => ({
   key: "background-color",
   name: "Background color",
-  isActive: ({ color }) => editor.isActive("customColor", { backgroundColor: color }),
-  command: ({ color }) => toggleBackgroundColor(color, editor),
+  isActive: (props) => editor.isActive("customColor", { backgroundColor: props?.color }),
+  command: (props) => {
+    if (!props) return;
+    toggleBackgroundColor(props.color, editor);
+  },
   icon: Palette,
 });
 
 export const TextAlignItem = (editor: Editor): EditorMenuItem<"text-align"> => ({
   key: "text-align",
   name: "Text align",
-  isActive: ({ alignment }) => editor.isActive({ textAlign: alignment }),
-  command: ({ alignment }) => setTextAlign(alignment, editor),
+  isActive: (props) => editor.isActive({ textAlign: props?.alignment }),
+  command: (props) => {
+    if (!props) return;
+    setTextAlign(props.alignment, editor);
+  },
   icon: AlignCenter,
 });
 

packages/editor/src/core/constants/common.ts

@@ -87,7 +87,7 @@ export const TEXT_ALIGNMENT_ITEMS: ToolbarMenuItem<"text-align">[] = [
   },
 ];
 
-const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strikethrough">[] = [
+const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strike">[] = [
   {
     itemKey: "bold",
     renderKey: "bold",
@@ -113,7 +113,7 @@ const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strik
     editors: ["lite", "document"],
   },
   {
-    itemKey: "strikethrough",
+    itemKey: "strike",
     renderKey: "strikethrough",
     name: "Strikethrough",
     icon: Strikethrough,

packages/editor/src/core/extensions/custom-color.ts

@@ -106,6 +106,8 @@ export const CustomColorExtension = Mark.create({
     };
   },
 
+  // @ts-expect-error types are incorrect
+  // TODO: check this and update types
   parseHTML() {
     return [
       {

packages/editor/src/core/extensions/custom-image/components/image-block.tsx

@@ -1,9 +1,10 @@
-import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
 import { NodeSelection } from "@tiptap/pm/state";
+import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
 // plane utils
 import { cn } from "@plane/utils";
 // extensions
 import { CustoBaseImageNodeViewProps, ImageToolbarRoot } from "@/extensions/custom-image";
+import { ImageUploadStatus } from "./upload-status";
 
 const MIN_SIZE = 100;
 
@@ -38,11 +39,11 @@ const ensurePixelString = <TDefault,>(value: Pixel | TDefault | number | undefin
 };
 
 type CustomImageBlockProps = CustoBaseImageNodeViewProps & {
-  imageFromFileSystem: string;
+  imageFromFileSystem: string | undefined;
   setFailedToLoadImage: (isError: boolean) => void;
   editorContainer: HTMLDivElement | null;
   setEditorContainer: (editorContainer: HTMLDivElement | null) => void;
-  src: string;
+  src: string | undefined;
 };
 
 export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
@@ -62,8 +63,8 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   const { width: nodeWidth, height: nodeHeight, aspectRatio: nodeAspectRatio, src: imgNodeSrc } = node.attrs;
   // states
   const [size, setSize] = useState<Size>({
-    width: ensurePixelString(nodeWidth, "35%"),
-    height: ensurePixelString(nodeHeight, "auto"),
+    width: ensurePixelString(nodeWidth, "35%") ?? "35%",
+    height: ensurePixelString(nodeHeight, "auto") ?? "auto",
     aspectRatio: nodeAspectRatio || null,
   });
   const [isResizing, setIsResizing] = useState(false);
@@ -144,8 +145,8 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   useLayoutEffect(() => {
     setSize((prevSize) => ({
       ...prevSize,
-      width: ensurePixelString(nodeWidth),
-      height: ensurePixelString(nodeHeight),
+      width: ensurePixelString(nodeWidth) ?? "35%",
+      height: ensurePixelString(nodeHeight) ?? "auto",
       aspectRatio: nodeAspectRatio,
     }));
   }, [nodeWidth, nodeHeight, nodeAspectRatio]);
@@ -210,6 +211,8 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   // show the image loader if the remote image's src or preview image from filesystem is not set yet (while loading the image post upload) (or)
   // if the initial resize (from 35% width and "auto" height attrs to the actual size in px) is not complete
   const showImageLoader = !(resolvedImageSrc || imageFromFileSystem) || !initialResizeComplete || hasErroredOnFirstLoad;
+  // show the image upload status only when the resolvedImageSrc is not ready
+  const showUploadStatus = !resolvedImageSrc;
   // show the image utils only if the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
   const showImageUtils = resolvedImageSrc && initialResizeComplete;
   // show the image resizer only if the editor is editable, the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
@@ -247,7 +250,16 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
           try {
             setHasErroredOnFirstLoad(true);
             // this is a type error from tiptap, don't remove await until it's fixed
+            if (!imgNodeSrc) {
+              throw new Error("No source image to restore from");
+            }
             await editor?.commands.restoreImage?.(imgNodeSrc);
+            if (!imageRef.current) {
+              throw new Error("Image reference not found");
+            }
+            if (!resolvedImageSrc) {
+              throw new Error("No resolved image source available");
+            }
             imageRef.current.src = resolvedImageSrc;
           } catch {
             // if the image failed to even restore, then show the error state
@@ -270,6 +282,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
           ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
         }}
       />
+      {showUploadStatus && node.attrs.id && <ImageUploadStatus editor={editor} nodeId={node.attrs.id} />}
       {showImageUtils && (
         <ImageToolbarRoot
           containerClassName={
@@ -277,7 +290,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
           }
           image={{
             src: resolvedImageSrc,
-            aspectRatio: size.aspectRatio,
+            aspectRatio: size.aspectRatio === null ? 1 : size.aspectRatio,
             height: size.height,
             width: size.width,
           }}

packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx

@@ -1,13 +1,13 @@
-import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react";
 import { ImageIcon } from "lucide-react";
+import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react";
 // plane utils
 import { cn } from "@plane/utils";
 // constants
 import { ACCEPTED_FILE_EXTENSIONS } from "@/constants/config";
-// hooks
-import { useUploader, useDropZone, uploadFirstImageAndInsertRemaining } from "@/hooks/use-file-upload";
 // extensions
 import { CustoBaseImageNodeViewProps, getImageComponentImageFileMap } from "@/extensions/custom-image";
+// hooks
+import { useUploader, useDropZone, uploadFirstImageAndInsertRemaining } from "@/hooks/use-file-upload";
 
 type CustomImageUploaderProps = CustoBaseImageNodeViewProps & {
   maxFileSize: number;
@@ -38,6 +38,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   const onUpload = useCallback(
     (url: string) => {
       if (url) {
+        if (!imageEntityId) return;
         setIsUploaded(true);
         // Update the node view's src attribute post upload
         updateAttributes({ src: url });
@@ -68,6 +69,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   );
   // hooks
   const { uploading: isImageBeingUploaded, uploadFile } = useUploader({
+    blockId: imageEntityId ?? "",
     editor,
     loadImageFromFileSystem,
     maxFileSize,
@@ -82,7 +84,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
 
   // the meta data of the image component
   const meta = useMemo(
-    () => imageComponentImageFileMap?.get(imageEntityId),
+    () => imageComponentImageFileMap?.get(imageEntityId ?? ""),
     [imageComponentImageFileMap, imageEntityId]
   );
 
@@ -96,7 +98,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
         if (meta.hasOpenedFileInputOnce) return;
         fileInputRef.current.click();
         hasTriggeredFilePickerRef.current = true;
-        imageComponentImageFileMap?.set(imageEntityId, { ...meta, hasOpenedFileInputOnce: true });
+        imageComponentImageFileMap?.set(imageEntityId ?? "", { ...meta, hasOpenedFileInputOnce: true });
       }
     }
   }, [meta, uploadFile, imageComponentImageFileMap]);

packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx

@@ -29,7 +29,7 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
   const dragStart = useRef({ x: 0, y: 0 });
   const dragOffset = useRef({ x: 0, y: 0 });
   const modalRef = useRef<HTMLDivElement>(null);
-  const imgRef = useRef<HTMLImageElement>(null);
+  const imgRef = useRef<HTMLImageElement | null>(null);
 
   const widthInNumber = useMemo(() => Number(width?.replace("px", "")), [width]);
 

packages/editor/src/core/extensions/custom-image/components/upload-status.tsx

@@ -0,0 +1,60 @@
+import { Editor } from "@tiptap/core";
+import { useEditorState } from "@tiptap/react";
+import { useEffect, useRef, useState } from "react";
+
+type Props = {
+  editor: Editor;
+  nodeId: string;
+};
+
+export const ImageUploadStatus: React.FC<Props> = (props) => {
+  const { editor, nodeId } = props;
+  // Displayed status that will animate smoothly
+  const [displayStatus, setDisplayStatus] = useState(0);
+  // Animation frame ID for cleanup
+  const animationFrameRef = useRef<number | null>(null);
+  // subscribe to image upload status
+  const uploadStatus: number | undefined = useEditorState({
+    editor,
+    selector: ({ editor }) => editor.storage.imageComponent.assetsUploadStatus[nodeId],
+  });
+
+  useEffect(() => {
+    const animateToValue = (start: number, end: number, startTime: number) => {
+      const duration = 200;
+
+      const animation = (currentTime: number) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+
+        // Easing function for smooth animation
+        const easeOutCubic = 1 - Math.pow(1 - progress, 3);
+
+        // Calculate current display value
+        const currentValue = Math.floor(start + (end - start) * easeOutCubic);
+        setDisplayStatus(currentValue);
+
+        // Continue animation if not complete
+        if (progress < 1) {
+          animationFrameRef.current = requestAnimationFrame((time) => animation(time));
+        }
+      };
+      animationFrameRef.current = requestAnimationFrame((time) => animation(time));
+    };
+    animateToValue(displayStatus, uploadStatus == undefined ? 100 : uploadStatus, performance.now());
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [uploadStatus]);
+
+  if (uploadStatus === undefined) return null;
+
+  return (
+    <div className="absolute top-1 right-1 z-20 bg-black/60 rounded text-xs font-medium w-10 text-center">
+      {displayStatus}%
+    </div>
+  );
+};

packages/editor/src/core/extensions/custom-image/custom-image.ts

@@ -4,12 +4,12 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 import { v4 as uuidv4 } from "uuid";
 // extensions
 import { CustomImageNode } from "@/extensions/custom-image";
+// helpers
+import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
 // plugins
 import { TrackImageDeletionPlugin, TrackImageRestorationPlugin, isFileValid } from "@/plugins/image";
 // types
 import { TFileHandler } from "@/types";
-// helpers
-import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
 
 export type InsertImageComponentProps = {
   file?: File;
@@ -21,7 +21,8 @@ declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     imageComponent: {
       insertImageComponent: ({ file, pos, event }: InsertImageComponentProps) => ReturnType;
-      uploadImage: (file: File) => () => Promise<string> | undefined;
+      uploadImage: (blockId: string, file: File) => () => Promise<string> | undefined;
+      updateAssetsUploadStatus: (updatedStatus: TFileHandler["assetsUploadStatus"]) => () => void;
       getImageSource?: (path: string) => () => Promise<string>;
       restoreImage: (src: string) => () => Promise<void>;
     };
@@ -32,6 +33,7 @@ export const getImageComponentImageFileMap = (editor: Editor) =>
   (editor.storage.imageComponent as UploadImageExtensionStorage | undefined)?.fileMap;
 
 export interface UploadImageExtensionStorage {
+  assetsUploadStatus: TFileHandler["assetsUploadStatus"];
   fileMap: Map<string, UploadEntity>;
 }
 
@@ -39,6 +41,7 @@ export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File })
 
 export const CustomImageExtension = (props: TFileHandler) => {
   const {
+    assetsUploadStatus,
     getAssetSrc,
     upload,
     delete: deleteImageFn,
@@ -105,7 +108,6 @@ export const CustomImageExtension = (props: TFileHandler) => {
       this.editor.state.doc.descendants((node) => {
         if (node.type.name === this.name) {
           if (!node.attrs.src?.startsWith("http")) return;
-
           imageSources.add(node.attrs.src);
         }
       });
@@ -128,13 +130,14 @@ export const CustomImageExtension = (props: TFileHandler) => {
         markdown: {
           serialize() {},
         },
+        assetsUploadStatus,
       };
     },
 
     addCommands() {
       return {
         insertImageComponent:
-          (props: { file?: File; pos?: number; event: "insert" | "drop" }) =>
+          (props) =>
           ({ commands }) => {
             // Early return if there's an invalid file being dropped
             if (
@@ -182,12 +185,15 @@ export const CustomImageExtension = (props: TFileHandler) => {
               attrs: attributes,
             });
           },
-        uploadImage: (file: File) => async () => {
-          const fileUrl = await upload(file);
+        uploadImage: (blockId, file) => async () => {
+          const fileUrl = await upload(blockId, file);
           return fileUrl;
         },
-        getImageSource: (path: string) => async () => await getAssetSrc(path),
-        restoreImage: (src: string) => async () => {
+        updateAssetsUploadStatus: (updatedStatus) => () => {
+          this.storage.assetsUploadStatus = updatedStatus;
+        },
+        getImageSource: (path) => async () => await getAssetSrc(path),
+        restoreImage: (src) => async () => {
           await restoreImageFn(src);
         },
       };

packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts

@@ -4,9 +4,9 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 // components
 import { CustomImageNode, UploadImageExtensionStorage } from "@/extensions/custom-image";
 // types
-import { TFileHandler } from "@/types";
+import { TReadOnlyFileHandler } from "@/types";
 
-export const CustomReadOnlyImageExtension = (props: Pick<TFileHandler, "getAssetSrc">) => {
+export const CustomReadOnlyImageExtension = (props: TReadOnlyFileHandler) => {
   const { getAssetSrc } = props;
 
   return Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({
@@ -56,6 +56,7 @@ export const CustomReadOnlyImageExtension = (props: Pick<TFileHandler, "getAsset
         markdown: {
           serialize() {},
         },
+        assetsUploadStatus: {},
       };
     },
 

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

@@ -32,10 +32,10 @@ import {
 } from "@/extensions";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
-// types
-import { TExtensions, TFileHandler, TMentionHandler } from "@/types";
 // plane editor extensions
 import { CoreEditorAdditionalExtensions } from "@/plane-editor/extensions";
+// types
+import { TExtensions, TFileHandler, TMentionHandler } from "@/types";
 
 type TArguments = {
   disabledExtensions: TExtensions[];
@@ -148,7 +148,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     CustomMentionExtension(mentionHandler),
     Placeholder.configure({
       placeholder: ({ editor, node }) => {
-        if (!editor.isEditable) return;
+        if (!editor.isEditable) return "";
 
         if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
 

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

@@ -3,9 +3,9 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 // extensions
 import { CustomImageNode } from "@/extensions";
 // types
-import { TFileHandler } from "@/types";
+import { TReadOnlyFileHandler } from "@/types";
 
-export const ReadOnlyImageExtension = (props: Pick<TFileHandler, "getAssetSrc">) => {
+export const ReadOnlyImageExtension = (props: TReadOnlyFileHandler) => {
   const { getAssetSrc } = props;
 
   return Image.extend({

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

@@ -27,14 +27,14 @@ import {
 } from "@/extensions";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
-// types
-import { TExtensions, TFileHandler, TReadOnlyMentionHandler } from "@/types";
 // plane editor extensions
 import { CoreReadOnlyEditorAdditionalExtensions } from "@/plane-editor/extensions";
+// types
+import { TExtensions, TReadOnlyFileHandler, TReadOnlyMentionHandler } from "@/types";
 
 type Props = {
   disabledExtensions: TExtensions[];
-  fileHandler: Pick<TFileHandler, "getAssetSrc">;
+  fileHandler: TReadOnlyFileHandler;
   mentionHandler: TReadOnlyMentionHandler;
 };
 
@@ -94,16 +94,12 @@ export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
       },
     }),
     CustomTypographyExtension,
-    ReadOnlyImageExtension({
-      getAssetSrc: fileHandler.getAssetSrc,
-    }).configure({
+    ReadOnlyImageExtension(fileHandler).configure({
       HTMLAttributes: {
         class: "rounded-md",
       },
     }),
-    CustomReadOnlyImageExtension({
-      getAssetSrc: fileHandler.getAssetSrc,
-    }),
+    CustomReadOnlyImageExtension(fileHandler),
     TiptapUnderline,
     TextStyle,
     TaskList.configure({

packages/editor/src/core/extensions/slash-commands/root.tsx

@@ -69,6 +69,7 @@ const renderItems = () => {
 
       const tippyContainer =
         document.querySelector(".active-editor") ?? document.querySelector('[id^="editor-container"]');
+      // @ts-expect-error - Tippy types are incorrect
       popup = tippy("body", {
         getReferenceClientRect: props.clientRect,
         appendTo: tippyContainer,

packages/editor/src/core/extensions/typography/index.ts

@@ -1,4 +1,4 @@
-import { Extension } from "@tiptap/core";
+import { Extension, InputRule } from "@tiptap/core";
 import {
   TypographyOptions,
   emDash,
@@ -26,7 +26,7 @@ export const CustomTypographyExtension = Extension.create<TypographyOptions>({
   name: "typography",
 
   addInputRules() {
-    const rules = [];
+    const rules: InputRule[] = [];
 
     if (this.options.emDash !== false) {
       rules.push(emDash(this.options.emDash));

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

@@ -125,16 +125,23 @@ export const useEditor = (props: CustomEditorProps) => {
     }
   }, [editor, value, id]);
 
+  // update assets upload status
+  useEffect(() => {
+    if (!editor) return;
+    const assetsUploadStatus = fileHandler.assetsUploadStatus;
+    editor.commands.updateAssetsUploadStatus(assetsUploadStatus);
+  }, [editor, fileHandler.assetsUploadStatus]);
+
   useImperativeHandle(
     forwardedRef,
     () => ({
-      blur: () => editor.commands.blur(),
+      blur: () => editor?.commands.blur(),
       scrollToNodeViaDOMCoordinates(behavior?: ScrollBehavior, pos?: number) {
-        const resolvedPos = pos ?? editor.state.selection.from;
+        const resolvedPos = pos ?? editor?.state.selection.from;
         if (!editor || !resolvedPos) return;
         scrollToNodeViaDOMCoordinates(editor, resolvedPos, behavior);
       },
-      getCurrentCursorPosition: () => editor.state.selection.from,
+      getCurrentCursorPosition: () => editor?.state.selection.from,
       clearEditor: (emitUpdate = false) => {
         editor?.chain().setMeta("skipImageDeletion", true).clearContent(emitUpdate).run();
       },
@@ -142,7 +149,7 @@ export const useEditor = (props: CustomEditorProps) => {
         editor?.commands.setContent(content, false, { preserveWhitespace: "full" });
       },
       setEditorValueAtCursorPosition: (content: string) => {
-        if (editor.state.selection) {
+        if (editor?.state.selection) {
           insertContentAtSavedSelection(editor, content);
         }
       },

packages/editor/src/core/hooks/use-file-upload.ts

@@ -6,6 +6,7 @@ import { insertImagesSafely } from "@/extensions/drop";
 import { isFileValid } from "@/plugins/image";
 
 type TUploaderArgs = {
+  blockId: string;
   editor: Editor;
   loadImageFromFileSystem: (file: string) => void;
   maxFileSize: number;
@@ -13,7 +14,7 @@ type TUploaderArgs = {
 };
 
 export const useUploader = (args: TUploaderArgs) => {
-  const { editor, loadImageFromFileSystem, maxFileSize, onUpload } = args;
+  const { blockId, editor, loadImageFromFileSystem, maxFileSize, onUpload } = args;
   // states
   const [uploading, setUploading] = useState(false);
 
@@ -49,7 +50,7 @@ export const useUploader = (args: TUploaderArgs) => {
         reader.readAsDataURL(fileWithTrimmedName);
         // @ts-expect-error - TODO: fix typings, and don't remove await from
         // here for now
-        const url: string = await editor?.commands.uploadImage(fileWithTrimmedName);
+        const url: string = await editor?.commands.uploadImage(blockId, fileWithTrimmedName);
 
         if (!url) {
           throw new Error("Something went wrong while uploading the image");

packages/editor/src/core/hooks/use-read-only-editor.ts

@@ -11,7 +11,7 @@ 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, TReadOnlyFileHandler, TReadOnlyMentionHandler } from "@/types";
 
 interface CustomReadOnlyEditorProps {
   disabledExtensions: TExtensions[];
@@ -20,7 +20,7 @@ interface CustomReadOnlyEditorProps {
   extensions?: Extensions;
   forwardedRef?: MutableRefObject<EditorReadOnlyRefApi | null>;
   initialValue?: string;
-  fileHandler: Pick<TFileHandler, "getAssetSrc">;
+  fileHandler: TReadOnlyFileHandler;
   handleEditorReady?: (value: boolean) => void;
   mentionHandler: TReadOnlyMentionHandler;
   provider?: HocuspocusProvider;
@@ -99,14 +99,11 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
       if (!editor) return;
       scrollSummary(editor, marking);
     },
-    getDocumentInfo: () => {
-      if (!editor) return;
-      return {
-        characters: editor.storage?.characterCount?.characters?.() ?? 0,
-        paragraphs: getParagraphCount(editor.state),
-        words: editor.storage?.characterCount?.words?.() ?? 0,
-      };
-    },
+    getDocumentInfo: () => ({
+      characters: editor.storage?.characterCount?.characters?.() ?? 0,
+      paragraphs: getParagraphCount(editor.state),
+      words: editor.storage?.characterCount?.words?.() ?? 0,
+    }),
   }));
 
   if (!editor) {

packages/editor/src/core/types/collaboration.ts

@@ -9,6 +9,7 @@ import {
   TExtensions,
   TFileHandler,
   TMentionHandler,
+  TReadOnlyFileHandler,
   TReadOnlyMentionHandler,
   TRealtimeConfig,
   TUserDetails,
@@ -43,7 +44,7 @@ export type TCollaborativeEditorProps = TCollaborativeEditorHookProps & {
 };
 
 export type TReadOnlyCollaborativeEditorProps = TCollaborativeEditorHookProps & {
-  fileHandler: Pick<TFileHandler, "getAssetSrc">;
+  fileHandler: TReadOnlyFileHandler;
   forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
   mentionHandler: TReadOnlyMentionHandler;
 };

packages/editor/src/core/types/config.ts

@@ -1,11 +1,15 @@
 import { DeleteImage, RestoreImage, UploadImage } from "@/types";
 
-export type TFileHandler = {
+export type TReadOnlyFileHandler = {
   getAssetSrc: (path: string) => Promise<string>;
+  restore: RestoreImage;
+};
+
+export type TFileHandler = TReadOnlyFileHandler & {
+  assetsUploadStatus: Record<string, number>; // blockId => progress percentage
   cancel: () => void;
   delete: DeleteImage;
   upload: UploadImage;
-  restore: RestoreImage;
   validation: {
     /**
      * @description max file size in bytes

packages/editor/src/core/types/editor.ts

@@ -16,6 +16,7 @@ import {
   TExtensions,
   TFileHandler,
   TMentionHandler,
+  TReadOnlyFileHandler,
   TReadOnlyMentionHandler,
   TServerHandler,
 } from "@/types";
@@ -31,7 +32,7 @@ export type TEditorCommands =
   | "bold"
   | "italic"
   | "underline"
-  | "strikethrough"
+  | "strike"
   | "bulleted-list"
   | "numbered-list"
   | "to-do-list"
@@ -44,12 +45,16 @@ export type TEditorCommands =
   | "text-color"
   | "background-color"
   | "text-align"
-  | "callout";
+  | "callout"
+  | "attachment";
 
 export type TCommandExtraProps = {
   image: {
     savedSelection: Selection | null;
   };
+  attachment: {
+    savedSelection: Selection | null;
+  };
   "text-color": {
     color: string | undefined;
   };
@@ -155,7 +160,7 @@ export interface IReadOnlyEditorProps {
   disabledExtensions: TExtensions[];
   displayConfig?: TDisplayConfig;
   editorClassName?: string;
-  fileHandler: Pick<TFileHandler, "getAssetSrc">;
+  fileHandler: TReadOnlyFileHandler;
   forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
   id: string;
   initialValue: string;

packages/editor/src/core/types/image.ts

@@ -2,4 +2,4 @@ export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<void>;
 
 export type RestoreImage = (assetUrlWithWorkspaceId: string) => Promise<void>;
 
-export type UploadImage = (file: File) => Promise<string>;
+export type UploadImage = (blockId: string, file: File) => Promise<string>;

packages/editor/tsconfig.json

@@ -12,6 +12,7 @@
       "@/styles/*": ["src/styles/*"],
       "@/plane-editor/*": ["src/ce/*"]
     },
+    "strictNullChecks": true,
     "allowSyntheticDefaultImports": true
   },
   "include": ["src/**/*", "index.d.ts"],

packages/hooks/src/use-outside-click-detector.tsx

@@ -8,9 +8,9 @@ export const useOutsideClickDetector = (
   const handleClick = (event: MouseEvent) => {
     if (ref.current && !ref.current.contains(event.target as any)) {
       // check for the closest element with attribute name data-prevent-outside-click
-      const preventOutsideClickElement = (
-        event.target as unknown as HTMLElement | undefined
-      )?.closest("[data-prevent-outside-click]");
+      const preventOutsideClickElement = (event.target as unknown as HTMLElement | undefined)?.closest(
+        "[data-prevent-outside-click]"
+      );
       // if the closest element with attribute name data-prevent-outside-click is found, return
       if (preventOutsideClickElement) {
         return;

packages/i18n/src/locales/en/core.json

@@ -9,7 +9,7 @@
     "workspace": "Workspace",
     "views": "Views",
     "analytics": "Analytics",
-    "work_items": "Work items",
+    "work_items": "Work Items",
     "cycles": "Cycles",
     "modules": "Modules",
     "intake": "Intake",

packages/i18n/src/locales/en/translations.json

@@ -492,6 +492,7 @@
     "epic": "Epic",
     "epics": "Epics",
     "work_item": "Work item",
+    "work_items": "Work items",
     "sub_work_item": "Sub-work item",
     "add": "Add",
     "warning": "Warning",
@@ -520,6 +521,7 @@
     "customize_time_range": "Customize time range",
     "loading": "Loading",
     "attachments": "Attachments",
+    "property": "Property",
     "properties": "Properties",
     "parent": "Parent",
     "remove": "Remove",
@@ -672,7 +674,21 @@
     "disconnect": "Disconnect",
     "disconnecting": "Disconnecting",
     "installing": "Installing",
-    "install": "Install"
+    "install": "Install",
+    "category": "Category",
+    "categories": "Categories",
+    "saving": "Saving",
+    "save_changes": "Save changes",
+    "delete": "Delete",
+    "deleting": "Deleting",
+    "pending": "Pending",
+    "invite": "Invite"
+  },
+
+  "chart": {
+    "x_axis": "X-axis",
+    "y_axis": "Y-axis",
+    "metric": "Metric"
   },
 
   "form": {
@@ -1279,6 +1295,7 @@
       "members": {
         "title": "Members",
         "add_member": "Add member",
+        "pending_invites": "Pending invites",
         "invitations_sent_successfully": "Invitations sent successfully",
         "leave_confirmation": "Are you sure you want to leave the workspace? You will no longer have access to this workspace. This action cannot be undone.",
         "details": {
@@ -1515,7 +1532,11 @@
       }
     },
     "states": {
-      "describe_this_state_for_your_members": "Describe this state for your members."
+      "describe_this_state_for_your_members": "Describe this state for your members.",
+      "empty_state": {
+        "title": "No states available for the {groupKey} group",
+        "description": "Please create a new state"
+      }
     },
     "labels": {
       "label_title": "Label title",

packages/i18n/src/locales/es/translations.json

@@ -662,6 +662,7 @@
     "epic": "Epic",
     "epics": "Epics",
     "work_item": "Elemento de trabajo",
+    "work_items": "Elementos de trabajo",
     "sub_work_item": "Sub-elemento de trabajo",
     "add": "Agregar",
     "warning": "Advertencia",
@@ -690,6 +691,7 @@
     "customize_time_range": "Personalizar rango de tiempo",
     "loading": "Cargando",
     "attachments": "Archivos adjuntos",
+    "property": "Propiedad",
     "properties": "Propiedades",
     "parent": "Padre",
     "remove": "Eliminar",
@@ -842,7 +844,21 @@
     "disconnect": "Desconectar",
     "disconnecting": "Desconectando",
     "installing": "Instalando",
-    "install": "Instalar"
+    "install": "Instalar",
+    "category": "Categoría",
+    "categories": "Categorías",
+    "saving": "Guardando",
+    "save_changes": "Guardar cambios",
+    "delete": "Eliminar",
+    "deleting": "Eliminando",
+    "pending": "Pendiente",
+    "invite": "Invitar"
+  },
+
+  "chart": {
+    "x_axis": "Eje X",
+    "y_axis": "Eje Y",
+    "metric": "Métrica"
   },
 
   "form": {
@@ -1448,6 +1464,7 @@
       "members": {
         "title": "Miembros",
         "add_member": "Agregar miembro",
+        "pending_invites": "Invitaciones pendientes",
         "invitations_sent_successfully": "Invitaciones enviadas exitosamente",
         "leave_confirmation": "¿Estás seguro de que quieres abandonar el espacio de trabajo? Ya no tendrás acceso a este espacio de trabajo. Esta acción no se puede deshacer.",
         "details": {
@@ -1684,7 +1701,11 @@
       }
     },
     "states": {
-      "describe_this_state_for_your_members": "Describe este estado para tus miembros."
+      "describe_this_state_for_your_members": "Describe este estado para tus miembros.",
+      "empty_state": {
+        "title": "No estados disponibles para el grupo {groupKey}",
+        "description": "Por favor, crea un nuevo estado"
+      }
     },
     "labels": {
       "label_title": "Título de la etiqueta",

packages/i18n/src/locales/fr/translations.json

@@ -662,6 +662,7 @@
     "epic": "Epic",
     "epics": "Epics",
     "work_item": "Élément de travail",
+    "work_items": "Éléments de travail",
     "sub_work_item": "Sous-élément de travail",
     "add": "Ajouter",
     "warning": "Avertissement",
@@ -690,6 +691,7 @@
     "customize_time_range": "Personnaliser la plage de temps",
     "loading": "Chargement",
     "attachments": "Pièces jointes",
+    "property": "Propriété",
     "properties": "Propriétés",
     "parent": "Parent",
     "remove": "Supprimer",
@@ -842,7 +844,21 @@
     "disconnect": "Déconnecter",
     "disconnecting": "Déconnexion",
     "installing": "Installation",
-    "install": "Installer"
+    "install": "Installer",
+    "category": "Catégorie",
+    "categories": "Catégories",
+    "saving": "Enregistrement",
+    "save_changes": "Enregistrer les modifications",
+    "delete": "Supprimer",
+    "deleting": "Suppression",
+    "pending": "En attente",
+    "invite": "Inviter"
+  },
+
+  "chart": {
+    "x_axis": "Axe X",
+    "y_axis": "Axe Y",
+    "metric": "Métrique"
   },
 
   "form": {
@@ -1448,6 +1464,7 @@
       "members": {
         "title": "Membres",
         "add_member": "Ajouter un membre",
+        "pending_invites": "Invitations en attente",
         "invitations_sent_successfully": "Invitations envoyées avec succès",
         "leave_confirmation": "Êtes-vous sûr de vouloir quitter l'espace de travail ? Vous n'aurez plus accès à cet espace de travail. Cette action ne peut pas être annulée.",
         "details": {
@@ -1684,7 +1701,11 @@
       }
     },
     "states": {
-      "describe_this_state_for_your_members": "Décrivez cet état pour vos membres."
+      "describe_this_state_for_your_members": "Décrivez cet état pour vos membres.",
+      "empty_state": {
+        "title": "Aucun état disponible pour le groupe {groupKey}",
+        "description": "Veuillez créer un nouvel état"
+      }
     },
     "labels": {
       "label_title": "Titre de l'étiquette",

packages/i18n/src/locales/ja/translations.json

@@ -662,6 +662,7 @@
     "epic": "エピック",
     "epics": "エピック",
     "work_item": "作業項目",
+    "work_items": "作業項目",
     "sub_work_item": "サブ作業項目",
     "add": "追加",
     "warning": "警告",
@@ -690,6 +691,7 @@
     "customize_time_range": "期間をカスタマイズ",
     "loading": "読み込み中",
     "attachments": "添付ファイル",
+    "property": "プロパティ",
     "properties": "プロパティ",
     "parent": "親",
     "remove": "削除",
@@ -842,7 +844,21 @@
     "disconnect": "切断",
     "disconnecting": "切断中",
     "installing": "インストール中",
-    "install": "インストール"
+    "install": "インストール",
+    "category": "カテゴリー",
+    "categories": "カテゴリーズ",
+    "saving": "セービング",
+    "save_changes": "セーブ チェンジズ",
+    "delete": "デリート",
+    "deleting": "デリーティング",
+    "pending": "保留中",
+    "invite": "招待"
+  },
+
+  "chart": {
+    "x_axis": "エックス アクシス",
+    "y_axis": "ワイ アクシス",
+    "metric": "メトリック"
   },
 
   "form": {
@@ -1448,6 +1464,7 @@
       "members": {
         "title": "メンバー",
         "add_member": "メンバーを追加",
+        "pending_invites": "保留中の招待",
         "invitations_sent_successfully": "招待が正常に送信されました",
         "leave_confirmation": "ワークスペースから退出してもよろしいですか？このワークスペースにアクセスできなくなります。この操作は取り消せません。",
         "details": {
@@ -1684,7 +1701,11 @@
       }
     },
     "states": {
-      "describe_this_state_for_your_members": "このステータスについてメンバーに説明してください。"
+      "describe_this_state_for_your_members": "このステータスについてメンバーに説明してください。",
+      "empty_state": {
+        "title": "{groupKey}グループのステータスがありません",
+        "description": "新しいステータスを作成してください"
+      }
     },
     "labels": {
       "label_title": "ラベルタイトル",

packages/i18n/src/locales/zh-CN/translations.json

@@ -662,6 +662,7 @@
     "epic": "史诗",
     "epics": "史诗",
     "work_item": "工作项",
+    "work_items": "工作项",
     "sub_work_item": "子工作项",
     "add": "添加",
     "warning": "警告",
@@ -690,6 +691,7 @@
     "customize_time_range": "自定义时间范围",
     "loading": "加载中",
     "attachments": "附件",
+    "property": "属性",
     "properties": "属性",
     "parent": "父项",
     "remove": "移除",
@@ -842,7 +844,21 @@
     "disconnect": "断开连接",
     "disconnecting": "正在断开连接",
     "installing": "正在安装",
-    "install": "安装"
+    "install": "安装",
+    "category": "类别",
+    "categories": "类别",
+    "saving": "保存中",
+    "save_changes": "保存更改",
+    "delete": "删除",
+    "deleting": "删除中",
+    "pending": "待处理",
+    "invite": "邀请"
+  },
+
+  "chart": {
+    "x_axis": "X轴",
+    "y_axis": "Y轴",
+    "metric": "指标"
   },
 
   "form": {
@@ -1448,6 +1464,7 @@
       "members": {
         "title": "成员",
         "add_member": "添加成员",
+        "pending_invites": "待处理邀请",
         "invitations_sent_successfully": "邀请发送成功",
         "leave_confirmation": "您确定要离开工作区吗？您将无法再访问此工作区。此操作无法撤消。",
         "details": {
@@ -1684,7 +1701,11 @@
       }
     },
     "states": {
-      "describe_this_state_for_your_members": "为您的成员描述此状态。"
+      "describe_this_state_for_your_members": "为您的成员描述此状态。",
+      "empty_state": {
+        "title": "{groupKey} 组中没有状态",
+        "description": "请创建一个新状态"
+      }
     },
     "labels": {
       "label_title": "标签标题",

packages/tailwind-config/tailwind.config.js

@@ -203,6 +203,11 @@ module.exports = {
             },
           },
           backdrop: "rgba(0, 0, 0, 0.25)",
+          scrollbar: {
+            neutral: "rgba(96, 100, 108, 0.1)",
+            hover: "rgba(96, 100, 108, 0.25)",
+            active: "rgba(96, 100, 108, 0.7)",
+          },
         },
         onboarding: {
           background: {

packages/types/src/issues/activity/base.d.ts

@@ -26,7 +26,7 @@ export type TIssueActivityProjectDetail = {
 
 export type TIssueActivityIssueDetail = {
   id: string;
-  sequence_id: boolean;
+  sequence_id: number;
   sort_order: boolean;
   name: string;
   description_html: string;

packages/types/src/issues/issue_attachment.d.ts

@@ -11,6 +11,7 @@ export type TIssueAttachment = {
   // required
   updated_at: string;
   updated_by: string;
+  created_by: string;
 };
 
 export type TIssueAttachmentUploadResponse = TFileSignedURLResponse & {

packages/types/src/workspace.d.ts

@@ -1,10 +1,4 @@
-import type {
-  ICycle,
-  IProjectMember,
-  IUser,
-  IUserLite,
-  IWorkspaceViewProps,
-} from "@plane/types";
+import type { ICycle, IProjectMember, IUser, IUserLite, IWorkspaceViewProps, TPaginationInfo } from "@plane/types";
 import { EUserWorkspaceRoles } from "@plane/constants"; // TODO: check if importing this over here causes circular dependency
 import { TUserPermissions } from "./enums";
 
@@ -22,7 +16,6 @@ export interface IWorkspace {
   readonly updated_by: string;
   organization_size: string;
   total_projects?: number;
-  current_plan?: string;
   role: number;
 }
 
@@ -40,9 +33,10 @@ export interface IWorkspaceMemberInvitation {
   responded_at: Date;
   role: TUserPermissions;
   token: string;
+  invite_link: string;
   workspace: {
     id: string;
-    logo: string;
+    logo_url: string;
     name: string;
     slug: string;
   };
@@ -229,3 +223,13 @@ export interface IWorkspaceAnalyticsResponse {
 export type TWorkspacePaginationInfo = TPaginationInfo & {
   results: IWorkspace[];
 };
+
+export interface IWorkspaceSidebarNavigationItem {
+  key?: string;
+  is_pinned: boolean;
+  sort_order: number;
+}
+
+export interface IWorkspaceSidebarNavigation {
+  [key: string]: IWorkspaceSidebarNavigationItem;
+}

packages/ui/package.json

@@ -34,11 +34,13 @@
     "@plane/hooks": "*",
     "@plane/utils": "*",
     "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-scroll-area": "^1.2.3",
     "clsx": "^2.0.0",
     "emoji-picker-react": "^4.5.16",
     "lodash": "^4.17.21",
     "lucide-react": "^0.469.0",
     "react-color": "^2.19.3",
+    "react-day-picker": "9.5.0",
     "react-popper": "^2.3.0",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.0.0",

packages/ui/src/calendar.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { ChevronLeft } from "lucide-react";
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "../helpers";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+export const Calendar = ({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) => (
+  <DayPicker
+    showOutsideDays={showOutsideDays}
+    className={cn("p-3", className)}
+    // classNames={{
+    //   months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+    //   month: "space-y-4",
+    //   // caption: "flex justify-center pt-1 relative items-center",
+    //   // caption_label: "hidden",
+    //   nav: "box-border absolute top-[1.2rem] right-[1rem] flex items-center",
+    //   button_next:
+    //     "size-[1.25rem] border-none bg-none p-[0.25rem] m-0 cursor-pointer inline-flex items-center justify-center relative appearance-none rounded-sm hover:bg-custom-background-80 focus-visible:bg-custom-background-80",
+    //   button_previous:
+    //     "size-[1.25rem] border-none bg-none p-[0.25rem] m-0 cursor-pointer inline-flex items-center justify-center relative appearance-none rounded-sm hover:bg-custom-background-80 focus-visible:bg-custom-background-80",
+    //   chevron: "m-0 ml-1 size-[0.75rem]",
+    //   // nav_button: cn("h-10 bg-transparent p-0 opacity-50 hover:opacity-100"),
+    //   // nav_button_previous: "absolute left-1",
+    //   // nav_button_next: "absolute right-1",
+    //   table: "w-full border-collapse space-y-1",
+    //   head_row: "flex w-full items-center",
+    //   head_cell: "rounded-md w-10 text-[10px] text-center m-auto font-semibold uppercase",
+    //   row: "flex w-full mt-2",
+    //   cell: cn(
+    //     "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-custom-primary-100/50 [&:has([aria-selected].day-range-end)]:rounded-r-full",
+    //     props.mode === "range"
+    //       ? "[&:has(>.day-range-end)]:rounded-r-full [&:has(>.day-range-start)]:rounded-l-full first:[&:has([aria-selected])]:rounded-l-full last:[&:has([aria-selected])]:rounded-r-full"
+    //       : "[&:has([aria-selected])]:rounded-full [&:has([aria-selected])]:bg-custom-primary-100 [&:has([aria-selected])]:text-white"
+    //   ),
+    //   // day_button:
+    //   //   "size-10 flex items-center justify-center overflow-hidden box-border m-0 border-2 border-transparent rounded-full",
+    //   day: "size-10 p-0 font-normal aria-selected:opacity-100 rounded-full hover:bg-custom-primary-100/60",
+    //   day_range_start: "day-range-start bg-custom-primary-100 text-white",
+    //   day_range_end: "day-range-end bg-custom-primary-100 text-white",
+    //   day_selected: "",
+    //   day_today:
+    //     "relative after:content-[''] after:absolute after:m-auto after:left-1/3  after:bottom-[6px] after:w-[6px] after:h-[6px] after:bg-custom-primary-100/50 after:rounded-full after:translate-x-1/2 after:translate-y-1/2",
+    //   day_outside: "day-outside",
+    //   day_disabled: "opacity-50 hover:!bg-transparent",
+    //   day_range_middle: "text-black",
+    //   day_hidden: "invisible",
+    //   caption_dropdowns: "inline-flex bg-transparent",
+    //   dropdown_root: "m-0 relative inline-flex items-center",
+    //   dropdowns: "relative inline-flex items-center",
+    //   dropdown:
+    //     "appearance-none absolute z-[2] top-0 bottom-0 left-0 w-full m-0 p-0 opacity-0 border-none text-[1rem] cursor-pointer bg-transparent hover:bg-custom-background-80",
+    //   months_dropdown: "capitalize",
+    //   caption_label:
+    //     "z-[1] inline-flex items-center gap-[0.25rem] m-0 py-0 px-[0.25rem] whitespace-nowrap border-2 border-transparent font-semibold bg-transparent rounded",
+    //   ...classNames,
+    // }}
+    components={{
+      Chevron: ({ className, ...props }) => (
+        <ChevronLeft
+          className={cn(
+            "size-4",
+            {
+              "rotate-180": props.orientation === "right",
+              "-rotate-90": props.orientation === "down",
+            },
+            className
+          )}
+          {...props}
+        />
+      ),
+    }}
+    {...props}
+  />
+);

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

@@ -2,20 +2,13 @@ import * as React from "react";
 
 import { ISvgIcons } from "./type";
 
-export const OverviewIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className = "" }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+export const OverviewIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
+  <svg viewBox="0 0 12 12" className={className} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M2.5 3C2.5 2.86739 2.55268 2.74021 2.64645 2.64645C2.74021 2.55268 2.86739 2.5 3 2.5H3.5C9.02267 2.5 13.5 6.97733 13.5 12.5V13C13.5 13.1326 13.4473 13.2598 13.3536 13.3536C13.2598 13.4473 13.1326 13.5 13 13.5H12.5C12.3674 13.5 12.2402 13.4473 12.1464 13.3536C12.0527 13.2598 12 13.1326 12 13V12.5C12 7.80533 8.19467 4 3.5 4H3C2.86739 4 2.74021 3.94732 2.64645 3.85355C2.55268 3.75979 2.5 3.63261 2.5 3.5V3ZM2.5 7.5C2.5 7.36739 2.55268 7.24022 2.64645 7.14645C2.74021 7.05268 2.86739 7 3 7H3.5C4.22227 7 4.93747 7.14226 5.60476 7.41866C6.27205 7.69506 6.87837 8.10019 7.38909 8.61091C7.89981 9.12164 8.30494 9.72795 8.58134 10.3952C8.85774 11.0625 9 11.7777 9 12.5V13C9 13.1326 8.94732 13.2598 8.85355 13.3536C8.75978 13.4473 8.63261 13.5 8.5 13.5H8C7.86739 13.5 7.74022 13.4473 7.64645 13.3536C7.55268 13.2598 7.5 13.1326 7.5 13V12.5C7.5 11.4391 7.07857 10.4217 6.32843 9.67157C5.57828 8.92143 4.56087 8.5 3.5 8.5H3C2.86739 8.5 2.74021 8.44732 2.64645 8.35355C2.55268 8.25978 2.5 8.13261 2.5 8V7.5ZM2.5 12.5C2.5 12.2348 2.60536 11.9804 2.79289 11.7929C2.98043 11.6054 3.23478 11.5 3.5 11.5C3.76522 11.5 4.01957 11.6054 4.20711 11.7929C4.39464 11.9804 4.5 12.2348 4.5 12.5C4.5 12.7652 4.39464 13.0196 4.20711 13.2071C4.01957 13.3946 3.76522 13.5 3.5 13.5C3.23478 13.5 2.98043 13.3946 2.79289 13.2071C2.60536 13.0196 2.5 12.7652 2.5 12.5Z"
-      fill="#455068"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.5 1C0.5 0.867392 0.552678 0.740215 0.646447 0.646447C0.740215 0.552678 0.867392 0.5 1 0.5H1.5C7.02267 0.5 11.5 4.97733 11.5 10.5V11C11.5 11.1326 11.4473 11.2598 11.3536 11.3536C11.2598 11.4473 11.1326 11.5 11 11.5H10.5C10.3674 11.5 10.2402 11.4473 10.1464 11.3536C10.0527 11.2598 10 11.1326 10 11V10.5C10 5.80533 6.19467 2 1.5 2H1C0.867392 2 0.740215 1.94732 0.646447 1.85355C0.552678 1.75979 0.5 1.63261 0.5 1.5V1ZM0.5 5.5C0.5 5.36739 0.552678 5.24022 0.646447 5.14645C0.740215 5.05268 0.867392 5 1 5H1.5C2.22227 5 2.93747 5.14226 3.60476 5.41866C4.27205 5.69506 4.87837 6.10019 5.38909 6.61091C5.89981 7.12164 6.30494 7.72795 6.58134 8.39524C6.85774 9.06253 7 9.77773 7 10.5V11C7 11.1326 6.94732 11.2598 6.85355 11.3536C6.75978 11.4473 6.63261 11.5 6.5 11.5H6C5.86739 11.5 5.74022 11.4473 5.64645 11.3536C5.55268 11.2598 5.5 11.1326 5.5 11V10.5C5.5 9.43913 5.07857 8.42172 4.32843 7.67157C3.57828 6.92143 2.56087 6.5 1.5 6.5H1C0.867392 6.5 0.740215 6.44732 0.646447 6.35355C0.552678 6.25978 0.5 6.13261 0.5 6V5.5ZM0.5 10.5C0.5 10.2348 0.605357 9.98043 0.792893 9.79289C0.98043 9.60536 1.23478 9.5 1.5 9.5C1.76522 9.5 2.01957 9.60536 2.20711 9.79289C2.39464 9.98043 2.5 10.2348 2.5 10.5C2.5 10.7652 2.39464 11.0196 2.20711 11.2071C2.01957 11.3946 1.76522 11.5 1.5 11.5C1.23478 11.5 0.98043 11.3946 0.792893 11.2071C0.605357 11.0196 0.5 10.7652 0.5 10.5Z"
+      fill="currentColor"
     />
   </svg>
 );

packages/ui/src/index.ts

@@ -25,7 +25,9 @@ export * from "./popovers";
 export * from "./tables";
 export * from "./header";
 export * from "./row";
+export * from "./scroll-area";
 export * from "./content-wrapper";
 export * from "./card";
 export * from "./tag";
 export * from "./tabs";
+export * from "./calendar";

packages/ui/src/scroll-area.tsx

@@ -0,0 +1,66 @@
+"use client";
+import * as RadixScrollArea from "@radix-ui/react-scroll-area";
+import React, { FC } from "react";
+import { cn } from "../helpers";
+
+type TScrollAreaProps = {
+  type?: "auto" | "always" | "scroll" | "hover";
+  className?: string;
+  scrollHideDelay?: number;
+  size?: "sm" | "md" | "lg";
+  children: React.ReactNode;
+};
+
+const sizeStyles = {
+  sm: "p-[0.112rem] data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:h-2.5",
+  md: "p-[0.152rem] data-[orientation=vertical]:w-3 data-[orientation=horizontal]:h-3",
+  lg: "p-[0.225rem] data-[orientation=vertical]:w-4 data-[orientation=horizontal]:h-4",
+};
+
+const thumbSizeStyles = {
+  sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2",
+  md: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-14 before:min-w-14 before:-translate-x-1/2 before:-translate-y-1/2",
+  lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:min-w-17 before:-translate-x-1/2 before:-translate-y-1/2",
+};
+
+export const ScrollArea: FC<TScrollAreaProps> = (props) => {
+  const { type = "always", className = "", scrollHideDelay = 600, size = "md", children } = props;
+
+  return (
+    <RadixScrollArea.Root
+      type={type}
+      className={cn("group overflow-hidden", className)}
+      scrollHideDelay={scrollHideDelay}
+    >
+      <RadixScrollArea.Viewport className="size-full">{children}</RadixScrollArea.Viewport>
+      <RadixScrollArea.Scrollbar
+        className={cn(
+          "group/track flex touch-none select-none bg-transparent transition-colors duration-[160ms] ease-out",
+          sizeStyles[size]
+        )}
+        orientation="vertical"
+      >
+        <RadixScrollArea.Thumb
+          className={cn(
+            "relative flex-1 rounded-[10px]  bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active",
+            thumbSizeStyles[size]
+          )}
+        />
+      </RadixScrollArea.Scrollbar>
+      <RadixScrollArea.Scrollbar
+        className={cn(
+          "group/track flex touch-none select-none bg-transparent transition-colors duration-[160ms] ease-out",
+          sizeStyles[size]
+        )}
+        orientation="horizontal"
+      >
+        <RadixScrollArea.Thumb
+          className={cn(
+            "relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active",
+            thumbSizeStyles[size]
+          )}
+        />
+      </RadixScrollArea.Scrollbar>
+    </RadixScrollArea.Root>
+  );
+};

packages/utils/src/color.ts

@@ -7,6 +7,8 @@
  */
 export type RGB = { r: number; g: number; b: number };
 
+export type HSL = { h: number; s: number; l: number };
+
 /**
  * @description Validates and clamps color values to RGB range (0-255)
  * @param {number} value - The color value to validate
@@ -62,3 +64,81 @@ export const hexToRgb = (hex: string): RGB => {
  * rgbToHex({ r: 0, g: 0, b: 255 }) // returns "#0000ff"
  */
 export const rgbToHex = ({ r, g, b }: RGB): string => `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+
+/**
+ * Converts Hex values to HSL values
+ * @param {string} hex - The hexadecimal color code (e.g., "#ff0000" for red)
+ * @returns {HSL} An object containing the HSL values
+ * @example
+ * hexToHsl("#ff0000") // returns { h: 0, s: 100, l: 50 }
+ * hexToHsl("#00ff00") // returns { h: 120, s: 100, l: 50 }
+ * hexToHsl("#0000ff") // returns { h: 240, s: 100, l: 50 }
+ */
+export const hexToHsl = (hex: string): HSL => {
+  // return default value for invalid hex
+  if (!/^#[0-9A-Fa-f]{6}$/.test(hex)) return { h: 0, s: 0, l: 0 };
+
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+
+  return {
+    h: h * 360,
+    s: s * 100,
+    l: l * 100,
+  };
+};
+
+/**
+ * Converts HSL values to a hexadecimal color code
+ * @param {HSL} hsl - An object containing HSL values
+ * @param {number} hsl.h - Hue component (0-360)
+ * @param {number} hsl.s - Saturation component (0-100)
+ * @param {number} hsl.l - Lightness component (0-100)
+ * @returns {string} The hexadecimal color code (e.g., "#ff0000" for red)
+ * @example
+ * hslToHex({ h: 0, s: 100, l: 50 }) // returns "#ff0000"
+ * hslToHex({ h: 120, s: 100, l: 50 }) // returns "#00ff00"
+ * hslToHex({ h: 240, s: 100, l: 50 }) // returns "#0000ff"
+ */
+export const hslToHex = ({ h, s, l }: HSL): string => {
+  if (h < 0 || h > 360) return "#000000";
+  if (s < 0 || s > 100) return "#000000";
+  if (l < 0 || l > 100) return "#000000";
+
+  l /= 100;
+  const a = (s * Math.min(l, 1 - l)) / 100;
+
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, "0");
+  };
+
+  return `#${f(0)}${f(8)}${f(4)}`;
+};

packages/utils/src/index.ts

@@ -10,3 +10,4 @@ export * from "./issue";
 export * from "./state";
 export * from "./string";
 export * from "./theme";
+export * from "./workspace";

packages/utils/src/workspace.ts

@@ -0,0 +1,5 @@
+// plane imports
+import { IWorkspace } from "@plane/types";
+
+export const orderWorkspacesList = (workspaces: IWorkspace[]): IWorkspace[] =>
+  workspaces.sort((a, b) => a.name.localeCompare(b.name));

space/core/components/editor/lite-text-editor.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // editor
-import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef } from "@plane/editor";
+import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef, TFileHandler } from "@plane/editor";
 // components
 import { EditorMentionsRoot, IssueCommentToolbar } from "@/components/editor";
 // helpers
@@ -14,7 +14,7 @@ interface LiteTextEditorWrapperProps
   workspaceId: string;
   isSubmitting?: boolean;
   showSubmitButton?: boolean;
-  uploadFile: (file: File) => Promise<string>;
+  uploadFile: TFileHandler["upload"];
 }
 
 export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {

space/core/components/editor/lite-text-read-only-editor.tsx

@@ -12,15 +12,17 @@ type LiteTextReadOnlyEditorWrapperProps = Omit<
   "disabledExtensions" | "fileHandler" | "mentionHandler"
 > & {
   anchor: string;
+  workspaceId: string;
 };
 
 export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, LiteTextReadOnlyEditorWrapperProps>(
-  ({ anchor, ...props }, ref) => (
+  ({ anchor, workspaceId, ...props }, ref) => (
     <LiteTextReadOnlyEditorWithRef
       ref={ref}
       disabledExtensions={[]}
       fileHandler={getReadOnlyEditorFileHandlers({
         anchor,
+        workspaceId,
       })}
       mentionHandler={{
         renderComponent: (props) => <EditorMentionsRoot {...props} />,

space/core/components/editor/rich-text-editor.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 // editor
-import { EditorRefApi, IRichTextEditor, RichTextEditorWithRef } from "@plane/editor";
+import { EditorRefApi, IRichTextEditor, RichTextEditorWithRef, TFileHandler } from "@plane/editor";
 // components
 import { EditorMentionsRoot } from "@/components/editor";
 // helpers
@@ -8,11 +8,13 @@ import { getEditorFileHandlers } from "@/helpers/editor.helper";
 
 interface RichTextEditorWrapperProps
   extends Omit<IRichTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
-  uploadFile: (file: File) => Promise<string>;
+  anchor: string;
+  uploadFile: TFileHandler["upload"];
+  workspaceId: string;
 }
 
 export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProps>((props, ref) => {
-  const { containerClassName, uploadFile, ...rest } = props;
+  const { anchor, containerClassName, uploadFile, workspaceId, ...rest } = props;
 
   return (
     <RichTextEditorWithRef
@@ -22,9 +24,9 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
       ref={ref}
       disabledExtensions={[]}
       fileHandler={getEditorFileHandlers({
+        anchor,
         uploadFile,
-        workspaceId: "",
-        anchor: "",
+        workspaceId,
       })}
       {...rest}
       containerClassName={containerClassName}

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

@@ -12,15 +12,17 @@ type RichTextReadOnlyEditorWrapperProps = Omit<
   "disabledExtensions" | "fileHandler" | "mentionHandler"
 > & {
   anchor: string;
+  workspaceId: string;
 };
 
 export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, RichTextReadOnlyEditorWrapperProps>(
-  ({ anchor, ...props }, ref) => (
+  ({ anchor, workspaceId, ...props }, ref) => (
     <RichTextReadOnlyEditorWithRef
       ref={ref}
       disabledExtensions={[]}
       fileHandler={getReadOnlyEditorFileHandlers({
         anchor,
+        workspaceId,
       })}
       mentionHandler={{
         renderComponent: (props) => <EditorMentionsRoot {...props} />,

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

@@ -90,7 +90,7 @@ export const AddComment: React.FC<Props> = observer((props) => {
               onChange={(comment_json, comment_html) => onChange(comment_html)}
               isSubmitting={isSubmitting}
               placeholder="Add comment..."
-              uploadFile={async (file) => {
+              uploadFile={async (blockId, file) => {
                 const { asset_id } = await uploadCommentAsset(file, anchor);
                 setUploadAssetIds((prev) => [...prev, asset_id]);
                 return asset_id;

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

@@ -112,7 +112,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                     onChange={(comment_json, comment_html) => onChange(comment_html)}
                     isSubmitting={isSubmitting}
                     showSubmitButton={false}
-                    uploadFile={async (file) => {
+                    uploadFile={async (blockId, file) => {
                       const { asset_id } = await uploadCommentAsset(file, anchor, comment.id);
                       return asset_id;
                     }}
@@ -140,6 +140,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
           <div className={`${isEditing ? "hidden" : ""}`}>
             <LiteTextReadOnlyEditor
               anchor={anchor}
+              workspaceId={workspaceID?.toString() ?? ""}
               ref={showEditorRef}
               id={comment.id}
               initialValue={comment.comment_html}

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

@@ -13,9 +13,9 @@ type Props = {
 
 export const PeekOverviewIssueDetails: React.FC<Props> = observer((props) => {
   const { anchor, issueDetails } = props;
-
-  const { project_details } = usePublish(anchor);
-
+  // store hooks
+  const { project_details, workspace: workspaceID } = usePublish(anchor);
+  // derived values
   const description = issueDetails.description_html;
 
   return (
@@ -35,6 +35,7 @@ export const PeekOverviewIssueDetails: React.FC<Props> = observer((props) => {
               ? "<p></p>"
               : description
           }
+          workspaceId={workspaceID?.toString() ?? ""}
         />
       )}
       <IssueReactions anchor={anchor} />

space/helpers/editor.helper.ts

@@ -1,6 +1,6 @@
 // plane internal
 import { MAX_FILE_SIZE } from "@plane/constants";
-import { TFileHandler } from "@plane/editor";
+import { TFileHandler, TReadOnlyFileHandler } from "@plane/editor";
 import { SitesFileService } from "@plane/services";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
@@ -18,10 +18,35 @@ export const getEditorAssetSrc = (anchor: string, assetId: string): string | und
 
 type TArgs = {
   anchor: string;
-  uploadFile: (file: File) => Promise<string>;
+  uploadFile: TFileHandler["upload"];
   workspaceId: string;
 };
 
+/**
+ * @description this function returns the file handler required by the read-only editors
+ */
+export const getReadOnlyEditorFileHandlers = (args: Pick<TArgs, "anchor" | "workspaceId">): TReadOnlyFileHandler => {
+  const { anchor, workspaceId } = args;
+
+  return {
+    getAssetSrc: async (path) => {
+      if (!path) return "";
+      if (path?.startsWith("http")) {
+        return path;
+      } else {
+        return getEditorAssetSrc(anchor, path) ?? "";
+      }
+    },
+    restore: async (src: string) => {
+      if (src?.startsWith("http")) {
+        await sitesFileService.restoreOldEditorAsset(workspaceId, src);
+      } else {
+        await sitesFileService.restoreNewAsset(anchor, src);
+      }
+    },
+  };
+};
+
 /**
  * @description this function returns the file handler required by the editors
  * @param {TArgs} args
@@ -30,14 +55,11 @@ export const getEditorFileHandlers = (args: TArgs): TFileHandler => {
   const { anchor, uploadFile, workspaceId } = args;
 
   return {
-    getAssetSrc: async (path) => {
-      if (!path) return "";
-      if (path?.startsWith("http")) {
-        return path;
-      } else {
-        return getEditorAssetSrc(anchor, path) ?? "";
-      }
-    },
+    ...getReadOnlyEditorFileHandlers({
+      anchor,
+      workspaceId,
+    }),
+    assetsUploadStatus: {},
     upload: uploadFile,
     delete: async (src: string) => {
       if (src?.startsWith("http")) {
@@ -46,36 +68,9 @@ export const getEditorFileHandlers = (args: TArgs): TFileHandler => {
         await sitesFileService.deleteNewAsset(getEditorAssetSrc(anchor, src) ?? "");
       }
     },
-    restore: async (src: string) => {
-      if (src?.startsWith("http")) {
-        await sitesFileService.restoreOldEditorAsset(workspaceId, src);
-      } else {
-        await sitesFileService.restoreNewAsset(anchor, src);
-      }
-    },
     cancel: sitesFileService.cancelUpload,
     validation: {
       maxFileSize: MAX_FILE_SIZE,
     },
   };
 };
-
-/**
- * @description this function returns the file handler required by the read-only editors
- */
-export const getReadOnlyEditorFileHandlers = (
-  args: Pick<TArgs, "anchor">
-): { getAssetSrc: TFileHandler["getAssetSrc"] } => {
-  const { anchor } = args;
-
-  return {
-    getAssetSrc: async (path) => {
-      if (!path) return "";
-      if (path?.startsWith("http")) {
-        return path;
-      } else {
-        return getEditorAssetSrc(anchor, path) ?? "";
-      }
-    },
-  };
-};

web/app/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Briefcase } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs, LayersIcon, Header, Logo } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common";
+import { IssueDetailQuickActions } from "@/components/issues";
+// hooks
+import { useIssueDetail, useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+export const ProjectIssueDetailsHeader = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, workItem } = useParams();
+  // store hooks
+  const { t } = useTranslation();
+  const { getProjectById, loader } = useProject();
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier },
+  } = useIssueDetail();
+  // derived values
+  const issueId = getIssueIdByIdentifier(workItem?.toString());
+  const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
+  const projectId = issueDetails ? issueDetails?.project_id : undefined;
+  const projectDetails = projectId ? getProjectById(projectId?.toString()) : undefined;
+
+  if (!workspaceSlug || !projectId || !issueId) return null;
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <div>
+          <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  label={projectDetails?.name ?? "Project"}
+                  icon={
+                    projectDetails ? (
+                      projectDetails && (
+                        <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                          <Logo logo={projectDetails?.logo_props} size={16} />
+                        </span>
+                      )
+                    ) : (
+                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                        <Briefcase className="h-4 w-4" />
+                      </span>
+                    )
+                  }
+                />
+              }
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/issues`}
+                  label={t("common.work_items")}
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  label={
+                    projectDetails && issueDetails ? `${projectDetails.identifier}-${issueDetails.sequence_id}` : ""
+                  }
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      </Header.LeftItem>
+      <Header.RightItem>
+        {projectId && issueId && (
+          <IssueDetailQuickActions
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={projectId?.toString()}
+            issueId={issueId?.toString()}
+          />
+        )}
+      </Header.RightItem>
+    </Header>
+  );
+});

web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Loader } from "@plane/ui";
+// components
+import { EmptyState } from "@/components/common";
+import { PageHead } from "@/components/core";
+import { IssueDetailRoot } from "@/components/issues";
+// hooks
+import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
+// assets
+import { useAppRouter } from "@/hooks/use-app-router";
+import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp";
+import emptyIssueLight from "@/public/empty-state/search/issues-light.webp";
+
+const IssueDetailsPage = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, workItem } = useParams();
+  // hooks
+  const { resolvedTheme } = useTheme();
+  // store hooks
+  const { t } = useTranslation();
+  const {
+    fetchIssueWithIdentifier,
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { getProjectById } = useProject();
+  const { toggleIssueDetailSidebar, issueDetailSidebarCollapsed } = useAppTheme();
+
+  const projectIdentifier = workItem?.toString().split("-")[0];
+  const sequence_id = workItem?.toString().split("-")[1];
+
+  // fetching issue details
+  const { data, isLoading, error } = useSWR(
+    workspaceSlug && workItem ? `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}` : null,
+    workspaceSlug && workItem
+      ? () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
+      : null
+  );
+  const issueId = data?.id;
+  const projectId = data?.project_id;
+  // derived values
+  const issue = getIssueById(issueId?.toString() || "") || undefined;
+  const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
+  const issueLoader = !issue || isLoading;
+  const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
+
+  useEffect(() => {
+    const handleToggleIssueDetailSidebar = () => {
+      if (window && window.innerWidth < 768) {
+        toggleIssueDetailSidebar(true);
+      }
+      if (window && issueDetailSidebarCollapsed && window.innerWidth >= 768) {
+        toggleIssueDetailSidebar(false);
+      }
+    };
+    window.addEventListener("resize", handleToggleIssueDetailSidebar);
+    handleToggleIssueDetailSidebar();
+    return () => window.removeEventListener("resize", handleToggleIssueDetailSidebar);
+  }, [issueDetailSidebarCollapsed, toggleIssueDetailSidebar]);
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      {error ? (
+        <EmptyState
+          image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
+          title={t("issue.empty_state.issue_detail.title")}
+          description={t("issue.empty_state.issue_detail.description")}
+          primaryButton={{
+            text: t("issue.empty_state.issue_detail.primary_button.text"),
+            onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues/`),
+          }}
+        />
+      ) : issueLoader ? (
+        <Loader className="flex h-full gap-5 p-5">
+          <div className="basis-2/3 space-y-2">
+            <Loader.Item height="30px" width="40%" />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="40%" />
+          </div>
+          <div className="basis-1/3 space-y-3">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </div>
+        </Loader>
+      ) : (
+        workspaceSlug &&
+        projectId &&
+        issueId && (
+          <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
+            <IssueDetailRoot
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={projectId.toString()}
+              issueId={issueId.toString()}
+            />
+          </ProjectAuthWrapper>
+        )
+      )}
+    </>
+  );
+});
+
+export default IssueDetailsPage;

web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { Plus, Search } from "lucide-react";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { CreateProjectModal } from "@/components/project";
+import { SidebarProjectsListItem } from "@/components/workspace";
+// hooks
+import { orderJoinedProjects } from "@/helpers/project.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+import { useAppTheme, useProject, useUserPermissions } from "@/hooks/store";
+import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
+import { TProject } from "@/plane-web/types";
+
+export const ExtendedProjectSidebar = observer(() => {
+  // refs
+  const extendedProjectSidebarRef = useRef<HTMLDivElement | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  // states
+  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
+  // routers
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { t } = useTranslation();
+  const { sidebarCollapsed, extendedProjectSidebarCollapsed, toggleExtendedProjectSidebar } = useAppTheme();
+  const { getPartialProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
+  const { allowPermissions } = useUserPermissions();
+
+  const handleOnProjectDrop = (
+    sourceId: string | undefined,
+    destinationId: string | undefined,
+    shouldDropAtEnd: boolean
+  ) => {
+    if (!sourceId || !destinationId || !workspaceSlug) return;
+    if (sourceId === destinationId) return;
+
+    const joinedProjectsList: TProject[] = [];
+    joinedProjects.map((projectId) => {
+      const projectDetails = getPartialProjectById(projectId);
+      if (projectDetails) joinedProjectsList.push(projectDetails);
+    });
+
+    const sourceIndex = joinedProjects.indexOf(sourceId);
+    const destinationIndex = shouldDropAtEnd ? joinedProjects.length : joinedProjects.indexOf(destinationId);
+
+    if (joinedProjectsList.length <= 0) return;
+
+    const updatedSortOrder = orderJoinedProjects(sourceIndex, destinationIndex, sourceId, joinedProjectsList);
+    if (updatedSortOrder != undefined)
+      updateProjectView(workspaceSlug.toString(), sourceId, { sort_order: updatedSortOrder }).catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("error"),
+          message: t("something_went_wrong"),
+        });
+      });
+  };
+
+  // filter projects based on search query
+  const filteredProjects = joinedProjects.filter((projectId) => {
+    const project = getPartialProjectById(projectId);
+    if (!project) return false;
+    return project.name.toLowerCase().includes(searchQuery.toLowerCase()) || project.identifier.includes(searchQuery);
+  });
+
+  // auth
+  const isAuthorizedUser = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  useExtendedSidebarOutsideClickDetector(
+    extendedProjectSidebarRef,
+    () => {
+      if (!isProjectModalOpen) {
+        toggleExtendedProjectSidebar(false);
+      }
+    },
+    "extended-project-sidebar-toggle"
+  );
+
+  const handleCopyText = (projectId: string) => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("link_copied"),
+        message: t("project_link_copied_to_clipboard"),
+      });
+    });
+  };
+  return (
+    <>
+      {workspaceSlug && (
+        <CreateProjectModal
+          isOpen={isProjectModalOpen}
+          onClose={() => setIsProjectModalOpen(false)}
+          setToFavorite={false}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      )}
+      <div
+        ref={extendedProjectSidebarRef}
+        className={cn(
+          "fixed top-0 h-full z-[19] flex flex-col gap-2 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 shadow-md",
+          {
+            "translate-x-0 opacity-100 pointer-events-auto": extendedProjectSidebarCollapsed,
+            "-translate-x-full opacity-0 pointer-events-none": !extendedProjectSidebarCollapsed,
+            "left-[70px]": sidebarCollapsed,
+            "left-[250px]": !sidebarCollapsed,
+          }
+        )}
+      >
+        <div className="flex flex-col gap-1 w-full sticky top-4 pt-0 px-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-custom-text-300 py-1.5">Projects</span>
+            {isAuthorizedUser && (
+              <Tooltip tooltipHeading={t("create_project")} tooltipContent="">
+                <button
+                  type="button"
+                  className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
+                  onClick={() => {
+                    setIsProjectModalOpen(true);
+                  }}
+                >
+                  <Plus className="size-3" />
+                </button>
+              </Tooltip>
+            )}
+          </div>
+          <div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1 w-full">
+            <Search className="h-3.5 w-3.5 text-custom-text-400" />
+            <input
+              className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
+              placeholder={t("search")}
+              value={searchQuery}
+              autoFocus
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+        </div>
+        <div className="flex flex-col gap-0.5 overflow-x-hidden overflow-y-auto vertical-scrollbar scrollbar-sm flex-grow mt-4 px-4">
+          {filteredProjects.map((projectId, index) => (
+            <SidebarProjectsListItem
+              key={projectId}
+              projectId={projectId}
+              handleCopyText={() => handleCopyText(projectId)}
+              projectListType={"JOINED"}
+              disableDrag={false}
+              disableDrop={false}
+              isLastChild={index === joinedProjects.length - 1}
+              handleOnProjectDrop={handleOnProjectDrop}
+              renderInExtendedSidebar
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+});

web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import React, { useMemo, useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserWorkspaceRoles, WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS } from "@plane/constants";
+import { cn } from "@plane/utils";
+// hooks
+import { useAppTheme, useWorkspace } from "@/hooks/store";
+import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
+// plane-web imports
+import { ExtendedSidebarItem } from "@/plane-web/components/workspace/sidebar";
+
+export const ExtendedAppSidebar = observer(() => {
+  // refs
+  const extendedSidebarRef = useRef<HTMLDivElement | null>(null);
+  // routers
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { sidebarCollapsed, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
+  const { updateSidebarPreference, getNavigationPreferences } = useWorkspace();
+
+  // derived values
+  const currentWorkspaceNavigationPreferences = getNavigationPreferences(workspaceSlug.toString());
+
+  const sortedNavigationItems = useMemo(
+    () =>
+      WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.map((item) => {
+        const preference = currentWorkspaceNavigationPreferences?.[item.key];
+        return {
+          ...item,
+          sort_order: preference ? preference.sort_order : 0,
+        };
+      }).sort((a, b) => a.sort_order - b.sort_order),
+    [currentWorkspaceNavigationPreferences]
+  );
+
+  const sortedNavigationItemsKeys = sortedNavigationItems.map((item) => item.key);
+
+  const orderNavigationItem = (
+    sourceIndex: number,
+    destinationIndex: number,
+    navigationList: {
+      sort_order: number;
+      key: string;
+      labelTranslationKey: string;
+      href: string;
+      access: EUserWorkspaceRoles[];
+    }[]
+  ): number | undefined => {
+    if (sourceIndex < 0 || destinationIndex < 0 || navigationList.length <= 0) return undefined;
+
+    let updatedSortOrder: number | undefined = undefined;
+    const sortOrderDefaultValue = 10000;
+
+    if (destinationIndex === 0) {
+      // updating project at the top of the project
+      const currentSortOrder = navigationList[destinationIndex].sort_order || 0;
+      updatedSortOrder = currentSortOrder - sortOrderDefaultValue;
+    } else if (destinationIndex === navigationList.length) {
+      // updating project at the bottom of the project
+      const currentSortOrder = navigationList[destinationIndex - 1].sort_order || 0;
+      updatedSortOrder = currentSortOrder + sortOrderDefaultValue;
+    } else {
+      // updating project in the middle of the project
+      const destinationTopProjectSortOrder = navigationList[destinationIndex - 1].sort_order || 0;
+      const destinationBottomProjectSortOrder = navigationList[destinationIndex].sort_order || 0;
+      const updatedValue = (destinationTopProjectSortOrder + destinationBottomProjectSortOrder) / 2;
+      updatedSortOrder = updatedValue;
+    }
+
+    return updatedSortOrder;
+  };
+
+  const handleOnNavigationItemDrop = (
+    sourceId: string | undefined,
+    destinationId: string | undefined,
+    shouldDropAtEnd: boolean
+  ) => {
+    if (!sourceId || !destinationId || !workspaceSlug) return;
+    if (sourceId === destinationId) return;
+
+    const sourceIndex = sortedNavigationItemsKeys.indexOf(sourceId);
+    const destinationIndex = shouldDropAtEnd
+      ? sortedNavigationItemsKeys.length
+      : sortedNavigationItemsKeys.indexOf(destinationId);
+
+    const updatedSortOrder = orderNavigationItem(sourceIndex, destinationIndex, sortedNavigationItems);
+
+    if (updatedSortOrder != undefined)
+      updateSidebarPreference(workspaceSlug.toString(), sourceId, {
+        sort_order: updatedSortOrder,
+      });
+  };
+
+  useExtendedSidebarOutsideClickDetector(
+    extendedSidebarRef,
+    () => toggleExtendedSidebar(false),
+    "extended-sidebar-toggle"
+  );
+
+  return (
+    <div
+      ref={extendedSidebarRef}
+      className={cn(
+        "fixed top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md pb-6",
+        {
+          "translate-x-0 opacity-100 pointer-events-auto": extendedSidebarCollapsed,
+          "-translate-x-full opacity-0 pointer-events-none": !extendedSidebarCollapsed,
+          "left-[70px]": sidebarCollapsed,
+          "left-[250px]": !sidebarCollapsed,
+        }
+      )}
+    >
+      {sortedNavigationItems.map((item, index) => (
+        <ExtendedSidebarItem
+          key={item.key}
+          item={item}
+          isLastChild={index === sortedNavigationItems.length - 1}
+          handleOnNavigationItemDrop={handleOnNavigationItemDrop}
+        />
+      ))}
+    </div>
+  );
+});

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx

@@ -29,7 +29,7 @@ const CycleDetailPage = observer(() => {
   const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
 
   useCyclesDetails({
-    workspaceSlug: workspaceSlug.toString(),
+    workspaceSlug: workspaceSlug?.toString(),
     projectId: projectId.toString(),
     cycleId: cycleId.toString(),
   });

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx

@@ -1,70 +1,44 @@
 "use client";
 
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
+import { redirect, useParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
-// i18n
 import { useTranslation } from "@plane/i18n";
-// ui
-import { Loader } from "@plane/ui";
 // components
-import { EmptyState } from "@/components/common";
-import { PageHead } from "@/components/core";
-import { IssueDetailRoot } from "@/components/issues";
+import { EmptyState, LogoSpinner } from "@/components/common";
 // hooks
-import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
-// assets
 import { useAppRouter } from "@/hooks/use-app-router";
+// assets
 import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp";
 import emptyIssueLight from "@/public/empty-state/search/issues-light.webp";
+// services
+import { IssueService } from "@/services/issue/issue.service";
+
+const issueService = new IssueService();
 
 const IssueDetailsPage = observer(() => {
-  // i18n
-  const { t } = useTranslation();
-  // router
   const router = useAppRouter();
+  const { t } = useTranslation();
   const { workspaceSlug, projectId, issueId } = useParams();
-  // hooks
   const { resolvedTheme } = useTheme();
-  // store hooks
-  const {
-    fetchIssue,
-    issue: { getIssueById },
-  } = useIssueDetail();
-  const { getProjectById } = useProject();
-  const { toggleIssueDetailSidebar, issueDetailSidebarCollapsed } = useAppTheme();
-  // fetching work item details
-  const { isLoading, error } = useSWR(
-    workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_${workspaceSlug}_${projectId}_${issueId}` : null,
+
+  const { data, isLoading, error } = useSWR(
+    workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_META_${workspaceSlug}_${projectId}_${issueId}` : null,
     workspaceSlug && projectId && issueId
-      ? () => fetchIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      ? () => issueService.getIssueMetaFromURL(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
-  // derived values
-  const issue = getIssueById(issueId?.toString() || "") || undefined;
-  const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
-  const issueLoader = !issue || isLoading;
-  const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
 
   useEffect(() => {
-    const handleToggleIssueDetailSidebar = () => {
-      if (window && window.innerWidth < 768) {
-        toggleIssueDetailSidebar(true);
-      }
-      if (window && issueDetailSidebarCollapsed && window.innerWidth >= 768) {
-        toggleIssueDetailSidebar(false);
-      }
-    };
-    window.addEventListener("resize", handleToggleIssueDetailSidebar);
-    handleToggleIssueDetailSidebar();
-    return () => window.removeEventListener("resize", handleToggleIssueDetailSidebar);
-  }, [issueDetailSidebarCollapsed, toggleIssueDetailSidebar]);
+    if (data) {
+      redirect(`/${workspaceSlug}/browse/${data.project_identifier}-${data.sequence_id}`);
+    }
+  }, [workspaceSlug, data]);
 
   return (
-    <>
-      <PageHead title={pageTitle} />
+    <div className="flex items-center justify-center size-full">
       {error ? (
         <EmptyState
           image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
@@ -72,36 +46,17 @@ const IssueDetailsPage = observer(() => {
           description={t("issue.empty_state.issue_detail.description")}
           primaryButton={{
             text: t("issue.empty_state.issue_detail.primary_button.text"),
-            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
+            onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues/`),
           }}
         />
-      ) : issueLoader ? (
-        <Loader className="flex h-full gap-5 p-5">
-          <div className="basis-2/3 space-y-2">
-            <Loader.Item height="30px" width="40%" />
-            <Loader.Item height="15px" width="60%" />
-            <Loader.Item height="15px" width="60%" />
-            <Loader.Item height="15px" width="40%" />
-          </div>
-          <div className="basis-1/3 space-y-3">
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-          </div>
-        </Loader>
+      ) : isLoading ? (
+        <>
+          <LogoSpinner />
+        </>
       ) : (
-        workspaceSlug &&
-        projectId &&
-        issueId && (
-          <IssueDetailRoot
-            workspaceSlug={workspaceSlug.toString()}
-            projectId={projectId.toString()}
-            issueId={issueId.toString()}
-          />
-        )
+        <></>
       )}
-    </>
+    </div>
   );
 });
 

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-// i18n
-import { useTranslation } from "@plane/i18n";
-// ui
-import { Breadcrumbs, LayersIcon, Header } from "@plane/ui";
-// components
-import { BreadcrumbLink } from "@/components/common";
-import { IssueDetailQuickActions } from "@/components/issues";
-// hooks
-import { useIssueDetail, useProject } from "@/hooks/store";
-import { useAppRouter } from "@/hooks/use-app-router";
-// plane web
-import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
-
-export const ProjectIssueDetailsHeader = observer(() => {
-  const { t } = useTranslation();
-  // router
-  const router = useAppRouter();
-  const { workspaceSlug, projectId, issueId } = useParams();
-  // store hooks
-  const { currentProjectDetails, loader } = useProject();
-  const {
-    issue: { getIssueById },
-  } = useIssueDetail();
-  // derived values
-  const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
-
-  return (
-    <Header>
-      <Header.LeftItem>
-        <div>
-          <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
-            <ProjectBreadcrumb />
-
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${projectId}/issues`}
-                  label={t("issue.label", { count: 2 })} // count is for pluralization
-                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
-            />
-
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={
-                    currentProjectDetails && issueDetails
-                      ? `${currentProjectDetails.identifier}-${issueDetails.sequence_id}`
-                      : ""
-                  }
-                />
-              }
-            />
-          </Breadcrumbs>
-        </div>
-      </Header.LeftItem>
-      <Header.RightItem>
-        <IssueDetailQuickActions
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
-          issueId={issueId.toString()}
-        />
-      </Header.RightItem>
-    </Header>
-  );
-});

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane types
-import { TSearchEntityRequestPayload } from "@plane/types";
+import { TSearchEntityRequestPayload, TWebhookConnectionQueryParams } from "@plane/types";
 import { EFileAssetType } from "@plane/types/src/enums";
 // plane ui
 import { getButtonStyling } from "@plane/ui";
@@ -17,31 +17,32 @@ import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { IssuePeekOverview } from "@/components/issues";
 import { PageRoot, TPageRootConfig, TPageRootHandlers } from "@/components/pages";
-// helpers
-import { getEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
-import { useProjectPage, useProjectPages, useWorkspace } from "@/hooks/store";
+import { useEditorConfig } from "@/hooks/editor";
+import { useEditorAsset, useWorkspace } from "@/hooks/store";
 // plane web hooks
-import { useFileSize } from "@/plane-web/hooks/use-file-size";
+import { EPageStoreType, usePage, usePageStore } from "@/plane-web/hooks/store";
 // plane web services
 import { WorkspaceService } from "@/plane-web/services";
 // services
-import { FileService } from "@/services/file.service";
 import { ProjectPageService, ProjectPageVersionService } from "@/services/page";
 const workspaceService = new WorkspaceService();
-const fileService = new FileService();
 const projectPageService = new ProjectPageService();
 const projectPageVersionService = new ProjectPageVersionService();
 
 const PageDetailsPage = observer(() => {
   const { workspaceSlug, projectId, pageId } = useParams();
   // store hooks
-  const { createPage, getPageById } = useProjectPages();
-  const page = useProjectPage(pageId?.toString() ?? "");
+  const { createPage, fetchPageDetails } = usePageStore(EPageStoreType.PROJECT);
+  const page = usePage({
+    pageId: pageId?.toString() ?? "",
+    storeType: EPageStoreType.PROJECT,
+  });
   const { getWorkspaceBySlug } = useWorkspace();
+  const { uploadEditorAsset } = useEditorAsset();
   // derived values
   const workspaceId = workspaceSlug ? (getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "") : "";
-  const { canCurrentUserAccessPage, id, name, updateDescription } = page;
+  const { canCurrentUserAccessPage, id, name, updateDescription } = page ?? {};
   // entity search handler
   const fetchEntityCallback = useCallback(
     async (payload: TSearchEntityRequestPayload) =>
@@ -51,13 +52,13 @@ const PageDetailsPage = observer(() => {
       }),
     [projectId, workspaceSlug]
   );
-  // file size
-  const { maxFileSize } = useFileSize();
+  // editor config
+  const { getEditorFileHandlers } = useEditorConfig();
   // fetch page details
   const { error: pageDetailsError } = useSWR(
     workspaceSlug && projectId && pageId ? `PAGE_DETAILS_${pageId}` : null,
     workspaceSlug && projectId && pageId
-      ? () => getPageById(workspaceSlug?.toString(), projectId?.toString(), pageId.toString())
+      ? () => fetchPageDetails(workspaceSlug?.toString(), projectId?.toString(), pageId.toString())
       : null,
     {
       revalidateIfStale: true,
@@ -74,8 +75,8 @@ const PageDetailsPage = observer(() => {
         return await projectPageVersionService.fetchAllVersions(workspaceSlug.toString(), projectId.toString(), pageId);
       },
       fetchDescriptionBinary: async () => {
-        if (!workspaceSlug || !projectId || !page.id) return;
-        return await projectPageService.fetchDescriptionBinary(workspaceSlug.toString(), projectId.toString(), page.id);
+        if (!workspaceSlug || !projectId || !id) return;
+        return await projectPageService.fetchDescriptionBinary(workspaceSlug.toString(), projectId.toString(), id);
       },
       fetchEntity: fetchEntityCallback,
       fetchVersionDetails: async (pageId, versionId) => {
@@ -88,38 +89,42 @@ const PageDetailsPage = observer(() => {
         );
       },
       getRedirectionLink: (pageId) => `/${workspaceSlug}/projects/${projectId}/pages/${pageId}`,
-      updateDescription,
+      updateDescription: updateDescription ?? (async () => {}),
     }),
-    [createPage, fetchEntityCallback, page.id, projectId, updateDescription, workspaceSlug]
+    [createPage, fetchEntityCallback, id, projectId, updateDescription, workspaceSlug]
   );
   // page root config
   const pageRootConfig: TPageRootConfig = useMemo(
     () => ({
       fileHandler: getEditorFileHandlers({
-        maxFileSize,
         projectId: projectId?.toString() ?? "",
-        uploadFile: async (file) => {
-          const { asset_id } = await fileService.uploadProjectAsset(
-            workspaceSlug?.toString() ?? "",
-            projectId?.toString() ?? "",
-            {
+        uploadFile: async (blockId, file) => {
+          const { asset_id } = await uploadEditorAsset({
+            blockId,
+            data: {
               entity_identifier: id ?? "",
               entity_type: EFileAssetType.PAGE_DESCRIPTION,
             },
-            file
-          );
+            file,
+            projectId: projectId?.toString() ?? "",
+            workspaceSlug: workspaceSlug?.toString() ?? "",
+          });
           return asset_id;
         },
         workspaceId,
         workspaceSlug: workspaceSlug?.toString() ?? "",
       }),
-      webhookConnectionParams: {
-        documentType: "project_page",
-        projectId: projectId?.toString() ?? "",
-        workspaceSlug: workspaceSlug?.toString() ?? "",
-      },
     }),
-    [id, maxFileSize, projectId, workspaceId, workspaceSlug]
+    [getEditorFileHandlers, id, projectId, uploadEditorAsset, workspaceId, workspaceSlug]
+  );
+
+  const webhookConnectionParams: TWebhookConnectionQueryParams = useMemo(
+    () => ({
+      documentType: "project_page",
+      projectId: projectId?.toString() ?? "",
+      workspaceSlug: workspaceSlug?.toString() ?? "",
+    }),
+    [projectId, workspaceSlug]
   );
 
   if ((!page || !id) && !pageDetailsError)
@@ -145,6 +150,8 @@ const PageDetailsPage = observer(() => {
       </div>
     );
 
+  if (!page) return null;
+
   return (
     <>
       <PageHead title={name} />
@@ -154,6 +161,8 @@ const PageDetailsPage = observer(() => {
             config={pageRootConfig}
             handlers={pageRootHandlers}
             page={page}
+            storeType={EPageStoreType.PROJECT}
+            webhookConnectionParams={webhookConnectionParams}
             workspaceSlug={workspaceSlug?.toString() ?? ""}
           />
           <IssuePeekOverview />

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx

@@ -15,11 +15,13 @@ import { PageEditInformationPopover } from "@/components/pages";
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getPageName } from "@/helpers/page.helper";
 // hooks
-import { useProjectPage, useProject } from "@/hooks/store";
+import { useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 import { PageDetailsHeaderExtraActions } from "@/plane-web/components/pages";
+// plane web hooks
+import { EPageStoreType, usePage } from "@/plane-web/hooks/store";
 
 export interface IPagesHeaderProps {
   showButton?: boolean;
@@ -32,7 +34,12 @@ export const PageDetailsHeader = observer(() => {
   const [isOpen, setIsOpen] = useState(false);
   // store hooks
   const { currentProjectDetails, loader } = useProject();
-  const page = useProjectPage(pageId?.toString() ?? "");
+  const page = usePage({
+    pageId: pageId?.toString() ?? "",
+    storeType: EPageStoreType.PROJECT,
+  });
+  if (!page) return null;
+  // derived values
   const { name, logo_props, updatePageLogo, isContentEditable } = page;
   // use platform
   const { isMobile } = usePlatformOS();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx

@@ -13,9 +13,11 @@ import { Breadcrumbs, Button, Header, setToast, TOAST_TYPE } from "@plane/ui";
 // helpers
 import { BreadcrumbLink } from "@/components/common";
 // hooks
-import { useEventTracker, useProject, useProjectPages } from "@/hooks/store";
+import { useEventTracker, useProject } from "@/hooks/store";
 // plane web
 import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 
 export const PagesListHeader = observer(() => {
   // states
@@ -27,7 +29,7 @@ export const PagesListHeader = observer(() => {
   const pageType = searchParams.get("type");
   // store hooks
   const { currentProjectDetails, loader } = useProject();
-  const { canCurrentUserCreatePage, createPage } = useProjectPages();
+  const { canCurrentUserCreatePage, createPage } = usePageStore(EPageStoreType.PROJECT);
   const { setTrackElement } = useEventTracker();
   // handle page create
   const handleCreatePage = async () => {

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx

@@ -14,6 +14,8 @@ import { PagesListRoot, PagesListView } from "@/components/pages";
 import { useProject, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 
 const ProjectPagesPage = observer(() => {
   // router
@@ -63,11 +65,12 @@ const ProjectPagesPage = observer(() => {
     <>
       <PageHead title={pageTitle} />
       <PagesListView
-        workspaceSlug={workspaceSlug.toString()}
-        projectId={projectId.toString()}
         pageType={currentPageType()}
+        projectId={projectId.toString()}
+        storeType={EPageStoreType.PROJECT}
+        workspaceSlug={workspaceSlug.toString()}
       >
-        <PagesListRoot pageType={currentPageType()} />
+        <PagesListRoot pageType={currentPageType()} storeType={EPageStoreType.PROJECT} />
       </PagesListView>
     </>
   );

web/app/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx

@@ -1,11 +1,18 @@
 "use client";
 
 import { ReactNode } from "react";
+import { useParams } from "next/navigation";
 // plane web layouts
 import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
 
-const ProjectDetailLayout = ({ children }: { children: ReactNode }) => (
-  <ProjectAuthWrapper>{children}</ProjectAuthWrapper>
-);
+const ProjectDetailLayout = ({ children }: { children: ReactNode }) => {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  return (
+    <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
+      {children}
+    </ProjectAuthWrapper>
+  );
+};
 
 export default ProjectDetailLayout;

web/app/[workspaceSlug]/(projects)/settings/members/page.tsx

@@ -107,7 +107,7 @@ const WorkspaceMembersSettingsPage = observer(() => {
         onSubmit={handleWorkspaceInvite}
       />
       <section
-        className={cn("w-full overflow-y-auto", {
+        className={cn("w-full h-full overflow-y-auto", {
           "opacity-60": !canPerformWorkspaceMemberActions,
         })}
       >

web/app/[workspaceSlug]/(projects)/sidebar.tsx

@@ -5,16 +5,10 @@ import { observer } from "mobx-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 // components
-import {
-  SidebarDropdown,
-  SidebarHelpSection,
-  SidebarProjectsList,
-  SidebarQuickActions,
-  SidebarUserMenu,
-  SidebarWorkspaceMenu,
-} from "@/components/workspace";
-// helpers
+import { SidebarDropdown, SidebarHelpSection, SidebarProjectsList, SidebarQuickActions } from "@/components/workspace";
 import { SidebarFavoritesMenu } from "@/components/workspace/sidebar/favorites/favorites-menu";
+import { SidebarMenuItems } from "@/components/workspace/sidebar/sidebar-menu-items";
+// helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useUserPermissions } from "@/hooks/store";
@@ -23,6 +17,8 @@ import useSize from "@/hooks/use-window-size";
 // plane web components
 import { SidebarAppSwitcher } from "@/plane-web/components/sidebar";
 import { SidebarTeamsList } from "@/plane-web/components/workspace/sidebar/teams-sidebar-list";
+import { ExtendedProjectSidebar } from "./extended-project-sidebar";
+import { ExtendedAppSidebar } from "./extended-sidebar";
 
 export const AppSidebar: FC = observer(() => {
   // store hooks
@@ -55,62 +51,61 @@ export const AppSidebar: FC = observer(() => {
   const isFavoriteEmpty = isEmpty(groupedFavorites);
 
   return (
-    <div
-      className={cn(
-        "fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 w-[250px] md:relative md:ml-0",
-        {
-          "w-[70px] -ml-[250px]": sidebarCollapsed,
-        }
-      )}
-    >
+    <>
       <div
-        ref={ref}
-        className={cn("size-full flex flex-col flex-1 pt-4 pb-0", {
-          "p-2 pt-4": sidebarCollapsed,
-        })}
+        className={cn(
+          "fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 w-[250px] md:relative md:ml-0",
+          {
+            "w-[70px] -ml-[250px]": sidebarCollapsed,
+          }
+        )}
       >
         <div
-          className={cn("px-2", {
-            "px-4": !sidebarCollapsed,
+          ref={ref}
+          className={cn("size-full flex flex-col flex-1 pt-4 pb-0", {
+            "p-2 pt-4": sidebarCollapsed,
           })}
         >
-          {/* Workspace switcher and settings */}
-          <SidebarDropdown />
-          <div className="flex-shrink-0 h-4" />
-          {/* App switcher */}
-          {canPerformWorkspaceMemberActions && <SidebarAppSwitcher />}
-          {/* Quick actions */}
-          <SidebarQuickActions />
-        </div>
-        <hr
-          className={cn("flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1", {
-            "opacity-0": !sidebarCollapsed,
-          })}
-        />
-        <div
-          className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-2 py-0.5", {
-            "vertical-scrollbar px-4": !sidebarCollapsed,
-          })}
-        >
-          {/* User Menu */}
-          <SidebarUserMenu />
-          {/* Workspace Menu */}
-          <SidebarWorkspaceMenu />
+          <div
+            className={cn("px-2", {
+              "px-4": !sidebarCollapsed,
+            })}
+          >
+            {/* Workspace switcher and settings */}
+            <SidebarDropdown />
+            <div className="flex-shrink-0 h-4" />
+            {/* App switcher */}
+            {canPerformWorkspaceMemberActions && <SidebarAppSwitcher />}
+            {/* Quick actions */}
+            <SidebarQuickActions />
+          </div>
           <hr
             className={cn("flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1", {
               "opacity-0": !sidebarCollapsed,
             })}
           />
-          {/* Favorites Menu */}
-          {canPerformWorkspaceMemberActions && !isFavoriteEmpty && <SidebarFavoritesMenu />}
-          {/* Teams List */}
-          <SidebarTeamsList />
-          {/* Projects List */}
-          <SidebarProjectsList />
+          <div
+            className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-2 py-0.5", {
+              "vertical-scrollbar px-4": !sidebarCollapsed,
+            })}
+          >
+            <SidebarMenuItems />
+            {sidebarCollapsed && (
+              <hr className="flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1" />
+            )}
+            {/* Favorites Menu */}
+            {canPerformWorkspaceMemberActions && !isFavoriteEmpty && <SidebarFavoritesMenu />}
+            {/* Teams List */}
+            <SidebarTeamsList />
+            {/* Projects List */}
+            <SidebarProjectsList />
+          </div>
+          {/* Help Section */}
+          <SidebarHelpSection />
         </div>
-        {/* Help Section */}
-        <SidebarHelpSection />
       </div>
-    </div>
+      <ExtendedAppSidebar />
+      <ExtendedProjectSidebar />
+    </>
   );
 });

web/app/invitations/page.tsx

@@ -17,6 +17,7 @@ import type { IWorkspaceMemberInvitation } from "@plane/types";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { EmptyState } from "@/components/common";
+import { WorkspaceLogo } from "@/components/workspace/logo";
 import { USER_WORKSPACES_LIST } from "@/constants/fetch-keys";
 // helpers
 import { truncateText } from "@/helpers/string.helper";
@@ -167,21 +168,11 @@ const UserInvitationsPage = observer(() => {
                         onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
                       >
                         <div className="flex-shrink-0">
-                          <div className="grid h-9 w-9 place-items-center rounded">
-                            {invitation.workspace.logo && invitation.workspace.logo.trim() !== "" ? (
-                              <img
-                                src={invitation.workspace.logo}
-                                height="100%"
-                                width="100%"
-                                className="rounded"
-                                alt={invitation.workspace.name}
-                              />
-                            ) : (
-                              <span className="grid h-9 w-9 place-items-center rounded bg-gray-700 px-3 py-1.5 uppercase text-white">
-                                {invitation.workspace.name[0]}
-                              </span>
-                            )}
-                          </div>
+                          <WorkspaceLogo
+                            logo={invitation.workspace.logo_url}
+                            name={invitation.workspace.name}
+                            classNames="size-9 flex-shrink-0"
+                          />
                         </div>
                         <div className="min-w-0 flex-1">
                           <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>

web/ce/components/command-palette/modals/issue-level.tsx

@@ -1,28 +1,31 @@
+import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
-import useSWR from "swr";
 // components
 import { BulkDeleteIssuesModal } from "@/components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
 // constants
-import { ISSUE_DETAILS } from "@/constants/fetch-keys";
 // hooks
-import { useCommandPalette, useUser } from "@/hooks/store";
+import { useCommandPalette, useIssueDetail, useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useIssuesStore } from "@/hooks/use-issue-layout-store";
-// services
-import { IssueService } from "@/services/issue";
 
-// services
-const issueService = new IssueService();
+export type TIssueLevelModalsProps = {
+  projectId: string | undefined;
+  issueId: string | undefined;
+};
 
-export const IssueLevelModals = observer(() => {
+export const IssueLevelModals: FC<TIssueLevelModalsProps> = observer((props) => {
+  const { projectId, issueId } = props;
   // router
   const pathname = usePathname();
-  const { workspaceSlug, projectId, issueId, cycleId, moduleId } = useParams();
+  const { workspaceSlug, cycleId, moduleId } = useParams();
   const router = useAppRouter();
   // store hooks
   const { data: currentUser } = useUser();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
   const {
     issues: { removeIssue },
   } = useIssuesStore();
@@ -35,15 +38,9 @@ export const IssueLevelModals = observer(() => {
     toggleBulkDeleteIssueModal,
   } = useCommandPalette();
   // derived values
+  const issueDetails = issueId ? getIssueById(issueId) : undefined;
   const isDraftIssue = pathname?.includes("draft-issues") || false;
 
-  const { data: issueDetails } = useSWR(
-    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
-    workspaceSlug && projectId && issueId
-      ? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
-      : null
-  );
-
   return (
     <>
       <CreateUpdateIssueModal

web/ce/components/command-palette/modals/project-level.tsx

@@ -6,6 +6,8 @@ import { CreatePageModal } from "@/components/pages";
 import { CreateUpdateProjectViewModal } from "@/components/views";
 // hooks
 import { useCommandPalette } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 
 export type TProjectLevelModalsProps = {
   workspaceSlug: string;
@@ -53,6 +55,7 @@ export const ProjectLevelModals = observer((props: TProjectLevelModalsProps) =>
         pageAccess={createPageModal.pageAccess}
         handleModalClose={() => toggleCreatePageModal({ isOpen: false })}
         redirectionEnabled
+        storeType={EPageStoreType.PROJECT}
       />
     </>
   );

web/ce/components/common/index.ts

@@ -0,0 +1 @@
+export * from "./subscription";

web/ce/components/common/subscription/index.ts

@@ -0,0 +1 @@
+export * from "./subscription-pill";

web/ce/components/issues/issue-details/index.ts

@@ -2,3 +2,4 @@ export * from "./issue-identifier";
 export * from "./issue-properties-activity";
 export * from "./issue-type-switcher";
 export * from "./issue-type-activity";
+export * from "./parent-select-root";