chore: added description sync for work item and pages

* add sticky external apis

* add created_at sort by to list

* remove select related method from query set

apps/api/plane/api/serializers/__init__.py

@@ -54,4 +54,5 @@ from .asset import (
     FileAssetSerializer,
 )
 from .invite import WorkspaceInviteSerializer
-from .member import ProjectMemberSerializer
+from .member import ProjectMemberSerializer
+from .sticky import StickySerializer

apps/api/plane/api/serializers/sticky.py

@@ -0,0 +1,30 @@
+from rest_framework import serializers
+
+from .base import BaseSerializer
+from plane.db.models import Sticky
+from plane.utils.content_validator import validate_html_content, validate_binary_data
+
+
+class StickySerializer(BaseSerializer):
+    class Meta:
+        model = Sticky
+        fields = "__all__"
+        read_only_fields = ["workspace", "owner"]
+        extra_kwargs = {"name": {"required": False}}
+
+    def validate(self, data):
+        # Validate description content for security
+        if "description_html" in data and data["description_html"]:
+            is_valid, error_msg, sanitized_html = validate_html_content(data["description_html"])
+            if not is_valid:
+                raise serializers.ValidationError({"error": "html content is not valid"})
+            # Update the data with sanitized HTML if available
+            if sanitized_html is not None:
+                data["description_html"] = sanitized_html
+
+        if "description_binary" in data and data["description_binary"]:
+            is_valid, error_msg = validate_binary_data(data["description_binary"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_binary": "Invalid binary data"})
+
+        return data

apps/api/plane/api/urls/__init__.py

@@ -9,6 +9,7 @@ from .state import urlpatterns as state_patterns
 from .user import urlpatterns as user_patterns
 from .work_item import urlpatterns as work_item_patterns
 from .invite import urlpatterns as invite_patterns
+from .sticky import urlpatterns as sticky_patterns
 
 urlpatterns = [
     *asset_patterns,
@@ -22,4 +23,5 @@ urlpatterns = [
     *user_patterns,
     *work_item_patterns,
     *invite_patterns,
+    *sticky_patterns,
 ]

apps/api/plane/api/urls/sticky.py

@@ -0,0 +1,12 @@
+from django.urls import path, include
+from rest_framework.routers import DefaultRouter
+
+from plane.api.views import StickyViewSet
+
+
+router = DefaultRouter()
+router.register(r"stickies", StickyViewSet, basename="workspace-stickies")
+
+urlpatterns = [
+    path("workspaces/<str:slug>/", include(router.urls)),
+]

apps/api/plane/api/views/__init__.py

@@ -54,4 +54,6 @@ from .asset import UserAssetEndpoint, UserServerAssetEndpoint, GenericAssetEndpo
 
 from .user import UserEndpoint
 
-from .invite import WorkspaceInvitationsViewset
+from .invite import WorkspaceInvitationsViewset
+
+from .sticky import StickyViewSet

apps/api/plane/api/views/sticky.py

@@ -0,0 +1,109 @@
+from rest_framework.response import Response
+from rest_framework import status
+
+from plane.api.views.base import BaseViewSet
+from plane.app.permissions import WorkspaceUserPermission
+from plane.db.models import Sticky, Workspace
+from plane.api.serializers import StickySerializer
+
+# OpenAPI imports
+from plane.utils.openapi.decorators import sticky_docs
+
+from drf_spectacular.utils import OpenApiRequest, OpenApiResponse
+from plane.utils.openapi import (
+    STICKY_EXAMPLE,
+    create_paginated_response,
+    DELETED_RESPONSE,
+)
+
+
+class StickyViewSet(BaseViewSet):
+    serializer_class = StickySerializer
+    model = Sticky
+    use_read_replica = True
+    permission_classes = [WorkspaceUserPermission]
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(owner_id=self.request.user.id)
+            .distinct()
+        )
+
+    @sticky_docs(
+        operation_id="create_sticky",
+        summary="Create a new sticky",
+        description="Create a new sticky in the workspace",
+        request=OpenApiRequest(request=StickySerializer),
+        responses={
+            201: OpenApiResponse(description="Sticky created", response=StickySerializer, examples=[STICKY_EXAMPLE])
+        },
+    )
+    def create(self, request, slug):
+        workspace = Workspace.objects.get(slug=slug)
+        serializer = StickySerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(workspace_id=workspace.id, owner_id=request.user.id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    @sticky_docs(
+        operation_id="list_stickies",
+        summary="List stickies",
+        description="List all stickies in the workspace",
+        responses={
+            200: create_paginated_response(
+                StickySerializer, "Sticky", "List of stickies", example_name="List of stickies"
+            )
+        },
+    )
+    def list(self, request, slug):
+        query = request.query_params.get("query", False)
+        stickies = self.get_queryset().order_by("-created_at")
+        if query:
+            stickies = stickies.filter(description_stripped__icontains=query)
+
+        return self.paginate(
+            request=request,
+            queryset=(stickies),
+            on_results=lambda stickies: StickySerializer(stickies, many=True).data,
+            default_per_page=20,
+        )
+
+    @sticky_docs(
+        operation_id="retrieve_sticky",
+        summary="Retrieve a sticky",
+        description="Retrieve a sticky by its ID",
+        responses={200: OpenApiResponse(description="Sticky", response=StickySerializer, examples=[STICKY_EXAMPLE])},
+    )
+    def retrieve(self, request, slug, pk):
+        sticky = self.get_object()
+        return Response(StickySerializer(sticky).data)
+
+    @sticky_docs(
+        operation_id="update_sticky",
+        summary="Update a sticky",
+        description="Update a sticky by its ID",
+        request=OpenApiRequest(request=StickySerializer),
+        responses={200: OpenApiResponse(description="Sticky", response=StickySerializer, examples=[STICKY_EXAMPLE])},
+    )
+    def partial_update(self, request, slug, pk):
+        sticky = self.get_object()
+        serializer = StickySerializer(sticky, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    @sticky_docs(
+        operation_id="delete_sticky",
+        summary="Delete a sticky",
+        description="Delete a sticky by its ID",
+        responses={204: DELETED_RESPONSE},
+    )
+    def destroy(self, request, slug, pk):
+        sticky = self.get_object()
+        sticky.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)

apps/api/plane/app/views/project/base.py

@@ -1,43 +1,44 @@
 # Python imports
-import boto3
-from django.conf import settings
-from django.utils import timezone
 import json
 
+import boto3
+
 # Django imports
-from django.db.models import Exists, F, OuterRef, Prefetch, Q, Subquery
+from django.conf import settings
 from django.core.serializers.json import DjangoJSONEncoder
+from django.db.models import Exists, F, OuterRef, Prefetch, Q, Subquery
+from django.utils import timezone
 
 # Third Party imports
-from rest_framework.response import Response
 from rest_framework import status
 from rest_framework.permissions import AllowAny
+from rest_framework.response import Response
 
 # Module imports
-from plane.app.views.base import BaseViewSet, BaseAPIView
+from plane.app.permissions import ROLE, ProjectMemberPermission, allow_permission
 from plane.app.serializers import (
-    ProjectSerializer,
-    ProjectListSerializer,
     DeployBoardSerializer,
+    ProjectListSerializer,
+    ProjectSerializer,
 )
-
-from plane.app.permissions import ProjectMemberPermission, allow_permission, ROLE
+from plane.app.views.base import BaseAPIView, BaseViewSet
+from plane.bgtasks.recent_visited_task import recent_visited_task
+from plane.bgtasks.webhook_task import model_activity, webhook_activity
 from plane.db.models import (
     UserFavorite,
-    Intake,
     DeployBoard,
+    Intake,
     IssueUserProperty,
     Project,
     ProjectIdentifier,
     ProjectMember,
+    ProjectNetwork,
     State,
     DEFAULT_STATES,
     Workspace,
     WorkspaceMember,
 )
 from plane.utils.cache import cache_response
-from plane.bgtasks.webhook_task import model_activity, webhook_activity
-from plane.bgtasks.recent_visited_task import recent_visited_task
 from plane.utils.exception_logger import log_exception
 from plane.utils.host import base_host
 
@@ -210,19 +211,25 @@ class ProjectViewSet(BaseViewSet):
 
     @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
     def retrieve(self, request, slug, pk):
-        project = (
-            self.get_queryset()
-            .filter(
-                project_projectmember__member=self.request.user,
-                project_projectmember__is_active=True,
-            )
-            .filter(archived_at__isnull=True)
-            .filter(pk=pk)
-        ).first()
+        project = self.get_queryset().filter(archived_at__isnull=True).filter(pk=pk).first()
 
         if project is None:
             return Response({"error": "Project does not exist"}, status=status.HTTP_404_NOT_FOUND)
 
+        member_ids = [str(project_member.member_id) for project_member in project.members_list]
+
+        if str(request.user.id) not in member_ids:
+            if project.network == ProjectNetwork.SECRET.value:
+                return Response(
+                    {"error": "You do not have permission"},
+                    status=status.HTTP_403_FORBIDDEN,
+                )
+            else:
+                return Response(
+                    {"error": "You are not a member of this project"},
+                    status=status.HTTP_409_CONFLICT,
+                )
+
         recent_visited_task.delay(
             slug=slug,
             project_id=pk,

apps/api/plane/app/views/user/base.py

@@ -2,8 +2,6 @@
 import uuid
 import json
 import logging
-import random
-import string
 import secrets
 
 # Django imports
@@ -151,13 +149,7 @@ class UserEndpoint(BaseViewSet):
             # Include user ID to bind the code to the specific user
             cache_key = f"magic_email_update_{user.id}_{new_email}"
             ## Generate a random token
-            token = (
-                "".join(secrets.choice(string.ascii_lowercase) for _ in range(4))
-                + "-"
-                + "".join(secrets.choice(string.ascii_lowercase) for _ in range(4))
-                + "-"
-                + "".join(secrets.choice(string.ascii_lowercase) for _ in range(4))
-            )
+            token = str(secrets.randbelow(900000) + 100000)
             # Store in cache with 10 minute expiration
             cache_data = json.dumps({"token": token})
             cache.set(cache_key, cache_data, timeout=600)

apps/api/plane/authentication/provider/credentials/magic_code.py

@@ -1,8 +1,7 @@
 # Python imports
 import json
 import os
-import random
-import string
+import secrets
 
 
 # Module imports
@@ -50,13 +49,7 @@ class MagicCodeProvider(CredentialAdapter):
 
     def initiate(self):
         ## Generate a random token
-        token = (
-            "".join(random.choices(string.ascii_lowercase, k=4))
-            + "-"
-            + "".join(random.choices(string.ascii_lowercase, k=4))
-            + "-"
-            + "".join(random.choices(string.ascii_lowercase, k=4))
-        )
+        token = str(secrets.randbelow(900000) + 100000)
 
         ri = redis_instance()
 

apps/api/plane/db/management/commands/copy_issue_to_description.py

@@ -0,0 +1,55 @@
+# Django imports
+from django.core.management.base import BaseCommand
+from django.db import transaction
+
+# Module imports
+from plane.db.models import Description
+from plane.db.models import Issue
+
+
+class Command(BaseCommand):
+    help = "Create Description records for existing Issue"
+
+    def handle(self, *args, **kwargs):
+        batch_size = 3000
+        total_processed = 0
+
+        self.stdout.write(self.style.NOTICE("Starting Issue to Description migration..."))
+
+        while True:
+            issues = list(Issue.objects.filter(description_obj_id__isnull=True).order_by("created_at")[:batch_size])
+
+            if not issues:
+                break
+
+            with transaction.atomic():
+                descriptions = [
+                    Description(
+                        created_at=issue.created_at,
+                        updated_at=issue.updated_at,
+                        description_json=issue.description,
+                        description_html=issue.description_html,
+                        description_stripped=issue.description_stripped,
+                        project_id=issue.project_id,
+                        created_by_id=issue.created_by_id,
+                        updated_by_id=issue.updated_by_id,
+                        workspace_id=issue.workspace_id,
+                    )
+                    for issue in issues
+                ]
+
+                created_descriptions = Description.objects.bulk_create(descriptions)
+
+                issues_to_update = []
+                for issue, description in zip(issues, created_descriptions):
+                    issue.description_obj_id = description.id
+                    issues_to_update.append(issue)
+
+                Issue.objects.bulk_update(issues_to_update, ["description_obj_id"])
+
+            total_processed += len(issues)
+            self.stdout.write(self.style.SUCCESS(f"Processed {total_processed} issues..."))
+
+        self.stdout.write(
+            self.style.SUCCESS(f"Successfully copied {total_processed} Issue records to Description table")
+        )

apps/api/plane/db/management/commands/copy_page_to_description.py

@@ -0,0 +1,55 @@
+# Django imports
+from django.core.management.base import BaseCommand
+from django.db import transaction
+
+# Module imports
+from plane.db.models import Description
+from plane.db.models import Page
+
+
+class Command(BaseCommand):
+    help = "Create Description records for existing Page"
+
+    def handle(self, *args, **kwargs):
+        batch_size = 2000
+        total_processed = 0
+
+        self.stdout.write(self.style.NOTICE("Starting Page to Description migration..."))
+
+        while True:
+            pages = list(Page.objects.filter(description_obj_id__isnull=True).order_by("created_at")[:batch_size])
+
+            if not pages:
+                break
+
+            with transaction.atomic():
+                descriptions = [
+                    Description(
+                        created_at=page.created_at,
+                        updated_at=page.updated_at,
+                        description_json=page.description,
+                        description_html=page.description_html,
+                        description_stripped=page.description_stripped,
+                        project_id=None,  # Pages are workspace-level, not project-level
+                        created_by_id=page.created_by_id,
+                        updated_by_id=page.updated_by_id,
+                        workspace_id=page.workspace_id,
+                    )
+                    for page in pages
+                ]
+
+                created_descriptions = Description.objects.bulk_create(descriptions)
+
+                pages_to_update = []
+                for page, description in zip(pages, created_descriptions):
+                    page.description_obj_id = description.id
+                    pages_to_update.append(page)
+
+                Page.objects.bulk_update(pages_to_update, ["description_obj_id"])
+
+            total_processed += len(pages)
+            self.stdout.write(self.style.SUCCESS(f"Processed {total_processed} pages..."))
+
+        self.stdout.write(
+            self.style.SUCCESS(f"Successfully copied {total_processed} Page records to Description table")
+        )

apps/api/plane/db/migrations/0113_issue_description_obj_page_description_obj.py

@@ -0,0 +1,24 @@
+# Generated by Django 4.2.25 on 2025-12-01 10:51
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0112_auto_20251124_0603'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='issue',
+            name='description_obj',
+            field=models.OneToOneField(null=True, on_delete=django.db.models.deletion.CASCADE, related_name='issue_description', to='db.description'),
+        ),
+        migrations.AddField(
+            model_name='page',
+            name='description_obj',
+            field=models.OneToOneField(null=True, on_delete=django.db.models.deletion.CASCADE, related_name='page_description', to='db.description'),
+        ),
+    ]

apps/api/plane/db/models/__init__.py

@@ -52,6 +52,7 @@ from .project import (
     ProjectIdentifier,
     ProjectMember,
     ProjectMemberInvite,
+    ProjectNetwork,
     ProjectPublicMember,
 )
 from .session import Session

apps/api/plane/db/models/issue.py

@@ -105,7 +105,7 @@ class IssueManager(SoftDeletionManager):
         )
 
 
-class Issue(ProjectBaseModel):
+class Issue(ChangeTrackerMixin, ProjectBaseModel):
     PRIORITY_CHOICES = (
         ("urgent", "Urgent"),
         ("high", "High"),
@@ -140,6 +140,9 @@ class Issue(ProjectBaseModel):
     description_html = models.TextField(blank=True, default="<p></p>")
     description_stripped = models.TextField(blank=True, null=True)
     description_binary = models.BinaryField(null=True)
+    description_obj = models.OneToOneField(
+        "db.Description", on_delete=models.CASCADE, related_name="issue_description", null=True
+    )
     priority = models.CharField(
         max_length=30,
         choices=PRIORITY_CHOICES,
@@ -173,6 +176,8 @@ class Issue(ProjectBaseModel):
 
     issue_objects = IssueManager()
 
+    TRACKED_FIELDS = ["description_stripped", "description", "description_html"]
+
     class Meta:
         verbose_name = "Issue"
         verbose_name_plural = "Issues"
@@ -180,6 +185,12 @@ class Issue(ProjectBaseModel):
         ordering = ("-created_at",)
 
     def save(self, *args, **kwargs):
+        """
+        Custom save method for Issue that manages the associated Description model.
+
+        This method handles creation and updates of both the issue and its description in a
+        single atomic transaction to ensure data consistency.
+        """
         if self.state is None:
             try:
                 from plane.db.models import State
@@ -205,7 +216,16 @@ class Issue(ProjectBaseModel):
             except ImportError:
                 pass
 
-        if self._state.adding:
+        # Strip the html tags using html parser
+        self.description_stripped = (
+            None
+            if (self.description_html == "" or self.description_html is None)
+            else strip_tags(self.description_html)
+        )
+
+        is_creating = self._state.adding
+
+        if is_creating:
             with transaction.atomic():
                 # Create a lock for this specific project using an advisory lock
                 # This ensures only one transaction per project can execute this code at a time
@@ -221,12 +241,7 @@ class Issue(ProjectBaseModel):
                         largest=models.Max("sequence")
                     )["largest"]
                     self.sequence_id = last_sequence + 1 if last_sequence else 1
-                    # Strip the html tags using html parser
-                    self.description_stripped = (
-                        None
-                        if (self.description_html == "" or self.description_html is None)
-                        else strip_tags(self.description_html)
-                    )
+
                     largest_sort_order = Issue.objects.filter(project=self.project, state=self.state).aggregate(
                         largest=models.Max("sort_order")
                     )["largest"]
@@ -236,18 +251,60 @@ class Issue(ProjectBaseModel):
                     super(Issue, self).save(*args, **kwargs)
 
                     IssueSequence.objects.create(issue=self, sequence=self.sequence_id, project=self.project)
+
+                    # Create new description for new issue
+                    description_defaults = {
+                        "workspace_id": self.workspace_id,
+                        "project_id": self.project_id,
+                        "created_by_id": self.created_by_id,
+                        "updated_by_id": self.updated_by_id,
+                        "description_stripped": self.description_stripped,
+                        "description_json": self.description,
+                        "description_html": self.description_html,
+                    }
+                    description = Description.objects.create(**description_defaults)
+                    self.description_obj_id = description.id
+                    super(Issue, self).save(update_fields=["description_obj_id"])
                 finally:
                     # Release the lock
                     with connection.cursor() as cursor:
                         cursor.execute("SELECT pg_advisory_unlock(%s)", [lock_key])
         else:
-            # Strip the html tags using html parser
-            self.description_stripped = (
-                None
-                if (self.description_html == "" or self.description_html is None)
-                else strip_tags(self.description_html)
-            )
-            super(Issue, self).save(*args, **kwargs)
+            with transaction.atomic():
+                super(Issue, self).save(*args, **kwargs)
+
+                if not self.description_obj_id:
+                    # Create description if it doesn't exist (for existing issues)
+                    description_defaults = {
+                        "workspace_id": self.workspace_id,
+                        "project_id": self.project_id,
+                        "created_by_id": self.created_by_id,
+                        "updated_by_id": self.updated_by_id,
+                        "description_stripped": self.description_stripped,
+                        "description_json": self.description,
+                        "description_html": self.description_html,
+                    }
+                    description = Description.objects.create(**description_defaults)
+                    self.description_obj_id = description.id
+                    super(Issue, self).save(update_fields=["description_obj_id"])
+                else:
+                    # Update description only if fields changed
+                    field_mapping = {
+                        "description_html": "description_html",
+                        "description_stripped": "description_stripped",
+                        "description": "description_json",
+                    }
+
+                    changed_fields = {
+                        desc_field: getattr(self, issue_field)
+                        for issue_field, desc_field in field_mapping.items()
+                        if self.has_changed(issue_field)
+                    }
+
+                    if changed_fields and self.description_obj_id:
+                        Description.objects.filter(pk=self.description_obj_id).update(
+                            **changed_fields, updated_by_id=self.updated_by_id, updated_at=self.updated_at
+                        )
 
     def __str__(self):
         """Return name of the issue"""

apps/api/plane/db/models/page.py

@@ -4,19 +4,21 @@ from django.conf import settings
 from django.utils import timezone
 
 # Django imports
-from django.db import models
+from django.db import models, transaction
 
 # Module imports
 from plane.utils.html_processor import strip_tags
+from plane.db.mixins import ChangeTrackerMixin
 
 from .base import BaseModel
+from .description import Description
 
 
 def get_view_props():
     return {"full_width": False}
 
 
-class Page(BaseModel):
+class Page(ChangeTrackerMixin, BaseModel):
     PRIVATE_ACCESS = 1
     PUBLIC_ACCESS = 0
     DEFAULT_SORT_ORDER = 65535
@@ -29,6 +31,9 @@ class Page(BaseModel):
     description_binary = models.BinaryField(null=True)
     description_html = models.TextField(blank=True, default="<p></p>")
     description_stripped = models.TextField(blank=True, null=True)
+    description_obj = models.OneToOneField(
+        "db.Description", on_delete=models.CASCADE, related_name="page_description", null=True
+    )
     owned_by = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="pages")
     access = models.PositiveSmallIntegerField(choices=((0, "Public"), (1, "Private")), default=0)
     color = models.CharField(max_length=255, blank=True)
@@ -53,6 +58,8 @@ class Page(BaseModel):
     external_id = models.CharField(max_length=255, null=True, blank=True)
     external_source = models.CharField(max_length=255, null=True, blank=True)
 
+    TRACKED_FIELDS = ["description_stripped", "description", "description_html"]
+
     class Meta:
         verbose_name = "Page"
         verbose_name_plural = "Pages"
@@ -64,13 +71,58 @@ class Page(BaseModel):
         return f"{self.owned_by.email} <{self.name}>"
 
     def save(self, *args, **kwargs):
+        """
+        Custom save method for Page that manages the associated Description model.
+
+        This method handles creation and updates of both the page and its description in a
+        single atomic transaction to ensure data consistency.
+        """
         # Strip the html tags using html parser
         self.description_stripped = (
             None
             if (self.description_html == "" or self.description_html is None)
             else strip_tags(self.description_html)
         )
-        super(Page, self).save(*args, **kwargs)
+
+        is_creating = self._state.adding
+
+        # Prepare description defaults
+        description_defaults = {
+            "workspace_id": self.workspace_id,
+            "project_id": None,
+            "created_by_id": self.created_by_id,
+            "updated_by_id": self.updated_by_id,
+            "description_stripped": self.description_stripped,
+            "description_json": self.description,
+            "description_html": self.description_html,
+        }
+
+        with transaction.atomic():
+            super(Page, self).save(*args, **kwargs)
+
+            if is_creating or not self.description_obj_id:
+                # Create new description for new page
+                description = Description.objects.create(**description_defaults)
+                self.description_obj_id = description.id
+                super(Page, self).save(update_fields=["description_obj_id"])
+            else:
+                # Update description only if fields changed
+                field_mapping = {
+                    "description_html": "description_html",
+                    "description_stripped": "description_stripped",
+                    "description": "description_json",
+                }
+
+                changed_fields = {
+                    desc_field: getattr(self, page_field)
+                    for page_field, desc_field in field_mapping.items()
+                    if self.has_changed(page_field)
+                }
+
+                if changed_fields and self.description_obj_id:
+                    Description.objects.filter(pk=self.description_obj_id).update(
+                        **changed_fields, updated_by_id=self.updated_by_id, updated_at=self.updated_at
+                    )
 
 
 class PageLog(BaseModel):

apps/api/plane/utils/openapi/__init__.py

@@ -140,6 +140,7 @@ from .examples import (
     WORKSPACE_MEMBER_EXAMPLE,
     PROJECT_MEMBER_EXAMPLE,
     CYCLE_ISSUE_EXAMPLE,
+    STICKY_EXAMPLE,
 )
 
 # Helper decorators
@@ -292,6 +293,7 @@ __all__ = [
     "WORKSPACE_MEMBER_EXAMPLE",
     "PROJECT_MEMBER_EXAMPLE",
     "CYCLE_ISSUE_EXAMPLE",
+    "STICKY_EXAMPLE",
     # Decorators
     "workspace_docs",
     "project_docs",

apps/api/plane/utils/openapi/decorators.py

@@ -262,3 +262,18 @@ def state_docs(**kwargs):
     }
 
     return extend_schema(**_merge_schema_options(defaults, kwargs))
+
+def sticky_docs(**kwargs):
+    """Decorator for sticky management endpoints"""
+    defaults = {
+        "tags": ["Stickies"],
+        "summary": "Endpoints for sticky create/update/delete and fetch sticky details",
+        "parameters": [WORKSPACE_SLUG_PARAMETER],
+        "responses": {
+            401: UNAUTHORIZED_RESPONSE,
+            403: FORBIDDEN_RESPONSE,
+            404: NOT_FOUND_RESPONSE,
+        },
+    }
+
+    return extend_schema(**_merge_schema_options(defaults, kwargs))

apps/api/plane/utils/openapi/examples.py

@@ -672,6 +672,15 @@ CYCLE_ISSUE_EXAMPLE = OpenApiExample(
     },
 )
 
+STICKY_EXAMPLE = OpenApiExample(
+    name="Sticky",
+    value={
+        "id": "550e8400-e29b-41d4-a716-446655440000",
+        "name": "Sticky 1",
+        "description_html": "<p>Sticky 1 description</p>",
+        "created_at": "2024-01-01T10:30:00Z",
+    },
+)
 
 # Sample data for different entity types
 SAMPLE_ISSUE = {
@@ -781,6 +790,13 @@ SAMPLE_CYCLE_ISSUE = {
     "created_at": "2024-01-01T10:30:00Z",
 }
 
+SAMPLE_STICKY = {
+    "id": "550e8400-e29b-41d4-a716-446655440000",
+    "name": "Sticky 1",
+    "description_html": "<p>Sticky 1 description</p>",
+    "created_at": "2024-01-01T10:30:00Z",
+}
+
 # Mapping of schema types to sample data
 SCHEMA_EXAMPLES = {
     "Issue": SAMPLE_ISSUE,
@@ -795,6 +811,7 @@ SCHEMA_EXAMPLES = {
     "Activity": SAMPLE_ACTIVITY,
     "Intake": SAMPLE_INTAKE,
     "CycleIssue": SAMPLE_CYCLE_ISSUE,
+    "Sticky": SAMPLE_STICKY,
 }
 
 

apps/live/src/extensions/database.ts

@@ -27,17 +27,6 @@ const fetchDocument = async ({ context, documentName: pageId, instance }: FetchP
       const pageDetails = await service.fetchDetails(pageId);
       const convertedBinaryData = getBinaryDataFromDocumentEditorHTMLString(pageDetails.description_html ?? "<p></p>");
       if (convertedBinaryData) {
-        // save the converted binary data back to the database
-        const { contentBinaryEncoded, contentHTML, contentJSON } = getAllDocumentFormatsFromDocumentEditorBinaryData(
-          convertedBinaryData,
-          true
-        );
-        const payload = {
-          description_binary: contentBinaryEncoded,
-          description_html: contentHTML,
-          description: contentJSON,
-        };
-        await service.updateDescriptionBinary(pageId, payload);
         return convertedBinaryData;
       }
     }
@@ -63,10 +52,8 @@ const storeDocument = async ({
   try {
     const service = getPageService(context.documentType, context);
     // convert binary data to all formats
-    const { contentBinaryEncoded, contentHTML, contentJSON } = getAllDocumentFormatsFromDocumentEditorBinaryData(
-      pageBinaryData,
-      true
-    );
+    const { contentBinaryEncoded, contentHTML, contentJSON } =
+      getAllDocumentFormatsFromDocumentEditorBinaryData(pageBinaryData);
     // create payload
     const payload = {
       description_binary: contentBinaryEncoded,

apps/live/src/extensions/title-sync.ts

@@ -1,176 +0,0 @@
-// hocuspocus
-import type { Extension, Hocuspocus, Document } from "@hocuspocus/server";
-import { TiptapTransformer } from "@hocuspocus/transformer";
-import type * as Y from "yjs";
-// editor extensions
-import { TITLE_EDITOR_EXTENSIONS, createRealtimeEvent } from "@plane/editor";
-import { logger } from "@plane/logger";
-import { AppError } from "@/lib/errors";
-// helpers
-import { getPageService } from "@/services/page/handler";
-import type { HocusPocusServerContext, OnLoadDocumentPayloadWithContext } from "@/types";
-import { generateTitleProsemirrorJson } from "@/utils";
-import { broadcastMessageToPage } from "@/utils/broadcast-message";
-import { TitleUpdateManager } from "./title-update/title-update-manager";
-import { extractTextFromHTML } from "./title-update/title-utils";
-
-/**
- * Hocuspocus extension for synchronizing document titles
- */
-export class TitleSyncExtension implements Extension {
-  // Maps document names to their observers and update managers
-  private titleObservers: Map<string, (events: Y.YEvent<any>[]) => void> = new Map();
-  private titleUpdateManagers: Map<string, TitleUpdateManager> = new Map();
-  // Store minimal data needed for each document's title observer (prevents closure memory leaks)
-  private titleObserverData: Map<
-    string,
-    {
-      parentId?: string | null;
-      userId: string;
-      workspaceSlug: string | null;
-      instance: Hocuspocus;
-    }
-  > = new Map();
-
-  /**
-   * Handle document loading - migrate old titles if needed
-   */
-  async onLoadDocument({ context, document, documentName }: OnLoadDocumentPayloadWithContext) {
-    try {
-      // initially for on demand migration of old titles to a new title field
-      // in the yjs binary
-      if (document.isEmpty("title")) {
-        const service = getPageService(context.documentType, context);
-        // const title = await service.fe
-        const title = (await service.fetchDetails?.(documentName)).name;
-        if (title == null) return;
-        const titleField = TiptapTransformer.toYdoc(
-          generateTitleProsemirrorJson(title),
-          "title",
-          // editor
-          TITLE_EDITOR_EXTENSIONS as any
-        );
-        document.merge(titleField);
-      }
-    } catch (error) {
-      const appError = new AppError(error, {
-        context: { operation: "onLoadDocument", documentName },
-      });
-      logger.error("Error loading document title", appError);
-    }
-  }
-  /**
-   * Set up title synchronization for a document after it's loaded
-   */
-  async afterLoadDocument({
-    document,
-    documentName,
-    context,
-    instance,
-  }: {
-    document: Document;
-    documentName: string;
-    context: HocusPocusServerContext;
-    instance: Hocuspocus;
-  }) {
-    // Create a title update manager for this document
-    const updateManager = new TitleUpdateManager(documentName, context);
-
-    // Store the manager
-    this.titleUpdateManagers.set(documentName, updateManager);
-
-    // Store minimal data needed for the observer (prevents closure memory leak)
-    this.titleObserverData.set(documentName, {
-      parentId: context.parentId,
-      userId: context.userId,
-      workspaceSlug: context.workspaceSlug,
-      instance: instance,
-    });
-
-    // Create observer using bound method to avoid closure capturing heavy objects
-    const titleObserver = this.handleTitleChange.bind(this, documentName);
-
-    // Observe the title field
-    document.getXmlFragment("title").observeDeep(titleObserver);
-    this.titleObservers.set(documentName, titleObserver);
-  }
-
-  /**
-   * Handle title changes for a document
-   * This is a separate method to avoid closure memory leaks
-   */
-  private handleTitleChange(documentName: string, events: Y.YEvent<any>[]) {
-    let title = "";
-    events.forEach((event) => {
-      title = extractTextFromHTML(event.currentTarget.toJSON());
-    });
-
-    // Get the manager for this document
-    const manager = this.titleUpdateManagers.get(documentName);
-
-    // Get the stored data for this document
-    const data = this.titleObserverData.get(documentName);
-
-    // Broadcast to parent page if it exists
-    if (data?.parentId && data.workspaceSlug && data.instance) {
-      const event = createRealtimeEvent({
-        user_id: data.userId,
-        workspace_slug: data.workspaceSlug,
-        action: "property_updated",
-        page_id: documentName,
-        data: { name: title },
-        descendants_ids: [],
-      });
-
-      // Use the instance from stored data (guaranteed to be set)
-      broadcastMessageToPage(data.instance, data.parentId, event);
-    }
-
-    // Schedule the title update
-    if (manager) {
-      manager.scheduleUpdate(title);
-    }
-  }
-
-  /**
-   * Force save title before unloading the document
-   */
-  async beforeUnloadDocument({ documentName }: { documentName: string }) {
-    const updateManager = this.titleUpdateManagers.get(documentName);
-    if (updateManager) {
-      // Force immediate save and wait for it to complete
-      await updateManager.forceSave();
-      // Clean up the manager
-      this.titleUpdateManagers.delete(documentName);
-    }
-  }
-
-  /**
-   * Remove observers after document unload
-   */
-  async afterUnloadDocument({ documentName, document }: { documentName: string; document?: Document }) {
-    // Clean up observer when document is unloaded
-    const observer = this.titleObservers.get(documentName);
-    if (observer) {
-      // unregister observer from Y.js document to prevent memory leak
-      if (document) {
-        try {
-          document.getXmlFragment("title").unobserveDeep(observer);
-        } catch (error) {
-          logger.error("Failed to unobserve title field", new AppError(error, { context: { documentName } }));
-        }
-      }
-      this.titleObservers.delete(documentName);
-    }
-
-    // Clean up the observer data map to prevent memory leak
-    this.titleObserverData.delete(documentName);
-
-    // Ensure manager is cleaned up if beforeUnloadDocument somehow didn't run
-    if (this.titleUpdateManagers.has(documentName)) {
-      const manager = this.titleUpdateManagers.get(documentName)!;
-      manager.cancel();
-      this.titleUpdateManagers.delete(documentName);
-    }
-  }
-}

apps/live/src/extensions/title-update/debounce.ts

@@ -1,277 +0,0 @@
-import { logger } from "@plane/logger";
-
-/**
- * DebounceState - Tracks the state of a debounced function
- */
-export interface DebounceState {
-  lastArgs: any[] | null;
-  timerId: ReturnType<typeof setTimeout> | null;
-  lastCallTime: number | undefined;
-  lastExecutionTime: number;
-  inProgress: boolean;
-  abortController: AbortController | null;
-}
-
-/**
- * Creates a new DebounceState object
- */
-export const createDebounceState = (): DebounceState => ({
-  lastArgs: null,
-  timerId: null,
-  lastCallTime: undefined,
-  lastExecutionTime: 0,
-  inProgress: false,
-  abortController: null,
-});
-
-/**
- * DebounceOptions - Configuration options for debounce
- */
-export interface DebounceOptions {
-  /** The wait time in milliseconds */
-  wait: number;
-
-  /** Optional logging prefix for debug messages */
-  logPrefix?: string;
-}
-
-/**
- * Enhanced debounce manager with abort support
- * Manages the state and timing of debounced function calls
- */
-export class DebounceManager {
-  private state: DebounceState;
-  private wait: number;
-  private logPrefix: string;
-
-  /**
-   * Creates a new DebounceManager
-   * @param options Debounce configuration options
-   */
-  constructor(options: DebounceOptions) {
-    this.state = createDebounceState();
-    this.wait = options.wait;
-    this.logPrefix = options.logPrefix || "";
-  }
-
-  /**
-   * Schedule a debounced function call
-   * @param func The function to call
-   * @param args The arguments to pass to the function
-   */
-  schedule(func: (...args: any[]) => Promise<void>, ...args: any[]): void {
-    // Always update the last arguments
-    this.state.lastArgs = args;
-
-    const time = Date.now();
-    this.state.lastCallTime = time;
-
-    // If an operation is in progress, just store the new args and start the timer
-    if (this.state.inProgress) {
-      // Always restart the timer for the new call, even if an operation is in progress
-      if (this.state.timerId) {
-        clearTimeout(this.state.timerId);
-      }
-
-      this.state.timerId = setTimeout(() => {
-        this.timerExpired(func);
-      }, this.wait);
-      return;
-    }
-
-    // If already scheduled, update the args and restart the timer
-    if (this.state.timerId) {
-      clearTimeout(this.state.timerId);
-      this.state.timerId = setTimeout(() => {
-        this.timerExpired(func);
-      }, this.wait);
-      return;
-    }
-
-    // Start the timer for the trailing edge execution
-    this.state.timerId = setTimeout(() => {
-      this.timerExpired(func);
-    }, this.wait);
-  }
-
-  /**
-   * Called when the timer expires
-   */
-  private timerExpired(func: (...args: any[]) => Promise<void>): void {
-    const time = Date.now();
-
-    // Check if this timer expiration represents the end of the debounce period
-    if (this.shouldInvoke(time)) {
-      // Execute the function
-      this.executeFunction(func, time);
-      return;
-    }
-
-    // Otherwise restart the timer
-    this.state.timerId = setTimeout(() => {
-      this.timerExpired(func);
-    }, this.remainingWait(time));
-  }
-
-  /**
-   * Execute the debounced function
-   */
-  private executeFunction(func: (...args: any[]) => Promise<void>, time: number): void {
-    this.state.timerId = null;
-    this.state.lastExecutionTime = time;
-
-    // Execute the function asynchronously
-    this.performFunction(func).catch((error) => {
-      logger.error(`${this.logPrefix}: Error in execution:`, error);
-    });
-  }
-
-  /**
-   * Perform the actual function call, handling any in-progress operations
-   */
-  private async performFunction(func: (...args: any[]) => Promise<void>): Promise<void> {
-    const args = this.state.lastArgs;
-    if (!args) return;
-
-    // Store the args we're about to use
-    const currentArgs = [...args];
-
-    // If another operation is in progress, abort it
-    await this.abortOngoingOperation();
-
-    // Mark that we're starting a new operation
-    this.state.inProgress = true;
-    this.state.abortController = new AbortController();
-
-    try {
-      // Add the abort signal to the arguments if the function can use it
-      const execArgs = [...currentArgs];
-      execArgs.push(this.state.abortController.signal);
-
-      await func(...execArgs);
-
-      // Only clear lastArgs if they haven't been changed during this operation
-      if (this.state.lastArgs && this.arraysEqual(this.state.lastArgs, currentArgs)) {
-        this.state.lastArgs = null;
-
-        // Clear any timer as we've successfully processed the latest args
-        if (this.state.timerId) {
-          clearTimeout(this.state.timerId);
-          this.state.timerId = null;
-        }
-      } else if (this.state.lastArgs) {
-        // If lastArgs have changed during this operation, the timer should already be running
-        // but let's make sure it is
-        if (!this.state.timerId) {
-          this.state.timerId = setTimeout(() => {
-            this.timerExpired(func);
-          }, this.wait);
-        }
-      }
-    } catch (error) {
-      if (error instanceof Error && error.name === "AbortError") {
-        // Nothing to do here, the new operation will be triggered by the timer expiration
-      } else {
-        logger.error(`${this.logPrefix}: Error during operation:`, error);
-
-        // On error (not abort), make sure we have a timer running to retry
-        if (!this.state.timerId && this.state.lastArgs) {
-          this.state.timerId = setTimeout(() => {
-            this.timerExpired(func);
-          }, this.wait);
-        }
-      }
-    } finally {
-      this.state.inProgress = false;
-      this.state.abortController = null;
-    }
-  }
-
-  /**
-   * Abort any ongoing operation
-   */
-  private async abortOngoingOperation(): Promise<void> {
-    if (this.state.inProgress && this.state.abortController) {
-      this.state.abortController.abort();
-
-      // Small delay to ensure the abort has had time to propagate
-      await new Promise((resolve) => setTimeout(resolve, 20));
-
-      // Double-check that state has been reset, force it if not
-      if (this.state.inProgress || this.state.abortController) {
-        this.state.inProgress = false;
-        this.state.abortController = null;
-      }
-    }
-  }
-
-  /**
-   * Determine if we should invoke the function now
-   */
-  private shouldInvoke(time: number): boolean {
-    // Either this is the first call, or we've waited long enough since the last call
-    return this.state.lastCallTime === undefined || time - this.state.lastCallTime >= this.wait;
-  }
-
-  /**
-   * Calculate how much longer we should wait
-   */
-  private remainingWait(time: number): number {
-    const timeSinceLastCall = time - (this.state.lastCallTime || 0);
-    return Math.max(0, this.wait - timeSinceLastCall);
-  }
-
-  /**
-   * Force immediate execution
-   */
-  async flush(func: (...args: any[]) => Promise<void>): Promise<void> {
-    // Clear any pending timeout
-    if (this.state.timerId) {
-      clearTimeout(this.state.timerId);
-      this.state.timerId = null;
-    }
-
-    // Reset timing state
-    this.state.lastCallTime = undefined;
-
-    // Perform the function immediately
-    if (this.state.lastArgs) {
-      await this.performFunction(func);
-    }
-  }
-
-  /**
-   * Cancel any pending operations without executing
-   */
-  cancel(): void {
-    // Clear any pending timeout
-    if (this.state.timerId) {
-      clearTimeout(this.state.timerId);
-      this.state.timerId = null;
-    }
-
-    // Reset timing state
-    this.state.lastCallTime = undefined;
-
-    // Abort any in-progress operation
-    if (this.state.inProgress && this.state.abortController) {
-      this.state.abortController.abort();
-      this.state.inProgress = false;
-      this.state.abortController = null;
-    }
-
-    // Clear args
-    this.state.lastArgs = null;
-  }
-
-  /**
-   * Compare two arrays for equality
-   */
-  private arraysEqual(a: any[], b: any[]): boolean {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-      if (a[i] !== b[i]) return false;
-    }
-    return true;
-  }
-}

apps/live/src/extensions/title-update/title-update-manager.ts

@@ -1,90 +0,0 @@
-import { logger } from "@plane/logger";
-import { AppError } from "@/lib/errors";
-import { getPageService } from "@/services/page/handler";
-import type { HocusPocusServerContext } from "@/types";
-import { DebounceManager } from "./debounce";
-
-/**
- * Manages title update operations for a single document
- * Handles debouncing, aborting, and force saving title updates
- */
-export class TitleUpdateManager {
-  private documentName: string;
-  private context: HocusPocusServerContext;
-  private debounceManager: DebounceManager;
-  private lastTitle: string | null = null;
-
-  /**
-   * Create a new TitleUpdateManager instance
-   */
-  constructor(documentName: string, context: HocusPocusServerContext, wait: number = 5000) {
-    this.documentName = documentName;
-    this.context = context;
-
-    // Set up debounce manager with logging
-    this.debounceManager = new DebounceManager({
-      wait,
-      logPrefix: `TitleManager[${documentName.substring(0, 8)}]`,
-    });
-  }
-
-  /**
-   * Schedule a debounced title update
-   */
-  scheduleUpdate(title: string): void {
-    // Store the latest title
-    this.lastTitle = title;
-
-    // Schedule the update with the debounce manager
-    this.debounceManager.schedule(this.updateTitle.bind(this), title);
-  }
-
-  /**
-   * Update the title - will be called by the debounce manager
-   */
-  private async updateTitle(title: string, signal?: AbortSignal): Promise<void> {
-    const service = getPageService(this.context.documentType, this.context);
-    if (!service.updatePageProperties) {
-      logger.warn(`No updateTitle method found for document ${this.documentName}`);
-      return;
-    }
-
-    try {
-      await service.updatePageProperties(this.documentName, {
-        data: { name: title },
-        abortSignal: signal,
-      });
-
-      // Clear last title only if it matches what we just updated
-      if (this.lastTitle === title) {
-        this.lastTitle = null;
-      }
-    } catch (error) {
-      const appError = new AppError(error, {
-        context: { operation: "updateTitle", documentName: this.documentName },
-      });
-      logger.error("Error updating title", appError);
-    }
-  }
-
-  /**
-   * Force save the current title immediately
-   */
-  async forceSave(): Promise<void> {
-    // Ensure we have the current title
-    if (!this.lastTitle) {
-      return;
-    }
-
-    // Use the debounce manager to flush the operation
-    await this.debounceManager.flush(this.updateTitle.bind(this));
-  }
-
-  /**
-   * Cancel any pending updates
-   */
-  cancel(): void {
-    this.debounceManager.cancel();
-    this.lastTitle = null;
-  }
-}

apps/live/src/extensions/title-update/title-utils.ts

@@ -1,8 +0,0 @@
-/**
- * Utility function to extract text from HTML content
- */
-export const extractTextFromHTML = (html: string): string => {
-  // Use a regex to extract text between tags
-  const textMatch = html.replace(/<[^>]*>/g, "");
-  return textMatch || "";
-};

apps/space/core/components/account/auth-forms/unique-code.tsx

@@ -113,7 +113,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
           name="code"
           value={uniqueCodeFormData.code}
           onChange={(e) => handleFormChange("code", e.target.value)}
-          placeholder="gets-sets-flys"
+          placeholder="123456"
           className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
           autoFocus
         />

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

@@ -82,7 +82,7 @@ function IssueDetailsPage({ params }: Route.ComponentProps) {
   return (
     <>
       <PageHead title={pageTitle} />
-      {error ? (
+      {error && !issueLoader ? (
         <EmptyState
           image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
           title={t("issue.empty_state.issue_detail.title")}

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

@@ -11,6 +11,7 @@ import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-butt
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
+import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
 // local imports
 import type { Route } from "./+types/layout";
 
@@ -44,7 +45,9 @@ function ProjectLayout({ params }: Route.ComponentProps) {
           </Row>
         </div>
       )}
-      <Outlet />
+      <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
+        <Outlet />
+      </ProjectAuthWrapper>
     </>
   );
 }

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

@@ -10,7 +10,6 @@ import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { PageAccessIcon } from "@/components/common/page-access-icon";
 import { SwitcherIcon, SwitcherLabel } from "@/components/common/switcher-label";
 import { PageHeaderActions } from "@/components/pages/header/actions";
-import { PageSyncingBadge } from "@/components/pages/header/syncing-badge";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -96,7 +95,6 @@ export const PageDetailsHeader = observer(function PageDetailsHeader() {
         </div>
       </Header.LeftItem>
       <Header.RightItem>
-        <PageSyncingBadge syncStatus={page.isSyncingWithServer} />
         <PageDetailsHeaderExtraActions page={page} storeType={storeType} />
         <PageHeaderActions page={page} storeType={storeType} />
       </Header.RightItem>

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

@@ -1,14 +0,0 @@
-import { Outlet } from "react-router";
-// plane web layouts
-import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
-import type { Route } from "./+types/layout";
-
-export default function ProjectDetailLayout({ params }: Route.ComponentProps) {
-  // router
-  const { workspaceSlug, projectId } = params;
-  return (
-    <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
-      <Outlet />
-    </ProjectAuthWrapper>
-  );
-}

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx

@@ -1,7 +1,6 @@
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { PageHead } from "@/components/core/page-title";
 import { ProfileForm } from "@/components/profile/form";
 // hooks
@@ -12,13 +11,7 @@ function ProfileSettingsPage() {
   // store hooks
   const { data: currentUser, userProfile } = useUser();
 
-  if (!currentUser)
-    return (
-      <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!currentUser) return <></>;
   return (
     <>
       <PageHead title={`${t("profile.label")} - ${t("general_settings")}`} />

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx

@@ -2,7 +2,6 @@ import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { PageHead } from "@/components/core/page-title";
 import { PreferencesList } from "@/components/preferences/list";
 import { LanguageTimezone } from "@/components/profile/preferences/language-timezone";
@@ -16,30 +15,23 @@ function ProfileAppearancePage() {
   // hooks
   const { data: userProfile } = useUserProfile();
 
+  if (!userProfile) return <></>;
   return (
     <>
       <PageHead title={`${t("profile.label")} - ${t("preferences")}`} />
-      {userProfile ? (
-        <>
-          <div className="flex flex-col gap-4 w-full">
-            <div>
-              <SettingsHeading
-                title={t("account_settings.preferences.heading")}
-                description={t("account_settings.preferences.description")}
-              />
-              <PreferencesList />
-            </div>
-            <div>
-              <ProfileSettingContentHeader title={t("language_and_time")} />
-              <LanguageTimezone />
-            </div>
-          </div>
-        </>
-      ) : (
-        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-          <LogoSpinner />
+      <div className="flex flex-col gap-4 w-full">
+        <div>
+          <SettingsHeading
+            title={t("account_settings.preferences.heading")}
+            description={t("account_settings.preferences.description")}
+          />
+          <PreferencesList />
         </div>
-      )}
+        <div>
+          <ProfileSettingContentHeader title={t("language_and_time")} />
+          <LanguageTimezone />
+        </div>
+      </div>
     </>
   );
 }

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx

@@ -0,0 +1,33 @@
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+import { Outlet } from "react-router";
+// components
+import { getProjectActivePath } from "@/components/settings/helper";
+import { SettingsMobileNav } from "@/components/settings/mobile";
+import { ProjectSettingsSidebar } from "@/components/settings/project/sidebar";
+// plane web imports
+import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+// types
+import type { Route } from "./+types/layout";
+
+function ProjectDetailSettingsLayout({ params }: Route.ComponentProps) {
+  const { workspaceSlug, projectId } = params;
+  // router
+  const pathname = usePathname();
+
+  return (
+    <>
+      <SettingsMobileNav hamburgerContent={ProjectSettingsSidebar} activePath={getProjectActivePath(pathname) || ""} />
+      <div className="relative flex h-full w-full">
+        <div className="hidden md:block">{projectId && <ProjectSettingsSidebar />}</div>
+        <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
+          <div className="w-full h-full overflow-y-scroll md:pt-page-y">
+            <Outlet />
+          </div>
+        </ProjectAuthWrapper>
+      </div>
+    </>
+  );
+}
+
+export default observer(ProjectDetailSettingsLayout);

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
-import useSWR from "swr";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 // components
@@ -24,12 +23,8 @@ function ProjectSettingsPage({ params }: Route.ComponentProps) {
   // router
   const { workspaceSlug, projectId } = params;
   // store hooks
-  const { currentProjectDetails, fetchProjectDetails } = useProject();
+  const { currentProjectDetails } = useProject();
   const { allowPermissions } = useUserPermissions();
-
-  // api call to fetch project details
-  // TODO: removed this API if not necessary
-  const { isLoading } = useSWR(`PROJECT_DETAILS_${projectId}`, () => fetchProjectDetails(workspaceSlug, projectId));
   // derived values
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId);
 
@@ -56,7 +51,7 @@ function ProjectSettingsPage({ params }: Route.ComponentProps) {
       )}
 
       <div className={`w-full ${isAdmin ? "" : "opacity-60"}`}>
-        {currentProjectDetails && !isLoading ? (
+        {currentProjectDetails ? (
           <ProjectDetailsForm
             project={currentProjectDetails}
             workspaceSlug={workspaceSlug}

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx

@@ -1,21 +1,17 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
 import { Outlet } from "react-router";
-// components
-import { getProjectActivePath } from "@/components/settings/helper";
-import { SettingsMobileNav } from "@/components/settings/mobile";
-import { ProjectSettingsSidebar } from "@/components/settings/project/sidebar";
+// hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+// types
 import type { Route } from "./+types/layout";
 
 function ProjectSettingsLayout({ params }: Route.ComponentProps) {
+  const { workspaceSlug, projectId } = params;
   // router
   const router = useAppRouter();
-  const pathname = usePathname();
-  const { workspaceSlug, projectId } = params;
+  // store hooks
   const { joinedProjectIds } = useProject();
 
   useEffect(() => {
@@ -25,19 +21,7 @@ function ProjectSettingsLayout({ params }: Route.ComponentProps) {
     }
   }, [joinedProjectIds, router, workspaceSlug, projectId]);
 
-  return (
-    <>
-      <SettingsMobileNav hamburgerContent={ProjectSettingsSidebar} activePath={getProjectActivePath(pathname) || ""} />
-      <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
-        <div className="relative flex h-full w-full">
-          <div className="hidden md:block">{projectId && <ProjectSettingsSidebar />}</div>
-          <div className="w-full h-full overflow-y-scroll md:pt-page-y">
-            <Outlet />
-          </div>
-        </div>
-      </ProjectAuthWrapper>
-    </>
-  );
+  return <Outlet />;
 }
 
 export default observer(ProjectSettingsLayout);

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

@@ -1,8 +1,14 @@
+import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTheme } from "next-themes";
+// plane imports
 import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { cn } from "@plane/utils";
+// assets
+import ProjectDarkEmptyState from "@/app/assets/empty-state/project-settings/no-projects-dark.png?url";
+import ProjectLightEmptyState from "@/app/assets/empty-state/project-settings/no-projects-light.png?url";
+// hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 
 function ProjectSettingsPage() {
@@ -10,13 +16,10 @@ function ProjectSettingsPage() {
   const { resolvedTheme } = useTheme();
   const { toggleCreateProjectModal } = useCommandPalette();
   // derived values
-  const resolvedPath =
-    resolvedTheme === "dark"
-      ? "/empty-state/project-settings/no-projects-dark.png"
-      : "/empty-state/project-settings/no-projects-light.png";
+  const resolvedPath = resolvedTheme === "dark" ? ProjectDarkEmptyState : ProjectLightEmptyState;
   return (
     <div className="flex flex-col gap-4 items-center justify-center h-full max-w-[480px] mx-auto">
-      <img src={resolvedPath} className="w-full h-full object-contain" alt="No projects yet" />
+      <img src={resolvedPath} alt="No projects yet" />
       <div className="text-lg font-semibold text-custom-text-350">No projects yet</div>
       <div className="text-sm text-custom-text-350 text-center">
         Projects act as the foundation for goal-driven work. They let you manage your teams, tasks, and everything you
@@ -38,4 +41,4 @@ function ProjectSettingsPage() {
   );
 }
 
-export default ProjectSettingsPage;
+export default observer(ProjectSettingsPage);

apps/web/app/routes/core.ts

@@ -108,9 +108,13 @@ export const coreRoutes: RouteConfigEntry[] = [
           ),
         ]),
 
-        // ====================================================================
-        // PROJECT LEVEL ROUTES
-        // ====================================================================
+        // Archived Projects
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/layout.tsx", [
+          route(
+            ":workspaceSlug/projects/archives",
+            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx"
+          ),
+        ]),
 
         // --------------------------------------------------------------------
         // PROJECT LEVEL ROUTES
@@ -122,136 +126,123 @@ export const coreRoutes: RouteConfigEntry[] = [
         ]),
 
         // Project Detail
-        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx", [
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx", [
-            // Project Issues List
-            layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx", [
-              route(
-                ":workspaceSlug/projects/:projectId/issues",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx"
-              ),
-            ]),
-            // Issue Detail
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx", [
+          // Project Issues List
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx", [
             route(
-              ":workspaceSlug/projects/:projectId/issues/:issueId",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx"
-            ),
-
-            // Cycle Detail
-            layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx", [
-              route(
-                ":workspaceSlug/projects/:projectId/cycles/:cycleId",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx"
-              ),
-            ]),
-
-            // Cycles List
-            layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx", [
-              route(
-                ":workspaceSlug/projects/:projectId/cycles",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx"
-              ),
-            ]),
-
-            // Module Detail
-            layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx", [
-              route(
-                ":workspaceSlug/projects/:projectId/modules/:moduleId",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx"
-              ),
-            ]),
-
-            // Modules List
-            layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx", [
-              route(
-                ":workspaceSlug/projects/:projectId/modules",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx"
-              ),
-            ]),
-
-            // View Detail
-            layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx", [
-              route(
-                ":workspaceSlug/projects/:projectId/views/:viewId",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx"
-              ),
-            ]),
-
-            // Views List
-            layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx", [
-              route(
-                ":workspaceSlug/projects/:projectId/views",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx"
-              ),
-            ]),
-
-            // Page Detail
-            layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx", [
-              route(
-                ":workspaceSlug/projects/:projectId/pages/:pageId",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx"
-              ),
-            ]),
-
-            // Pages List
-            layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx", [
-              route(
-                ":workspaceSlug/projects/:projectId/pages",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx"
-              ),
-            ]),
-            // Intake list
-            layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/layout.tsx", [
-              route(
-                ":workspaceSlug/projects/:projectId/intake",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx"
-              ),
-            ]),
-          ]),
-
-          // Archived Projects
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/layout.tsx", [
-            route(
-              ":workspaceSlug/projects/archives",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx"
+              ":workspaceSlug/projects/:projectId/issues",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx"
             ),
           ]),
-
-          // Project Archives - Issues, Cycles, Modules
-          // Project Archives - Issues - List
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx", [
-            route(
-              ":workspaceSlug/projects/:projectId/archives/issues",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx"
-            ),
-          ]),
-
-          // Project Archives - Issues - Detail
-          layout(
-            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx",
-            [
-              route(
-                ":workspaceSlug/projects/:projectId/archives/issues/:archivedIssueId",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx"
-              ),
-            ]
+          // Issue Detail
+          route(
+            ":workspaceSlug/projects/:projectId/issues/:issueId",
+            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx"
           ),
 
-          // Project Archives - Cycles
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx", [
+          // Cycle Detail
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx", [
             route(
-              ":workspaceSlug/projects/:projectId/archives/cycles",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx"
+              ":workspaceSlug/projects/:projectId/cycles/:cycleId",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx"
             ),
           ]),
 
-          // Project Archives - Modules
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx", [
+          // Cycles List
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx", [
             route(
-              ":workspaceSlug/projects/:projectId/archives/modules",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx"
+              ":workspaceSlug/projects/:projectId/cycles",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx"
             ),
           ]),
+
+          // Module Detail
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx", [
+            route(
+              ":workspaceSlug/projects/:projectId/modules/:moduleId",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx"
+            ),
+          ]),
+
+          // Modules List
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx", [
+            route(
+              ":workspaceSlug/projects/:projectId/modules",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx"
+            ),
+          ]),
+
+          // View Detail
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx", [
+            route(
+              ":workspaceSlug/projects/:projectId/views/:viewId",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx"
+            ),
+          ]),
+
+          // Views List
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx", [
+            route(
+              ":workspaceSlug/projects/:projectId/views",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx"
+            ),
+          ]),
+
+          // Page Detail
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx", [
+            route(
+              ":workspaceSlug/projects/:projectId/pages/:pageId",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx"
+            ),
+          ]),
+
+          // Pages List
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx", [
+            route(
+              ":workspaceSlug/projects/:projectId/pages",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx"
+            ),
+          ]),
+          // Intake list
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/layout.tsx", [
+            route(
+              ":workspaceSlug/projects/:projectId/intake",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx"
+            ),
+          ]),
+        ]),
+
+        // Project Archives - Issues, Cycles, Modules
+        // Project Archives - Issues - List
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx", [
+          route(
+            ":workspaceSlug/projects/:projectId/archives/issues",
+            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx"
+          ),
+        ]),
+
+        // Project Archives - Issues - Detail
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx", [
+          route(
+            ":workspaceSlug/projects/:projectId/archives/issues/:archivedIssueId",
+            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx"
+          ),
+        ]),
+
+        // Project Archives - Cycles
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx", [
+          route(
+            ":workspaceSlug/projects/:projectId/archives/cycles",
+            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx"
+          ),
+        ]),
+
+        // Project Archives - Modules
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx", [
+          route(
+            ":workspaceSlug/projects/:projectId/archives/modules",
+            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx"
+          ),
         ]),
       ]),
 
@@ -320,44 +311,46 @@ export const coreRoutes: RouteConfigEntry[] = [
         // --------------------------------------------------------------------
 
         layout("./(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx", [
-          // CORE Routes
-          // Project Settings
+          // No Projects available page
           route(":workspaceSlug/settings/projects", "./(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx"),
-          route(
-            ":workspaceSlug/settings/projects/:projectId",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx"
-          ),
-          // Project Members
-          route(
-            ":workspaceSlug/settings/projects/:projectId/members",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx"
-          ),
-          // Project Features
-          route(
-            ":workspaceSlug/settings/projects/:projectId/features",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx"
-          ),
-          // Project States
-          route(
-            ":workspaceSlug/settings/projects/:projectId/states",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx"
-          ),
-          // Project Labels
-          route(
-            ":workspaceSlug/settings/projects/:projectId/labels",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/page.tsx"
-          ),
-          // Project Estimates
-          route(
-            ":workspaceSlug/settings/projects/:projectId/estimates",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx"
-          ),
-          // Project Automations
-          layout("./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/layout.tsx", [
+          layout("./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx", [
+            // Project Settings
             route(
-              ":workspaceSlug/settings/projects/:projectId/automations",
-              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx"
+              ":workspaceSlug/settings/projects/:projectId",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx"
             ),
+            // Project Members
+            route(
+              ":workspaceSlug/settings/projects/:projectId/members",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx"
+            ),
+            // Project Features
+            route(
+              ":workspaceSlug/settings/projects/:projectId/features",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx"
+            ),
+            // Project States
+            route(
+              ":workspaceSlug/settings/projects/:projectId/states",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx"
+            ),
+            // Project Labels
+            route(
+              ":workspaceSlug/settings/projects/:projectId/labels",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/page.tsx"
+            ),
+            // Project Estimates
+            route(
+              ":workspaceSlug/settings/projects/:projectId/estimates",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx"
+            ),
+            // Project Automations
+            layout("./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/layout.tsx", [
+              route(
+                ":workspaceSlug/settings/projects/:projectId/automations",
+                "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx"
+              ),
+            ]),
           ]),
         ]),
       ]),

apps/web/ce/components/onboarding/tour/root.tsx

@@ -18,7 +18,7 @@ import { useUser } from "@/hooks/store/user";
 // local imports
 import { TourSidebar } from "./sidebar";
 
-type Props = {
+export type TOnboardingTourProps = {
   onComplete: () => void;
 };
 
@@ -28,7 +28,7 @@ const TOUR_STEPS: {
   key: TTourSteps;
   title: string;
   description: string;
-  image: any;
+  image: string;
   prevStep?: TTourSteps;
   nextStep?: TTourSteps;
 }[] = [
@@ -75,7 +75,7 @@ const TOUR_STEPS: {
   },
 ];
 
-export const TourRoot = observer(function TourRoot(props: Props) {
+export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps) {
   const { onComplete } = props;
   // states
   const [step, setStep] = useState<TTourSteps>("welcome");
@@ -89,12 +89,12 @@ export const TourRoot = observer(function TourRoot(props: Props) {
   return (
     <>
       {step === "welcome" ? (
-        <div className="h-3/4 w-4/5 overflow-hidden rounded-[10px] bg-custom-background-100 md:w-1/2 lg:w-2/5">
+        <div className="w-4/5 overflow-hidden rounded-[10px] bg-custom-background-100 md:w-1/2 lg:w-2/5">
           <div className="h-full overflow-hidden">
-            <div className="grid h-3/5 place-items-center bg-custom-primary-100">
-              <PlaneLockup className="h-10 w-auto text-custom-text-100" />
+            <div className="grid h-64 place-items-center bg-custom-primary-100">
+              <PlaneLockup className="h-10 w-auto text-white" />
             </div>
-            <div className="flex h-2/5 flex-col overflow-y-auto p-6">
+            <div className="flex flex-col overflow-y-auto p-6">
               <h3 className="font-semibold sm:text-xl">
                 Welcome to Plane, {currentUser?.first_name} {currentUser?.last_name}
               </h3>
@@ -103,7 +103,7 @@ export const TourRoot = observer(function TourRoot(props: Props) {
                 started by creating a project.
               </p>
               <div className="flex h-full items-end">
-                <div className="mt-8 flex items-center gap-6">
+                <div className="mt-12 flex items-center gap-6">
                   <Button
                     variant="primary"
                     onClick={() => {

apps/web/ce/components/onboarding/tour/sidebar.tsx

@@ -1,12 +1,13 @@
-// icons
+// plane imports
 import { CycleIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
 // types
 import type { TTourSteps } from "./root";
 
 const sidebarOptions: {
   key: TTourSteps;
   label: string;
-  Icon: any;
+  Icon: React.FC<ISvgIcons>;
 }[] = [
   {
     key: "work-items",

apps/web/ce/layouts/project-wrapper.tsx

@@ -1,11 +1,10 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // layouts
 import { ProjectAuthWrapper as CoreProjectAuthWrapper } from "@/layouts/auth-layout/project-wrapper";
 
 export type IProjectAuthWrapper = {
   workspaceSlug: string;
-  projectId?: string;
+  projectId: string;
   children: React.ReactNode;
 };
 

apps/web/core/components/auth-screens/project/join-project.tsx

@@ -1,67 +0,0 @@
-import { useState } from "react";
-import { useParams } from "next/navigation";
-import { ClipboardList } from "lucide-react";
-// plane imports
-import { Button } from "@plane/propel/button";
-// assets
-import Unauthorized from "@/app/assets/auth/unauthorized.svg?url";
-// hooks
-import { useProject } from "@/hooks/store/use-project";
-import { useUserPermissions } from "@/hooks/store/user";
-
-type Props = {
-  projectId?: string;
-  isPrivateProject?: boolean;
-};
-
-export function JoinProject(props: Props) {
-  const { projectId, isPrivateProject = false } = props;
-  // states
-  const [isJoiningProject, setIsJoiningProject] = useState(false);
-  // store hooks
-  const { joinProject } = useUserPermissions();
-  const { fetchProjectDetails } = useProject();
-
-  const { workspaceSlug } = useParams();
-
-  const handleJoin = () => {
-    if (!workspaceSlug || !projectId) return;
-
-    setIsJoiningProject(true);
-
-    joinProject(workspaceSlug.toString(), projectId.toString())
-      .then(() => fetchProjectDetails(workspaceSlug.toString(), projectId.toString()))
-      .finally(() => setIsJoiningProject(false));
-  };
-
-  return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
-      <div className="h-44 w-72">
-        <img src={Unauthorized} className="h-[176px] w-[288px] object-contain" alt="JoinProject" />
-      </div>
-      <h1 className="text-xl font-medium text-custom-text-100">
-        {!isPrivateProject ? `You are not a member of this project yet.` : `You are not a member of this project.`}
-      </h1>
-
-      <div className="w-full max-w-md text-base text-custom-text-200">
-        <p className="mx-auto w-full text-sm md:w-3/4">
-          {!isPrivateProject
-            ? `Click the button below to join it.`
-            : `This is a private project. \n We can't tell you more about this project to protect confidentiality.`}
-        </p>
-      </div>
-      {!isPrivateProject && (
-        <div>
-          <Button
-            variant="primary"
-            prependIcon={<ClipboardList color="white" />}
-            loading={isJoiningProject}
-            onClick={handleJoin}
-          >
-            {isJoiningProject ? "Taking you in" : "Click to join"}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}

apps/web/core/components/auth-screens/project/project-access-restriction.tsx

@@ -0,0 +1,70 @@
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+
+type TProps = {
+  isWorkspaceAdmin: boolean;
+  handleJoinProject: () => void;
+  isJoinButtonDisabled: boolean;
+  errorStatusCode: number | undefined;
+};
+
+export const ProjectAccessRestriction = observer(function ProjectAccessRestriction(props: TProps) {
+  const { isWorkspaceAdmin, handleJoinProject, isJoinButtonDisabled, errorStatusCode } = props;
+  // plane hooks
+  const { t } = useTranslation();
+
+  // Show join project screen if:
+  // - User lacks project membership (409 Conflict)
+  // - User lacks permission to access the private project (403 Forbidden) but is a workspace admin (can join any project)
+  if (errorStatusCode === 409 || (errorStatusCode === 403 && isWorkspaceAdmin))
+    return (
+      <div className="grid h-full w-full place-items-center bg-custom-background-100">
+        <EmptyStateDetailed
+          title={t("project_empty_state.no_access.title")}
+          description={t("project_empty_state.no_access.join_description")}
+          assetKey="no-access"
+          assetClassName="size-40"
+          actions={[
+            {
+              label: isJoinButtonDisabled
+                ? t("project_empty_state.no_access.cta_loading")
+                : t("project_empty_state.no_access.cta_primary"),
+              onClick: handleJoinProject,
+              disabled: isJoinButtonDisabled,
+            },
+          ]}
+        />
+      </div>
+    );
+
+  // Show no access screen if:
+  // - User lacks permission to access the private project (403 Forbidden)
+  if (errorStatusCode === 403) {
+    return (
+      <div className="grid h-full w-full place-items-center bg-custom-background-100">
+        <EmptyStateDetailed
+          title={t("project_empty_state.no_access.title")}
+          description={t("project_empty_state.no_access.restricted_description")}
+          assetKey="no-access"
+          assetClassName="size-40"
+        />
+      </div>
+    );
+  }
+
+  // Show empty state screen if:
+  // - Project not found (404 Not Found)
+  // - Any other error status code
+  return (
+    <div className="grid h-full w-full place-items-center bg-custom-background-100">
+      <EmptyStateDetailed
+        title={t("project_empty_state.invalid_project.title")}
+        description={t("project_empty_state.invalid_project.description")}
+        assetKey="project"
+        assetClassName="size-40"
+      />
+    </div>
+  );
+});

apps/web/core/components/home/root.tsx

@@ -4,15 +4,14 @@ import useSWR from "swr";
 // plane imports
 import { PRODUCT_TOUR_TRACKER_EVENTS } from "@plane/constants";
 import { ContentWrapper } from "@plane/ui";
-// components
-import { TourRoot } from "@/components/onboarding/tour";
 // helpers
 import { captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useHome } from "@/hooks/store/use-home";
 import { useUserProfile, useUser } from "@/hooks/store/user";
-// plane web components
+// plane web imports
 import { HomePeekOverviewsRoot } from "@/plane-web/components/home";
+import { TourRoot } from "@/plane-web/components/onboarding/tour/root";
 // local imports
 import { DashboardWidgets } from "./home-dashboard-widgets";
 import { UserGreetingsView } from "./user-greetings";
@@ -53,7 +52,7 @@ export const WorkspaceHomeView = observer(function WorkspaceHomeView() {
   return (
     <>
       {currentUserProfile && !currentUserProfile.is_tour_completed && (
-        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
+        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity overflow-y-auto">
           <TourRoot onComplete={handleTourCompleted} />
         </div>
       )}

apps/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx

@@ -6,7 +6,6 @@ import useSWR from "swr";
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { EIssuesStoreType } from "@plane/types";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
 // hooks
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
@@ -26,7 +25,7 @@ export const ArchivedIssueLayoutRoot = observer(function ArchivedIssueLayoutRoot
   // derived values
   const workItemFilters = projectId ? issuesFilter?.getIssueFilters(projectId) : undefined;
 
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId ? `ARCHIVED_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
     async () => {
       if (workspaceSlug && projectId) {
@@ -36,15 +35,7 @@ export const ArchivedIssueLayoutRoot = observer(function ArchivedIssueLayoutRoot
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  if (!workspaceSlug || !projectId) return <></>;
-
-  if (isLoading && !workItemFilters)
-    return (
-      <div className="h-full w-full flex items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!workspaceSlug || !projectId || !workItemFilters) return <></>;
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.ARCHIVED}>
       <ProjectLevelWorkItemFiltersHOC

apps/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx

@@ -7,7 +7,6 @@ import useSWR from "swr";
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { TransferIssues } from "@/components/cycles/transfer-issues";
 import { TransferIssuesModal } from "@/components/cycles/transfer-issues-modal";
 // hooks
@@ -59,7 +58,7 @@ export const CycleLayoutRoot = observer(function CycleLayoutRoot() {
   const workItemFilters = cycleId ? issuesFilter?.getIssueFilters(cycleId) : undefined;
   const activeLayout = workItemFilters?.displayFilters?.layout;
 
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId && cycleId ? `CYCLE_ISSUES_${workspaceSlug}_${projectId}_${cycleId}` : null,
     async () => {
       if (workspaceSlug && projectId && cycleId) {
@@ -78,15 +77,7 @@ export const CycleLayoutRoot = observer(function CycleLayoutRoot() {
     : 0;
   const canTransferIssues = isProgressSnapshotEmpty && transferableIssuesCount > 0;
 
-  if (!workspaceSlug || !projectId || !cycleId) return <></>;
-
-  if (isLoading && !workItemFilters)
-    return (
-      <div className="h-full w-full flex items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!workspaceSlug || !projectId || !cycleId || !workItemFilters) return <></>;
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.CYCLE}>
       <ProjectLevelWorkItemFiltersHOC

apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx

@@ -6,8 +6,6 @@ import useSWR from "swr";
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
 import { Row, ERowVariant } from "@plane/ui";
-// components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 // hooks
 import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
@@ -50,7 +48,7 @@ export const ModuleLayoutRoot = observer(function ModuleLayoutRoot() {
   const workItemFilters = moduleId ? issuesFilter?.getIssueFilters(moduleId) : undefined;
   const activeLayout = workItemFilters?.displayFilters?.layout || undefined;
 
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId && moduleId
       ? `MODULE_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}_${moduleId.toString()}`
       : null,
@@ -62,15 +60,7 @@ export const ModuleLayoutRoot = observer(function ModuleLayoutRoot() {
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  if (!workspaceSlug || !projectId || !moduleId) return <></>;
-
-  if (isLoading && !workItemFilters)
-    return (
-      <div className="h-full w-full flex items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!workspaceSlug || !projectId || !moduleId || !workItemFilters) return <></>;
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.MODULE}>
       <ProjectLevelWorkItemFiltersHOC

apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -7,7 +6,6 @@ import { ISSUE_DISPLAY_FILTERS_BY_PAGE, PROJECT_VIEW_TRACKER_ELEMENTS } from "@p
 import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
 import { Spinner } from "@plane/ui";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
 // hooks
@@ -49,7 +47,7 @@ export const ProjectLayoutRoot = observer(function ProjectLayoutRoot() {
   const workItemFilters = projectId ? issuesFilter?.getIssueFilters(projectId) : undefined;
   const activeLayout = workItemFilters?.displayFilters?.layout;
 
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId ? `PROJECT_ISSUES_${workspaceSlug}_${projectId}` : null,
     async () => {
       if (workspaceSlug && projectId) {
@@ -59,15 +57,7 @@ export const ProjectLayoutRoot = observer(function ProjectLayoutRoot() {
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  if (!workspaceSlug || !projectId) return <></>;
-
-  if (isLoading && !workItemFilters)
-    return (
-      <div className="h-full w-full flex items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!workspaceSlug || !projectId || !workItemFilters) return <></>;
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.PROJECT}>
       <ProjectLevelWorkItemFiltersHOC

apps/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx

@@ -5,8 +5,6 @@ import useSWR from "swr";
 // plane constants
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
-// components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 // hooks
 import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
@@ -60,7 +58,7 @@ export const ProjectViewLayoutRoot = observer(function ProjectViewLayoutRoot() {
       }
     : undefined;
 
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId && viewId ? `PROJECT_VIEW_ISSUES_${workspaceSlug}_${projectId}_${viewId}` : null,
     async () => {
       if (workspaceSlug && projectId && viewId) {
@@ -78,16 +76,7 @@ export const ProjectViewLayoutRoot = observer(function ProjectViewLayoutRoot() {
     [issuesFilter, workspaceSlug, viewId]
   );
 
-  if (!workspaceSlug || !projectId || !viewId) return <></>;
-
-  if (isLoading && !workItemFilters) {
-    return (
-      <div className="relative flex h-screen w-full items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-  }
-
+  if (!workspaceSlug || !projectId || !viewId || !workItemFilters) return <></>;
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.PROJECT_VIEW}>
       <ProjectLevelWorkItemFiltersHOC

apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -6,7 +6,6 @@ import { SPREADSHEET_SELECT_GROUP, SPREADSHEET_PROPERTY_LIST } from "@plane/cons
 import type { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssueLayoutTypes } from "@plane/types";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { MultipleSelectGroup } from "@/components/core/multiple-select";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -72,13 +71,7 @@ export const SpreadsheetView = observer(function SpreadsheetView(props: Props) {
         return true;
       });
 
-  if (!issueIds || issueIds.length === 0)
-    return (
-      <div className="grid h-full w-full place-items-center">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!issueIds || issueIds.length === 0) return <></>;
   return (
     <div className="relative flex h-full w-full flex-col overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-custom-text-200">
       <div ref={portalRef} className="spreadsheet-menu-portal" />

apps/web/core/components/navigation/top-nav-power-k.tsx

@@ -1,9 +1,8 @@
-import { useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { useState, useMemo, useCallback, useEffect } from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // hooks
-import { useOutsideClickDetector } from "@plane/hooks";
 import { CloseIcon, SearchIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // power-k
@@ -14,6 +13,7 @@ import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { usePowerK } from "@/hooks/store/use-power-k";
 import { useUser } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
+import { useExpandableSearch } from "@/hooks/use-expandable-search";
 
 export const TopNavPowerK = observer(() => {
   // router
@@ -22,7 +22,6 @@ export const TopNavPowerK = observer(() => {
   const { projectId: routerProjectId, workItem: workItemIdentifier } = params;
 
   // states
-  const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [activeCommand, setActiveCommand] = useState<TPowerKCommandConfig | null>(null);
   const [shouldShowContextBasedActions, setShouldShowContextBasedActions] = useState(true);
@@ -32,6 +31,25 @@ export const TopNavPowerK = observer(() => {
   const { activeContext, setActivePage, activePage, setTopNavInputRef } = usePowerK();
   const { data: currentUser } = useUser();
 
+  const handleOnClose = useCallback(() => {
+    setSearchTerm("");
+    setActivePage(null);
+    setActiveCommand(null);
+  }, [setSearchTerm, setActivePage, setActiveCommand]);
+
+  // expandable search hook
+  const {
+    isOpen,
+    containerRef,
+    inputRef,
+    handleClose: closePanel,
+    handleMouseDown,
+    handleFocus,
+    openPanel,
+  } = useExpandableSearch({
+    onClose: handleOnClose,
+  });
+
   // derived values
   const {
     issue: { getIssueById, getIssueIdByIdentifier },
@@ -54,12 +72,7 @@ export const TopNavPowerK = observer(() => {
         projectId,
       },
       router,
-      closePalette: () => {
-        setIsOpen(false);
-        setSearchTerm("");
-        setActivePage(null);
-        setActiveCommand(null);
-      },
+      closePalette: closePanel,
       setActiveCommand,
       setActivePage,
     }),
@@ -72,12 +85,10 @@ export const TopNavPowerK = observer(() => {
       projectId,
       router,
       setActivePage,
+      closePanel,
     ]
   );
 
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
   // Register input ref with PowerK store for keyboard shortcut access
   useEffect(() => {
     setTopNavInputRef(inputRef);
@@ -86,18 +97,6 @@ export const TopNavPowerK = observer(() => {
     };
   }, [setTopNavInputRef]);
 
-  useOutsideClickDetector(containerRef, () => {
-    if (isOpen) {
-      setIsOpen(false);
-      setActivePage(null);
-      setActiveCommand(null);
-    }
-  });
-
-  const handleFocus = () => {
-    setIsOpen(true);
-  };
-
   const handleClear = () => {
     setSearchTerm("");
     inputRef.current?.focus();
@@ -136,10 +135,7 @@ export const TopNavPowerK = observer(() => {
       // Cmd/Ctrl+K closes the search dropdown
       if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
         e.preventDefault();
-        setIsOpen(false);
-        setSearchTerm("");
-        setActivePage(null);
-        context.setActiveCommand(null);
+        closePanel();
         return;
       }
 
@@ -148,9 +144,7 @@ export const TopNavPowerK = observer(() => {
         if (searchTerm) {
           setSearchTerm("");
         }
-        setIsOpen(false);
-        inputRef.current?.blur();
-
+        closePanel();
         return;
       }
 
@@ -203,7 +197,7 @@ export const TopNavPowerK = observer(() => {
         return;
       }
     },
-    [searchTerm, activePage, context, shouldShowContextBasedActions, setActivePage, isOpen]
+    [searchTerm, activePage, context, shouldShowContextBasedActions, setActivePage, closePanel]
   );
 
   return (
@@ -228,7 +222,11 @@ export const TopNavPowerK = observer(() => {
             ref={inputRef}
             type="text"
             value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+              if (!isOpen) openPanel();
+            }}
+            onMouseDown={handleMouseDown}
             onFocus={handleFocus}
             onKeyDown={handleKeyDown}
             placeholder="Search commands..."

apps/web/core/components/navigation/use-responsive-tab-layout.ts

@@ -42,9 +42,10 @@ export const useResponsiveTabLayout = ({
   const gap = 4; // gap-1 = 4px
   const overflowButtonWidth = 40;
 
+  const container = containerRef?.current;
+
   // ResizeObserver to measure container width
   useEffect(() => {
-    const container = containerRef.current;
     if (!container) return;
 
     const resizeObserver = new ResizeObserver((entries) => {
@@ -58,7 +59,7 @@ export const useResponsiveTabLayout = ({
     return () => {
       resizeObserver.disconnect();
     };
-  }, []);
+  }, [container]);
 
   // Calculate how many items can fit
   useEffect(() => {

apps/web/core/components/onboarding/tour/index.ts

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

apps/web/core/components/pages/editor/content-limit-banner.tsx

@@ -1,35 +0,0 @@
-import { TriangleAlert } from "lucide-react";
-import { cn } from "@plane/utils";
-
-type Props = {
-  className?: string;
-  onDismiss?: () => void;
-};
-
-export const ContentLimitBanner: React.FC<Props> = ({ className, onDismiss }) => (
-  <div
-    className={cn(
-      "flex items-center gap-2 bg-custom-background-80 border-b border-custom-border-200 px-4 py-2.5 text-sm",
-      className
-    )}
-  >
-    <div className="flex items-center gap-2 text-custom-text-200 mx-auto">
-      <span className="text-amber-500">
-        <TriangleAlert />
-      </span>
-      <span className="font-medium">
-        Content limit reached and live sync is off. Create a new page or use nested pages to continue syncing.
-      </span>
-    </div>
-    {onDismiss && (
-      <button
-        type="button"
-        onClick={onDismiss}
-        className="ml-auto text-custom-text-300 hover:text-custom-text-200"
-        aria-label="Dismiss content limit warning"
-      >
-        ✕
-      </button>
-    )}
-  </div>
-);

apps/web/core/components/pages/editor/editor-body.tsx

@@ -1,12 +1,11 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { LIVE_BASE_PATH, LIVE_BASE_URL } from "@plane/constants";
 import { CollaborativeDocumentEditorWithRef } from "@plane/editor";
 import type {
-  CollaborationState,
   EditorRefApi,
-  EditorTitleRefApi,
   TAIMenuProps,
   TDisplayConfig,
   TFileHandler,
@@ -27,7 +26,6 @@ import { useUser } from "@/hooks/store/user";
 import { usePageFilters } from "@/hooks/use-page-filters";
 import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
 // plane web imports
-import type { TCustomEventHandlers } from "@/hooks/use-realtime-page-events";
 import { EditorAIMenu } from "@/plane-web/components/pages";
 import type { TExtendedEditorExtensionsConfig } from "@/plane-web/hooks/pages";
 import type { EPageStoreType } from "@/plane-web/hooks/store";
@@ -53,6 +51,7 @@ type Props = {
   config: TEditorBodyConfig;
   editorReady: boolean;
   editorForwardRef: React.RefObject<EditorRefApi>;
+  handleConnectionStatus: Dispatch<SetStateAction<boolean>>;
   handleEditorReady: (status: boolean) => void;
   handleOpenNavigationPane: () => void;
   handlers: TEditorBodyHandlers;
@@ -62,16 +61,14 @@ type Props = {
   projectId?: string;
   workspaceSlug: string;
   storeType: EPageStoreType;
-  customRealtimeEventHandlers?: TCustomEventHandlers;
   extendedEditorProps: TExtendedEditorExtensionsConfig;
-  isFetchingFallbackBinary?: boolean;
-  onCollaborationStateChange?: (state: CollaborationState) => void;
 };
 
 export const PageEditorBody = observer(function PageEditorBody(props: Props) {
   const {
     config,
     editorForwardRef,
+    handleConnectionStatus,
     handleEditorReady,
     handleOpenNavigationPane,
     handlers,
@@ -82,11 +79,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
     projectId,
     workspaceSlug,
     extendedEditorProps,
-    isFetchingFallbackBinary,
-    onCollaborationStateChange,
   } = props;
-  // refs
-  const titleEditorRef = useRef<EditorTitleRefApi>(null);
   // store hooks
   const { data: currentUser } = useUser();
   const { getWorkspaceBySlug } = useWorkspace();
@@ -98,7 +91,6 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
     isContentEditable,
     updateTitle,
     editor: { editorRef, updateAssetsList },
-    setSyncingStatus,
   } = page;
   const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id ?? "";
   // use editor mention
@@ -144,35 +136,20 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
     [editorRef, workspaceId, workspaceSlug]
   );
 
-  // Set syncing status when page changes and reset collaboration state
-  useEffect(() => {
-    setSyncingStatus("syncing");
-    onCollaborationStateChange?.({
-      stage: { kind: "connecting" },
-      isServerSynced: false,
-      isServerDisconnected: false,
-    });
-  }, [pageId, setSyncingStatus, onCollaborationStateChange]);
+  const handleServerConnect = useCallback(() => {
+    handleConnectionStatus(false);
+  }, [handleConnectionStatus]);
+
+  const handleServerError = useCallback(() => {
+    handleConnectionStatus(true);
+  }, [handleConnectionStatus]);
 
   const serverHandler: TServerHandler = useMemo(
     () => ({
-      onStateChange: (state) => {
-        // Pass full state to parent
-        onCollaborationStateChange?.(state);
-
-        // Map collaboration stage to UI syncing status
-        // Stage → UI mapping: disconnected → error | synced → synced | all others → syncing
-        if (state.stage.kind === "disconnected") {
-          setSyncingStatus("error");
-        } else if (state.stage.kind === "synced") {
-          setSyncingStatus("synced");
-        } else {
-          // initial, connecting, awaiting-sync, reconnecting → show as syncing
-          setSyncingStatus("syncing");
-        }
-      },
+      onConnect: handleServerConnect,
+      onServerError: handleServerError,
     }),
-    [setSyncingStatus, onCollaborationStateChange]
+    [handleServerConnect, handleServerError]
   );
 
   const realtimeConfig: TRealtimeConfig | undefined = useMemo(() => {
@@ -217,9 +194,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
     }
   );
 
-  const isPageLoading = pageId === undefined || !realtimeConfig;
-
-  if (isPageLoading) return <PageContentLoader className={blockWidthClassName} />;
+  if (pageId === undefined || !realtimeConfig) return <PageContentLoader className={blockWidthClassName} />;
 
   return (
     <Row
@@ -250,6 +225,12 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
         <div className="page-header-container group/page-header">
           <div className={blockWidthClassName}>
             <PageEditorHeaderRoot page={page} projectId={projectId} />
+            <PageEditorTitle
+              editorRef={editorRef}
+              readOnly={!isContentEditable}
+              title={pageTitle}
+              updateTitle={updateTitle}
+            />
           </div>
         </div>
         <CollaborativeDocumentEditorWithRef
@@ -258,7 +239,6 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
           fileHandler={config.fileHandler}
           handleEditorReady={handleEditorReady}
           ref={editorForwardRef}
-          titleRef={titleEditorRef}
           containerClassName="h-full p-0 pb-64"
           displayConfig={displayConfig}
           getEditorMetaData={getEditorMetaData}
@@ -281,7 +261,6 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
           }}
           onAssetChange={updateAssetsList}
           extendedEditorProps={extendedEditorProps}
-          isFetchingFallbackBinary={isFetchingFallbackBinary}
         />
       </div>
     </Row>

apps/web/core/components/pages/editor/page-root.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import type { CollaborationState, EditorRefApi } from "@plane/editor";
+import type { EditorRefApi } from "@plane/editor";
 import type { TDocumentPayload, TPage, TPageVersion, TWebhookConnectionQueryParams } from "@plane/types";
 // hooks
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePageFallback } from "@/hooks/use-page-fallback";
 // plane web import
-import type { PageUpdateHandler, TCustomEventHandlers } from "@/hooks/use-realtime-page-events";
 import { PageModals } from "@/plane-web/components/pages";
 import { usePagesPaneExtensions, useExtendedEditorProps } from "@/plane-web/hooks/pages";
 import type { EPageStoreType } from "@/plane-web/hooks/store";
@@ -16,7 +16,6 @@ import type { TPageInstance } from "@/store/pages/base-page";
 import { PageNavigationPaneRoot } from "../navigation-pane";
 import { PageVersionsOverlay } from "../version";
 import { PagesVersionEditor } from "../version/editor";
-import { ContentLimitBanner } from "./content-limit-banner";
 import { PageEditorBody } from "./editor-body";
 import type { TEditorBodyConfig, TEditorBodyHandlers } from "./editor-body";
 import { PageEditorToolbarRoot } from "./toolbar";
@@ -24,7 +23,7 @@ import { PageEditorToolbarRoot } from "./toolbar";
 export type TPageRootHandlers = {
   create: (payload: Partial<TPage>) => Promise<Partial<TPage> | undefined>;
   fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
-  fetchDescriptionBinary: () => Promise<ArrayBuffer>;
+  fetchDescriptionBinary: () => Promise<any>;
   fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
   restoreVersion: (pageId: string, versionId: string) => Promise<void>;
   updateDescription: (document: TDocumentPayload) => Promise<void>;
@@ -40,36 +39,27 @@ type TPageRootProps = {
   webhookConnectionParams: TWebhookConnectionQueryParams;
   projectId?: string;
   workspaceSlug: string;
-  customRealtimeEventHandlers?: TCustomEventHandlers;
 };
 
-export const PageRoot = observer((props: TPageRootProps) => {
-  const {
-    config,
-    handlers,
-    page,
-    projectId,
-    storeType,
-    webhookConnectionParams,
-    workspaceSlug,
-    customRealtimeEventHandlers,
-  } = props;
+export const PageRoot = observer(function PageRoot(props: TPageRootProps) {
+  const { config, handlers, page, projectId, storeType, webhookConnectionParams, workspaceSlug } = props;
   // states
   const [editorReady, setEditorReady] = useState(false);
-  const [collaborationState, setCollaborationState] = useState<CollaborationState | null>(null);
-  const [showContentTooLargeBanner, setShowContentTooLargeBanner] = useState(false);
+  const [hasConnectionFailed, setHasConnectionFailed] = useState(false);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
+  // router
+  const router = useAppRouter();
   // derived values
   const {
     isContentEditable,
     editor: { setEditorRef },
   } = page;
   // page fallback
-  const { isFetchingFallbackBinary } = usePageFallback({
+  usePageFallback({
     editorRef,
     fetchPageDescription: handlers.fetchDescriptionBinary,
-    collaborationState,
+    hasConnectionFailed,
     updatePageDescription: handlers.updateDescription,
   });
 
@@ -101,24 +91,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
     editorRef,
   });
 
-  // Type-safe error handler for content too large errors
-  const errorHandler: PageUpdateHandler<"error"> = (params) => {
-    const { data } = params;
-
-    // Check if it's content too large error
-    if (data.error_code === "content_too_large") {
-      setShowContentTooLargeBanner(true);
-    }
-
-    // Call original error handler if exists
-    customRealtimeEventHandlers?.error?.(params);
-  };
-
-  const mergedCustomEventHandlers: TCustomEventHandlers = {
-    ...customRealtimeEventHandlers,
-    error: errorHandler,
-  };
-
   // Get extended editor extensions configuration
   const extendedEditorProps = useExtendedEditorProps({
     workspaceSlug,
@@ -162,12 +134,11 @@ export const PageRoot = observer((props: TPageRootProps) => {
           isNavigationPaneOpen={isNavigationPaneOpen}
           page={page}
         />
-        {showContentTooLargeBanner && <ContentLimitBanner className="px-page-x" />}
         <PageEditorBody
           config={config}
-          customRealtimeEventHandlers={mergedCustomEventHandlers}
           editorReady={editorReady}
           editorForwardRef={editorRef}
+          handleConnectionStatus={setHasConnectionFailed}
           handleEditorReady={handleEditorReady}
           handleOpenNavigationPane={handleOpenNavigationPane}
           handlers={handlers}
@@ -178,8 +149,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
           webhookConnectionParams={webhookConnectionParams}
           workspaceSlug={workspaceSlug}
           extendedEditorProps={extendedEditorProps}
-          isFetchingFallbackBinary={isFetchingFallbackBinary}
-          onCollaborationStateChange={setCollaborationState}
         />
       </div>
       <PageNavigationPaneRoot

apps/web/core/components/pages/header/syncing-badge.tsx

@@ -1,72 +0,0 @@
-import { useState, useEffect } from "react";
-import { CloudOff } from "lucide-react";
-import { Tooltip } from "@plane/ui";
-
-type Props = {
-  syncStatus: "syncing" | "synced" | "error";
-};
-
-export const PageSyncingBadge = ({ syncStatus }: Props) => {
-  const [prevSyncStatus, setPrevSyncStatus] = useState<"syncing" | "synced" | "error" | null>(null);
-  const [isVisible, setIsVisible] = useState(syncStatus !== "synced");
-
-  useEffect(() => {
-    // Only handle transitions when there's a change
-    if (prevSyncStatus !== syncStatus) {
-      if (syncStatus === "synced") {
-        // Delay hiding to allow exit animation to complete
-        setTimeout(() => {
-          setIsVisible(false);
-        }, 300); // match animation duration
-      } else {
-        setIsVisible(true);
-      }
-      setPrevSyncStatus(syncStatus);
-    }
-  }, [syncStatus, prevSyncStatus]);
-
-  if (!isVisible || syncStatus === "synced") return null;
-
-  const badgeContent = {
-    syncing: {
-      label: "Syncing...",
-      tooltipHeading: "Syncing...",
-      tooltipContent: "Your changes are being synced with the server. You can continue making changes.",
-      bgColor: "bg-custom-primary-100/20",
-      textColor: "text-custom-primary-100",
-      pulseColor: "bg-custom-primary-100",
-      pulseBgColor: "bg-custom-primary-100/30",
-      icon: null,
-    },
-    error: {
-      label: "Connection lost",
-      tooltipHeading: "Connection lost",
-      tooltipContent:
-        "We're having trouble connecting to the websocket server. Your changes will be synced and saved every 10 seconds.",
-      bgColor: "bg-red-500/20",
-      textColor: "text-red-500",
-      icon: <CloudOff className="size-3" />,
-    },
-  };
-
-  // This way we guarantee badgeContent is defined
-  const content = badgeContent[syncStatus];
-
-  return (
-    <Tooltip tooltipHeading={content.tooltipHeading} tooltipContent={content.tooltipContent}>
-      <div
-        className={`flex-shrink-0 h-6 flex items-center gap-1.5 px-2 rounded ${content.textColor} ${content.bgColor} animate-quickFadeIn`}
-      >
-        {syncStatus === "syncing" ? (
-          <div className="relative flex-shrink-0">
-            <div className="absolute -inset-0.5 rounded-full bg-custom-primary-100/30 animate-ping" />
-            <div className="relative h-1.5 w-1.5 rounded-full bg-custom-primary-100" />
-          </div>
-        ) : (
-          content.icon
-        )}
-        <span className="text-xs font-medium">{content.label}</span>
-      </div>
-    </Tooltip>
-  );
-};

apps/web/core/components/sidebar/sidebar-wrapper.tsx

@@ -49,16 +49,18 @@ export const SidebarWrapper = observer(function SidebarWrapper(props: TSidebarWr
 
           <div className="flex items-center justify-between gap-2 px-2">
             <span className="text-md text-custom-text-200 font-medium pt-1">{title}</span>
-            <div className="flex items-center gap-2">
-              <button
-                type="button"
-                className="flex items-center justify-center size-6 rounded-md text-custom-text-400 hover:text-custom-primary-100 hover:bg-custom-background-90"
-                onClick={() => setIsCustomizeNavDialogOpen(true)}
-              >
-                <PreferencesIcon className="size-4" />
-              </button>
-              <AppSidebarToggleButton />
-            </div>
+            {title === "Projects" && (
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  className="flex items-center justify-center size-6 rounded-md text-custom-text-400 hover:text-custom-primary-100 hover:bg-custom-background-90"
+                  onClick={() => setIsCustomizeNavDialogOpen(true)}
+                >
+                  <PreferencesIcon className="size-4" />
+                </button>
+                <AppSidebarToggleButton />
+              </div>
+            )}
           </div>
           {/* Quick actions */}
           {quickActions}

apps/web/core/components/workspace/settings/workspace-details.tsx

@@ -17,7 +17,6 @@ import type { IWorkspace } from "@plane/types";
 import { CustomSelect, Input } from "@plane/ui";
 import { copyUrlToClipboard, getFileURL } from "@plane/utils";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { WorkspaceImageUploadModal } from "@/components/core/modals/workspace-image-upload-modal";
 // helpers
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
@@ -129,13 +128,7 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
 
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
 
-  if (!currentWorkspace)
-    return (
-      <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!currentWorkspace) return <></>;
   return (
     <>
       <Controller

apps/web/core/components/workspace/sidebar/projects-list-item.tsx

@@ -7,6 +7,7 @@ import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
 import { createRoot } from "react-dom/client";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import { LinkIcon, Settings, Share2, LogOut, MoreHorizontal } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
@@ -225,7 +226,29 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
   useOutsideClickDetector(projectRef, () => projectRef?.current?.classList?.remove(HIGHLIGHT_CLASS));
 
   useEffect(() => {
-    if (URLProjectId === project?.id) setIsProjectListOpen(true);
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+    if (URLProjectId === project?.id) {
+      setIsProjectListOpen(true);
+      // Scroll to active project
+      if (projectRef.current) {
+        timeoutId = setTimeout(() => {
+          if (projectRef.current) {
+            scrollIntoView(projectRef.current, {
+              behavior: "smooth",
+              block: "center",
+              scrollMode: "if-needed",
+            });
+          }
+        }, 200);
+      }
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
   }, [URLProjectId, project?.id, setIsProjectListOpen]);
 
   if (!project) return null;

apps/web/core/hooks/use-expandable-search.ts

@@ -0,0 +1,75 @@
+import { useCallback, useRef, useState } from "react";
+import { useOutsideClickDetector } from "@plane/hooks";
+
+type UseExpandableSearchOptions = {
+  onClose?: () => void;
+};
+
+/**
+ * Custom hook for expandable search input behavior
+ * Handles focus management to prevent unwanted opening on programmatic focus restoration
+ */
+export const useExpandableSearch = (options?: UseExpandableSearchOptions) => {
+  const { onClose } = options || {};
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  // refs
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const wasClickedRef = useRef<boolean>(false);
+
+  // Handle close
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    inputRef.current?.blur();
+    onClose?.();
+  }, [onClose]);
+
+  // Outside click handler - memoized to prevent unnecessary re-registrations
+  const handleOutsideClick = useCallback(() => {
+    if (isOpen) {
+      handleClose();
+    }
+  }, [isOpen, handleClose]);
+
+  // Outside click detection
+  useOutsideClickDetector(containerRef, handleOutsideClick);
+
+  // Track explicit clicks
+  const handleMouseDown = useCallback(() => {
+    wasClickedRef.current = true;
+  }, []);
+
+  // Only open on explicit clicks, not programmatic focus
+  const handleFocus = useCallback(() => {
+    if (wasClickedRef.current) {
+      setIsOpen(true);
+      wasClickedRef.current = false;
+    }
+  }, []);
+
+  // Helper to open panel (for typing/onChange)
+  const openPanel = useCallback(() => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+  }, [isOpen]);
+
+  return {
+    // State
+    isOpen,
+    setIsOpen,
+
+    // Refs
+    containerRef,
+    inputRef,
+
+    // Handlers
+    handleClose,
+    handleMouseDown,
+    handleFocus,
+    openPanel,
+  };
+};

apps/web/core/hooks/use-page-fallback.ts

@@ -1,9 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { EditorRefApi, CollaborationState } from "@plane/editor";
+import { useCallback, useEffect } from "react";
 // plane editor
 import { convertBinaryDataToBase64String, getBinaryDataFromDocumentEditorHTMLString } from "@plane/editor";
-// plane propel
-import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { EditorRefApi } from "@plane/editor";
 // plane types
 import type { TDocumentPayload } from "@plane/types";
 // hooks
@@ -12,37 +10,19 @@ import useAutoSave from "@/hooks/use-auto-save";
 type TArgs = {
   editorRef: React.RefObject<EditorRefApi>;
   fetchPageDescription: () => Promise<ArrayBuffer>;
-  collaborationState: CollaborationState | null;
+  hasConnectionFailed: boolean;
   updatePageDescription: (data: TDocumentPayload) => Promise<void>;
 };
 
 export const usePageFallback = (args: TArgs) => {
-  const { editorRef, fetchPageDescription, collaborationState, updatePageDescription } = args;
-  const hasShownFallbackToast = useRef(false);
-
-  const [isFetchingFallbackBinary, setIsFetchingFallbackBinary] = useState(false);
-
-  // Derive connection failure from collaboration state
-  const hasConnectionFailed = collaborationState?.stage.kind === "disconnected";
+  const { editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription } = args;
 
   const handleUpdateDescription = useCallback(async () => {
     if (!hasConnectionFailed) return;
     const editor = editorRef.current;
     if (!editor) return;
 
-    // Show toast notification when fallback mechanism kicks in (only once)
-    if (!hasShownFallbackToast.current) {
-      setToast({
-        type: TOAST_TYPE.WARNING,
-        title: "Connection lost",
-        message: "Your changes are being saved using backup mechanism. ",
-      });
-      hasShownFallbackToast.current = true;
-    }
-
     try {
-      setIsFetchingFallbackBinary(true);
-
       const latestEncodedDescription = await fetchPageDescription();
       let latestDecodedDescription: Uint8Array;
       if (latestEncodedDescription && latestEncodedDescription.byteLength > 0) {
@@ -61,27 +41,16 @@ export const usePageFallback = (args: TArgs) => {
         description_html: html,
         description: json,
       });
-    } catch (error: any) {
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: "Error",
-        message: `Failed to update description using backup mechanism, ${error?.message}`,
-      });
-    } finally {
-      setIsFetchingFallbackBinary(false);
+    } catch (error) {
+      console.error("Error in updating description using fallback logic:", error);
     }
   }, [editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription]);
 
   useEffect(() => {
     if (hasConnectionFailed) {
       handleUpdateDescription();
-    } else {
-      // Reset toast flag when connection is restored
-      hasShownFallbackToast.current = false;
     }
   }, [handleUpdateDescription, hasConnectionFailed]);
 
   useAutoSave(handleUpdateDescription);
-
-  return { isFetchingFallbackBinary };
 };

apps/web/core/layouts/auth-layout/project-wrapper.tsx

@@ -1,15 +1,12 @@
-import type { FC, ReactNode } from "react";
-import { useEffect } from "react";
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
-import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
-import { EProjectNetwork, GANTT_TIMELINE_TYPE } from "@plane/types";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { GANTT_TIMELINE_TYPE } from "@plane/types";
 // components
-import { JoinProject } from "@/components/auth-screens/project/join-project";
-import { LogoSpinner } from "@/components/common/logo-spinner";
+import { ProjectAccessRestriction } from "@/components/auth-screens/project/project-access-restriction";
 import {
   PROJECT_DETAILS,
   PROJECT_ME_INFORMATION,
@@ -23,10 +20,8 @@ import {
   PROJECT_VIEWS,
   PROJECT_INTAKE_STATE,
 } from "@/constants/fetch-keys";
-import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useProjectEstimates } from "@/hooks/store/estimates";
-import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useLabel } from "@/hooks/store/use-label";
 import { useMember } from "@/hooks/store/use-member";
@@ -39,19 +34,19 @@ import { useTimeLineChart } from "@/hooks/use-timeline-chart";
 
 interface IProjectAuthWrapper {
   workspaceSlug: string;
-  projectId?: string;
+  projectId: string;
   children: ReactNode;
   isLoading?: boolean;
 }
 
 export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IProjectAuthWrapper) {
   const { workspaceSlug, projectId, children, isLoading: isParentLoading = false } = props;
-  // plane hooks
-  const { t } = useTranslation();
+  // states
+  const [isJoiningProject, setIsJoiningProject] = useState(false);
   // store hooks
-  const { toggleCreateProjectModal } = useCommandPalette();
-  const { fetchUserProjectInfo, allowPermissions, getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
-  const { loader, getProjectById, fetchProjectDetails } = useProject();
+  const { fetchUserProjectInfo, allowPermissions } = useUserPermissions();
+  const { fetchProjectDetails } = useProject();
+  const { joinProject } = useUserPermissions();
   const { fetchAllCycles } = useCycle();
   const { fetchModulesSlim, fetchModules } = useModule();
   const { initGantt } = useTimeLineChart(GANTT_TIMELINE_TYPE.MODULE);
@@ -63,10 +58,7 @@ export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IP
   const { data: currentUserData } = useUser();
   const { fetchProjectLabels } = useLabel();
   const { getProjectEstimates } = useProjectEstimates();
-
   // derived values
-  const projectExists = projectId ? getProjectById(projectId) : null;
-  const projectMemberInfo = getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
   const hasPermissionToCurrentProject = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     EUserPermissionsLevel.PROJECT,
@@ -82,120 +74,84 @@ export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IP
   }, []);
 
   // fetching project details
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectDetails(workspaceSlug, projectId) : null
+  const { isLoading: isProjectDetailsLoading, error: projectDetailsError } = useSWR(
+    PROJECT_DETAILS(workspaceSlug, projectId),
+    () => fetchProjectDetails(workspaceSlug, projectId)
   );
-
+  // fetching user project member information
+  useSWR(PROJECT_ME_INFORMATION(workspaceSlug, projectId), () => fetchUserProjectInfo(workspaceSlug, projectId));
   // fetching project member preferences
   useSWR(
-    workspaceSlug && projectId && currentUserData?.id ? PROJECT_MEMBER_PREFERENCES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId && currentUserData?.id
-      ? () => fetchProjectMemberPreferences(workspaceSlug, projectId, currentUserData.id)
-      : null,
+    currentUserData?.id ? PROJECT_MEMBER_PREFERENCES(workspaceSlug, projectId) : null,
+    currentUserData?.id ? () => fetchProjectMemberPreferences(workspaceSlug, projectId, currentUserData.id) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project labels
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_LABELS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_LABELS(workspaceSlug, projectId), () => fetchProjectLabels(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
   // fetching project members
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_MEMBERS(workspaceSlug, projectId), () => fetchProjectMembers(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
   // fetching project states
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_STATES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_STATES(workspaceSlug, projectId), () => fetchProjectStates(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
   // fetching project intake state
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_INTAKE_STATE(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectIntakeState(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_INTAKE_STATE(workspaceSlug, projectId), () => fetchProjectIntakeState(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
   // fetching project estimates
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_ESTIMATES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => getProjectEstimates(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_ESTIMATES(workspaceSlug, projectId), () => getProjectEstimates(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
   // fetching project cycles
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_ALL_CYCLES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_ALL_CYCLES(workspaceSlug, projectId), () => fetchAllCycles(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
   // fetching project modules
   useSWR(
-    workspaceSlug && projectId ? PROJECT_MODULES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId
-      ? async () => {
-          await fetchModulesSlim(workspaceSlug, projectId);
-          await fetchModules(workspaceSlug, projectId);
-        }
-      : null,
+    PROJECT_MODULES(workspaceSlug, projectId),
+    async () => {
+      await Promise.all([fetchModulesSlim(workspaceSlug, projectId), fetchModules(workspaceSlug, projectId)]);
+    },
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project views
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_VIEWS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchViews(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_VIEWS(workspaceSlug, projectId), () => fetchViews(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
 
-  // permissions
-  const canPerformEmptyStateActions = allowPermissions(
-    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    EUserPermissionsLevel.WORKSPACE
-  );
+  // handle join project
+  const handleJoinProject = () => {
+    setIsJoiningProject(true);
+    joinProject(workspaceSlug, projectId)
+      .then(() => fetchProjectDetails(workspaceSlug, projectId))
+      .finally(() => setIsJoiningProject(false));
+  };
 
-  // check if the project member apis is loading
-  if (isParentLoading || (!projectMemberInfo && projectId && hasPermissionToCurrentProject === null))
+  const isProjectLoading = (isParentLoading || isProjectDetailsLoading) && !projectDetailsError;
+
+  if (isProjectLoading) return null;
+
+  if (!isProjectLoading && hasPermissionToCurrentProject === false) {
     return (
-      <div className="grid h-full place-items-center bg-custom-background-100 p-4 rounded-lg border border-custom-border-200">
-        <div className="flex flex-col items-center gap-3 text-center">
-          <LogoSpinner />
-        </div>
-      </div>
-    );
-
-  // check if the user don't have permission to access the project
-  if (
-    ((projectExists?.network && projectExists?.network !== EProjectNetwork.PRIVATE) || isWorkspaceAdmin) &&
-    projectId &&
-    hasPermissionToCurrentProject === false
-  )
-    return <JoinProject projectId={projectId} />;
-
-  // check if the project info is not found.
-  if (loader === "loaded" && projectId && !!hasPermissionToCurrentProject === false)
-    return (
-      <div className="grid h-full place-items-center bg-custom-background-100">
-        <EmptyStateDetailed
-          title={t("workspace_projects.empty_state.general.title")}
-          description={t("workspace_projects.empty_state.general.description")}
-          assetKey="project"
-          assetClassName="size-40"
-          actions={[
-            {
-              label: t("workspace_projects.empty_state.general.primary_button.text"),
-              onClick: () => {
-                toggleCreateProjectModal(true);
-                captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
-              },
-              disabled: !canPerformEmptyStateActions,
-              variant: "primary",
-            },
-          ]}
-        />
-      </div>
+      <ProjectAccessRestriction
+        errorStatusCode={projectDetailsError?.status}
+        isWorkspaceAdmin={isWorkspaceAdmin}
+        handleJoinProject={handleJoinProject}
+        isJoinButtonDisabled={isJoiningProject}
+      />
     );
+  }
 
   return <>{children}</>;
 });

apps/web/core/services/project/project.service.ts

@@ -57,7 +57,7 @@ export class ProjectService extends APIService {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
       .then((response) => response?.data)
       .catch((error) => {
-        throw error?.response?.data;
+        throw error?.response;
       });
   }
 

apps/web/core/store/pages/base-page.ts

@@ -13,7 +13,6 @@ import { PageEditorInstance } from "./page-editor-info";
 export type TBasePage = TPage & {
   // observables
   isSubmitting: TNameDescriptionLoader;
-  isSyncingWithServer: "syncing" | "synced" | "error";
   // computed
   asJSON: TPage | undefined;
   isCurrentUserOwner: boolean;
@@ -36,7 +35,6 @@ export type TBasePage = TPage & {
   removePageFromFavorites: () => Promise<void>;
   duplicate: () => Promise<TPage | undefined>;
   mutateProperties: (data: Partial<TPage>, shouldUpdateName?: boolean) => void;
-  setSyncingStatus: (status: "syncing" | "synced" | "error") => void;
   // sub-store
   editor: PageEditorInstance;
 };
@@ -75,7 +73,6 @@ export type TPageInstance = TBasePage &
 export class BasePage extends ExtendedBasePage implements TBasePage {
   // loaders
   isSubmitting: TNameDescriptionLoader = "saved";
-  isSyncingWithServer: "syncing" | "synced" | "error" = "syncing";
   // page properties
   id: string | undefined;
   name: string | undefined;
@@ -158,7 +155,6 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
       created_at: observable.ref,
       updated_at: observable.ref,
       deleted_at: observable.ref,
-      isSyncingWithServer: observable.ref,
       // helpers
       oldName: observable.ref,
       setIsSubmitting: action,
@@ -539,10 +535,4 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
       set(this, key, value);
     });
   };
-
-  setSyncingStatus = (status: "syncing" | "synced" | "error") => {
-    runInAction(() => {
-      this.isSyncingWithServer = status;
-    });
-  };
 }

packages/editor/package.json

@@ -44,16 +44,13 @@
     "@tiptap/extension-blockquote": "^2.22.3",
     "@tiptap/extension-character-count": "^2.22.3",
     "@tiptap/extension-collaboration": "^2.22.3",
-    "@tiptap/extension-document": "^3.2.0",
     "@tiptap/extension-emoji": "^2.22.3",
-    "@tiptap/extension-heading": "^3.4.3",
     "@tiptap/extension-image": "^2.22.3",
     "@tiptap/extension-list-item": "^2.22.3",
     "@tiptap/extension-mention": "^2.22.3",
     "@tiptap/extension-placeholder": "^2.22.3",
     "@tiptap/extension-task-item": "^2.22.3",
     "@tiptap/extension-task-list": "^2.22.3",
-    "@tiptap/extension-text": "^3.2.0",
     "@tiptap/extension-text-align": "^2.22.3",
     "@tiptap/extension-text-style": "^2.22.3",
     "@tiptap/extension-underline": "^2.22.3",

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

@@ -1,21 +1,20 @@
-import React, { useMemo } from "react";
+import React from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // components
 import { PageRenderer } from "@/components/editors";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
-// contexts
-import { CollaborationProvider, useCollaboration } from "@/contexts/collaboration-context";
 // helpers
 import { getEditorClassNames } from "@/helpers/common";
 // hooks
 import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
+// constants
+import { DocumentEditorSideEffects } from "@/plane-editor/components/document-editor-side-effects";
 // types
 import type { EditorRefApi, ICollaborativeDocumentEditorProps } from "@/types";
-import { DocumentEditorSideEffects } from "@/plane-editor/components/document-editor-side-effects";
 
-function CollaborativeDocumentEditorInner(props: ICollaborativeDocumentEditorProps) {
+function CollaborativeDocumentEditor(props: ICollaborativeDocumentEditorProps) {
   const {
     aiHandler,
     bubbleMenuEnabled = true,
@@ -42,20 +41,15 @@ function CollaborativeDocumentEditorInner(props: ICollaborativeDocumentEditorPro
     onEditorFocus,
     onTransaction,
     placeholder,
+    realtimeConfig,
+    serverHandler,
     tabIndex,
     user,
     extendedDocumentEditorProps,
-    titleRef,
-    updatePageProperties,
-    isFetchingFallbackBinary,
   } = props;
 
-  // Get non-null provider from context
-  const { provider, state, actions } = useCollaboration();
-
-  // Editor initialization with guaranteed non-null provider
-  const { editor, titleEditor } = useCollaborativeEditor({
-    provider,
+  // use document editor
+  const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
     disabledExtensions,
     editable,
     editorClassName,
@@ -76,10 +70,11 @@ function CollaborativeDocumentEditorInner(props: ICollaborativeDocumentEditorPro
     onEditorFocus,
     onTransaction,
     placeholder,
+    realtimeConfig,
+    serverHandler,
     tabIndex,
-    titleRef,
     user,
-    actions,
+    extendedDocumentEditorProps,
   });
 
   const editorContainerClassNames = getEditorClassNames({
@@ -88,72 +83,37 @@ function CollaborativeDocumentEditorInner(props: ICollaborativeDocumentEditorPro
     containerClassName,
   });
 
-  // Show loader ONLY when cache is known empty and server hasn't synced yet
-  const shouldShowSyncLoader = state.isCacheReady && !state.hasCachedContent && !state.isServerSynced;
-  const shouldWaitForFallbackBinary = isFetchingFallbackBinary && !state.hasCachedContent && state.isServerDisconnected;
-  const isLoading = shouldShowSyncLoader || shouldWaitForFallbackBinary;
-
-  // Gate content rendering on isDocReady to prevent empty editor flash
-  const showContentSkeleton = !state.isDocReady;
-
-  if (!editor || !titleEditor) return null;
+  if (!editor) return null;
 
   return (
     <>
-      <div
-        className={cn(
-          "transition-opacity duration-200",
-          showContentSkeleton && !isLoading && "opacity-0 pointer-events-none"
-        )}
-      >
-        <DocumentEditorSideEffects editor={editor} id={id} extendedEditorProps={extendedEditorProps} />
-        <PageRenderer
-          aiHandler={aiHandler}
-          bubbleMenuEnabled={bubbleMenuEnabled}
-          displayConfig={displayConfig}
-          documentLoaderClassName={documentLoaderClassName}
-          disabledExtensions={disabledExtensions}
-          extendedDocumentEditorProps={extendedDocumentEditorProps}
-          editor={editor}
-          flaggedExtensions={flaggedExtensions}
-          titleEditor={titleEditor}
-          editorContainerClassName={cn(editorContainerClassNames, "document-editor")}
-          extendedEditorProps={extendedEditorProps}
-          id={id}
-          isLoading={isLoading}
-          isTouchDevice={!!isTouchDevice}
-          tabIndex={tabIndex}
-          provider={provider}
-          state={state}
-        />
-      </div>
+      <DocumentEditorSideEffects editor={editor} id={id} extendedEditorProps={extendedEditorProps} />
+      <PageRenderer
+        aiHandler={aiHandler}
+        bubbleMenuEnabled={bubbleMenuEnabled}
+        displayConfig={displayConfig}
+        documentLoaderClassName={documentLoaderClassName}
+        editor={editor}
+        editorContainerClassName={cn(editorContainerClassNames, "document-editor")}
+        extendedEditorProps={extendedEditorProps}
+        id={id}
+        isTouchDevice={!!isTouchDevice}
+        isLoading={!hasServerSynced && !hasServerConnectionFailed}
+        tabIndex={tabIndex}
+        flaggedExtensions={flaggedExtensions}
+        disabledExtensions={disabledExtensions}
+        extendedDocumentEditorProps={extendedDocumentEditorProps}
+      />
     </>
   );
 }
 
-// Outer component that provides collaboration context
-const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> = (props) => {
-  const { id, realtimeConfig, serverHandler, user } = props;
-
-  const token = useMemo(() => JSON.stringify(user), [user]);
-
-  return (
-    <CollaborationProvider
-      docId={id}
-      serverUrl={realtimeConfig.url}
-      authToken={token}
-      onStateChange={serverHandler?.onStateChange}
-    >
-      <CollaborativeDocumentEditorInner {...props} />
-    </CollaborationProvider>
-  );
-};
-
-const CollaborativeDocumentEditorWithRef = React.forwardRef<EditorRefApi, ICollaborativeDocumentEditorProps>(
-  (props, ref) => (
-    <CollaborativeDocumentEditor key={props.id} {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi>} />
-  )
-);
+const CollaborativeDocumentEditorWithRef = React.forwardRef(function CollaborativeDocumentEditorWithRef(
+  props: ICollaborativeDocumentEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return <CollaborativeDocumentEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />;
+});
 
 CollaborativeDocumentEditorWithRef.displayName = "CollaborativeDocumentEditorWithRef";
 

packages/editor/src/core/components/editors/document/page-renderer.tsx

@@ -1,12 +1,10 @@
-import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Editor } from "@tiptap/react";
 // plane imports
 import { cn } from "@plane/utils";
 // components
 import { DocumentContentLoader, EditorContainer, EditorContentWrapper } from "@/components/editors";
-import { BlockMenu, EditorBubbleMenu } from "@/components/menus";
+import { AIFeaturesMenu, BlockMenu, EditorBubbleMenu } from "@/components/menus";
 // types
-import type { TCollabValue } from "@/contexts";
 import type {
   ICollaborativeDocumentEditorPropsExtended,
   IEditorProps,
@@ -22,7 +20,6 @@ type Props = {
   displayConfig: TDisplayConfig;
   documentLoaderClassName?: string;
   editor: Editor;
-  titleEditor?: Editor;
   editorContainerClassName: string;
   extendedDocumentEditorProps?: ICollaborativeDocumentEditorPropsExtended;
   extendedEditorProps: IEditorPropsExtended;
@@ -30,13 +27,12 @@ type Props = {
   id: string;
   isLoading?: boolean;
   isTouchDevice: boolean;
-  provider?: HocuspocusProvider;
-  state?: TCollabValue["state"];
   tabIndex?: number;
 };
 
 export function PageRenderer(props: Props) {
   const {
+    aiHandler,
     bubbleMenuEnabled,
     disabledExtensions,
     displayConfig,
@@ -49,10 +45,8 @@ export function PageRenderer(props: Props) {
     isLoading,
     isTouchDevice,
     tabIndex,
-    provider,
-    state,
-    titleEditor
   } = props;
+
   return (
     <div
       className={cn("frame-renderer flex-grow w-full", {
@@ -62,47 +56,33 @@ export function PageRenderer(props: Props) {
       {isLoading ? (
         <DocumentContentLoader className={documentLoaderClassName} />
       ) : (
-        <>
-          {titleEditor && (
-            <div className="relative w-full py-3">
-              <EditorContainer
-                editor={titleEditor}
-                id={id + "-title"}
-                isTouchDevice={isTouchDevice}
-                editorContainerClassName="page-title-editor bg-transparent py-3 border-none"
-                displayConfig={displayConfig}
-              >
-                <EditorContentWrapper
-                  editor={titleEditor}
-                  id={id + "-title"}
-                  tabIndex={tabIndex}
-                  className="no-scrollbar placeholder-custom-text-400 bg-transparent tracking-[-2%] font-bold text-[2rem] leading-[2.375rem] w-full outline-none p-0 border-none resize-none rounded-none"
+        <EditorContainer
+          displayConfig={displayConfig}
+          editor={editor}
+          editorContainerClassName={editorContainerClassName}
+          id={id}
+          isTouchDevice={isTouchDevice}
+        >
+          <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
+          {editor.isEditable && !isTouchDevice && (
+            <div>
+              {bubbleMenuEnabled && (
+                <EditorBubbleMenu
+                  disabledExtensions={disabledExtensions}
+                  editor={editor}
+                  extendedEditorProps={extendedEditorProps}
+                  flaggedExtensions={flaggedExtensions}
                 />
-              </EditorContainer>
+              )}
+              <BlockMenu
+                editor={editor}
+                flaggedExtensions={flaggedExtensions}
+                disabledExtensions={disabledExtensions}
+              />
+              <AIFeaturesMenu menu={aiHandler?.menu} />
             </div>
           )}
-          <EditorContainer
-            displayConfig={displayConfig}
-            editor={editor}
-            editorContainerClassName={editorContainerClassName}
-            id={id}
-            isTouchDevice={isTouchDevice}
-            provider={provider}
-            state={state}
-          >
-            <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
-            {editor.isEditable && !isTouchDevice && (
-              <div>
-                {bubbleMenuEnabled && <EditorBubbleMenu editor={editor} disabledExtensions={disabledExtensions} extendedEditorProps={extendedEditorProps} flaggedExtensions={flaggedExtensions}/>}
-                <BlockMenu
-                  editor={editor}
-                  flaggedExtensions={flaggedExtensions}
-                  disabledExtensions={disabledExtensions}
-                />
-              </div>
-            )}
-          </EditorContainer>
-        </>
+        </EditorContainer>
       )}
     </div>
   );

packages/editor/src/core/components/editors/editor-container.tsx

@@ -1,17 +1,13 @@
-import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Editor } from "@tiptap/react";
 import type { FC, ReactNode } from "react";
-import { useCallback, useEffect, useRef } from "react";
+import { useRef } from "react";
 // plane utils
 import { cn } from "@plane/utils";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // components
-import type { TCollabValue } from "@/contexts";
 import { LinkContainer } from "@/plane-editor/components/link-container";
-// plugins
-import { nodeHighlightPluginKey } from "@/plugins/highlight";
 // types
 import type { TDisplayConfig } from "@/types";
 
@@ -22,85 +18,12 @@ type Props = {
   editorContainerClassName: string;
   id: string;
   isTouchDevice: boolean;
-  provider?: HocuspocusProvider | undefined;
-  state?: TCollabValue["state"];
 };
 
-export const EditorContainer: FC<Props> = (props) => {
-  const { children, displayConfig, editor, editorContainerClassName, id, isTouchDevice, provider, state } = props;
+export function EditorContainer(props: Props) {
+  const { children, displayConfig, editor, editorContainerClassName, id, isTouchDevice } = props;
   // refs
   const containerRef = useRef<HTMLDivElement>(null);
-  const hasScrolledOnce = useRef(false);
-  const scrollToNode = useCallback(
-    (nodeId: string) => {
-      if (!editor) return false;
-
-      const doc = editor.state.doc;
-      let pos: number | null = null;
-
-      doc.descendants((node, position) => {
-        if (node.attrs && node.attrs.id === nodeId) {
-          pos = position;
-          return false;
-        }
-      });
-
-      if (pos === null) {
-        return false;
-      }
-
-      const nodePosition = pos;
-      const tr = editor.state.tr.setMeta(nodeHighlightPluginKey, { nodeId });
-      editor.view.dispatch(tr);
-
-      requestAnimationFrame(() => {
-        const domNode = editor.view.nodeDOM(nodePosition);
-        if (domNode instanceof HTMLElement) {
-          domNode.scrollIntoView({ behavior: "instant", block: "center" });
-        }
-      });
-
-      editor.once("focus", () => {
-        const clearTr = editor.state.tr.setMeta(nodeHighlightPluginKey, { nodeId: null });
-        editor.view.dispatch(clearTr);
-      });
-
-      hasScrolledOnce.current = true;
-      return true;
-    },
-
-    [editor]
-  );
-
-  useEffect(() => {
-    const nodeId = window.location.href.split("#")[1];
-
-    const handleSynced = () => scrollToNode(nodeId);
-
-    if (nodeId && !hasScrolledOnce.current) {
-      if (provider && state) {
-        const { hasCachedContent } = state;
-        // If the provider is synced or the cached content is available and the server is disconnected, scroll to the node
-        if (hasCachedContent) {
-          const hasScrolled = handleSynced();
-          if (!hasScrolled) {
-            provider.on("synced", handleSynced);
-          }
-        } else if (provider.isSynced) {
-          handleSynced();
-        } else {
-          provider.on("synced", handleSynced);
-        }
-      } else {
-        handleSynced();
-      }
-      return () => {
-        if (provider) {
-          provider.off("synced", handleSynced);
-        }
-      };
-    }
-  }, [scrollToNode, provider, state]);
 
   const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (event.target !== event.currentTarget) return;
@@ -165,6 +88,7 @@ export const EditorContainer: FC<Props> = (props) => {
           `editor-container cursor-text relative line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
           {
             "active-editor": editor?.isFocused && editor?.isEditable,
+            "wide-layout": displayConfig.wideLayout,
           },
           displayConfig.fontSize ?? DEFAULT_DISPLAY_CONFIG.fontSize,
           displayConfig.fontStyle ?? DEFAULT_DISPLAY_CONFIG.fontStyle,

packages/editor/src/core/components/editors/editor-content.tsx

@@ -3,22 +3,17 @@ import type { Editor } from "@tiptap/react";
 import type { FC, ReactNode } from "react";
 
 type Props = {
-  className?: string;
   children?: ReactNode;
   editor: Editor | null;
   id: string;
   tabIndex?: number;
 };
 
-export const EditorContentWrapper: FC<Props> = (props) => {
-  const { editor, className, children, tabIndex, id } = props;
+export function EditorContentWrapper(props: Props) {
+  const { editor, children, tabIndex, id } = props;
 
   return (
-    <div
-      tabIndex={tabIndex}
-      onFocus={() => editor?.chain().focus(undefined, { scrollIntoView: false }).run()}
-      className={className}
-    >
+    <div tabIndex={tabIndex} onFocus={() => editor?.chain().focus(undefined, { scrollIntoView: false }).run()}>
       <EditorContent editor={editor} id={id} />
       {children}
     </div>

packages/editor/src/core/contexts/collaboration-context.tsx

@@ -1,32 +0,0 @@
-import React, { createContext, useContext } from "react";
-// hooks
-import { useYjsSetup } from "@/hooks/use-yjs-setup";
-
-export type TCollabValue = NonNullable<ReturnType<typeof useYjsSetup>>;
-
-const CollabContext = createContext<TCollabValue | null>(null);
-
-type CollabProviderProps = Parameters<typeof useYjsSetup>[0] & {
-  fallback?: React.ReactNode;
-  children: React.ReactNode;
-};
-
-export function CollaborationProvider({ fallback = null, children, ...args }: CollabProviderProps) {
-  const setup = useYjsSetup(args);
-
-  // Only wait for provider setup, not content ready
-  // Consumers can check state.isDocReady to gate content rendering
-  if (!setup) {
-    return <>{fallback}</>;
-  }
-
-  return <CollabContext.Provider value={setup}>{children}</CollabContext.Provider>;
-}
-
-export function useCollaboration(): TCollabValue {
-  const ctx = useContext(CollabContext);
-  if (!ctx) {
-    throw new Error("useCollaboration must be used inside <CollaborationProvider>");
-  }
-  return ctx; // guaranteed non-null
-}

packages/editor/src/core/contexts/index.ts

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

packages/editor/src/core/extensions/title-extension.ts

@@ -1,14 +0,0 @@
-import type { AnyExtension, Extensions } from "@tiptap/core";
-import Document from "@tiptap/extension-document";
-import Heading from "@tiptap/extension-heading";
-import Text from "@tiptap/extension-text";
-
-export const TitleExtensions: Extensions = [
-  Document.extend({
-    content: "heading",
-  }),
-  Heading.configure({
-    levels: [1],
-  }) as AnyExtension,
-  Text,
-];

packages/editor/src/core/helpers/yjs-utils.ts

@@ -1,5 +1,4 @@
 import { Buffer } from "buffer";
-import type { Extensions } from "@tiptap/core";
 import { getSchema } from "@tiptap/core";
 import { generateHTML, generateJSON } from "@tiptap/html";
 import { prosemirrorJSONToYDoc, yXmlFragmentToProseMirrorRootNode } from "y-prosemirror";
@@ -10,12 +9,10 @@ import {
   CoreEditorExtensionsWithoutProps,
   DocumentEditorExtensionsWithoutProps,
 } from "@/extensions/core-without-props";
-import { TitleExtensions } from "@/extensions/title-extension";
 
 // editor extension configs
 const RICH_TEXT_EDITOR_EXTENSIONS = CoreEditorExtensionsWithoutProps;
 const DOCUMENT_EDITOR_EXTENSIONS = [...CoreEditorExtensionsWithoutProps, ...DocumentEditorExtensionsWithoutProps];
-export const TITLE_EDITOR_EXTENSIONS: Extensions = TitleExtensions;
 // editor schemas
 const richTextEditorSchema = getSchema(RICH_TEXT_EDITOR_EXTENSIONS);
 const documentEditorSchema = getSchema(DOCUMENT_EDITOR_EXTENSIONS);
@@ -48,10 +45,9 @@ export const convertBinaryDataToBase64String = (document: Uint8Array): string =>
 /**
  * @description this function decodes base64 string to binary data
  * @param {string} document
- * @returns {Buffer<ArrayBuffer>}
+ * @returns {ArrayBuffer}
  */
-export const convertBase64StringToBinaryData = (document: string): Buffer<ArrayBuffer> =>
-  Buffer.from(document, "base64");
+export const convertBase64StringToBinaryData = (document: string): ArrayBuffer => Buffer.from(document, "base64");
 
 /**
  * @description this function generates the binary equivalent of html content for the rich text editor
@@ -118,13 +114,11 @@ export const getAllDocumentFormatsFromRichTextEditorBinaryData = (
  * @returns
  */
 export const getAllDocumentFormatsFromDocumentEditorBinaryData = (
-  description: Uint8Array,
-  updateTitle: boolean
+  description: Uint8Array
 ): {
   contentBinaryEncoded: string;
   contentJSON: object;
   contentHTML: string;
-  titleHTML?: string;
 } => {
   // encode binary description data
   const base64Data = convertBinaryDataToBase64String(description);
@@ -136,24 +130,11 @@ export const getAllDocumentFormatsFromDocumentEditorBinaryData = (
   // convert to HTML
   const contentHTML = generateHTML(contentJSON, DOCUMENT_EDITOR_EXTENSIONS);
 
-  if (updateTitle) {
-    const title = yDoc.getXmlFragment("title");
-    const titleJSON = yXmlFragmentToProseMirrorRootNode(title, documentEditorSchema).toJSON();
-    const titleHTML = extractTextFromHTML(generateHTML(titleJSON, DOCUMENT_EDITOR_EXTENSIONS));
-
-    return {
-      contentBinaryEncoded: base64Data,
-      contentJSON,
-      contentHTML,
-      titleHTML,
-    };
-  } else {
-    return {
-      contentBinaryEncoded: base64Data,
-      contentJSON,
-      contentHTML,
-    };
-  }
+  return {
+    contentBinaryEncoded: base64Data,
+    contentJSON,
+    contentHTML,
+  };
 };
 
 type TConvertHTMLDocumentToAllFormatsArgs = {
@@ -189,10 +170,8 @@ export const convertHTMLDocumentToAllFormats = (args: TConvertHTMLDocumentToAllF
     // Convert HTML to binary format for document editor
     const contentBinary = getBinaryDataFromDocumentEditorHTMLString(document_html);
     // Generate all document formats from the binary data
-    const { contentBinaryEncoded, contentHTML, contentJSON } = getAllDocumentFormatsFromDocumentEditorBinaryData(
-      contentBinary,
-      false
-    );
+    const { contentBinaryEncoded, contentHTML, contentJSON } =
+      getAllDocumentFormatsFromDocumentEditorBinaryData(contentBinary);
     allFormats = {
       description: contentJSON,
       description_html: contentHTML,
@@ -204,9 +183,3 @@ export const convertHTMLDocumentToAllFormats = (args: TConvertHTMLDocumentToAllF
 
   return allFormats;
 };
-
-export const extractTextFromHTML = (html: string): string => {
-  // Use a regex to extract text between tags
-  const textMatch = html.replace(/<[^>]*>/g, "");
-  return textMatch || "";
-};

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

@@ -1,9 +1,7 @@
-import type { HocuspocusProvider } from "@hocuspocus/provider";
-import type { Extensions } from "@tiptap/core";
+import { HocuspocusProvider } from "@hocuspocus/provider";
 import Collaboration from "@tiptap/extension-collaboration";
-// react
-import type React from "react";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { IndexeddbPersistence } from "y-indexeddb";
 // extensions
 import { HeadingListExtension, SideMenuExtension } from "@/extensions";
 // hooks
@@ -11,28 +9,10 @@ import { useEditor } from "@/hooks/use-editor";
 // plane editor extensions
 import { DocumentEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // types
-import type {
-  TCollaborativeEditorHookProps,
-  ICollaborativeDocumentEditorProps,
-  IEditorPropsExtended,
-  TEditorHookProps,
-  EditorTitleRefApi,
-} from "@/types";
-// local imports
-import { useEditorNavigation } from "./use-editor-navigation";
-import { useTitleEditor } from "./use-title-editor";
+import type { TCollaborativeEditorHookProps } from "@/types";
 
-type UseCollaborativeEditorArgs = Omit<TCollaborativeEditorHookProps, "realtimeConfig" | "serverHandler" | "user"> & {
-  provider: HocuspocusProvider;
-  user: TCollaborativeEditorHookProps["user"];
-  actions: {
-    signalForcedClose: (value: boolean) => void;
-  };
-};
-
-export const useCollaborativeEditor = (props: UseCollaborativeEditorArgs) => {
+export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) => {
   const {
-    provider,
     onAssetChange,
     onChange,
     onTransaction,
@@ -44,27 +24,70 @@ export const useCollaborativeEditor = (props: UseCollaborativeEditorArgs) => {
     extensions = [],
     fileHandler,
     flaggedExtensions,
-    forwardedRef,
     getEditorMetaData,
+    forwardedRef,
     handleEditorReady,
     id,
-    mentionHandler,
     dragDropEnabled = true,
     isTouchDevice,
+    mentionHandler,
     onEditorFocus,
     placeholder,
+    realtimeConfig,
+    serverHandler,
     tabIndex,
-    titleRef,
-    updatePageProperties,
     user,
-    actions,
   } = props;
+  // states
+  const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false);
+  const [hasServerSynced, setHasServerSynced] = useState(false);
+  // initialize Hocuspocus provider
+  const provider = useMemo(
+    () =>
+      new HocuspocusProvider({
+        name: id,
+        // using user id as a token to verify the user on the server
+        token: JSON.stringify(user),
+        url: realtimeConfig.url,
+        onAuthenticationFailed: () => {
+          serverHandler?.onServerError?.();
+          setHasServerConnectionFailed(true);
+        },
+        onConnect: () => serverHandler?.onConnect?.(),
+        onClose: (data) => {
+          if (data.event.code === 1006) {
+            serverHandler?.onServerError?.();
+            setHasServerConnectionFailed(true);
+          }
+        },
+        onSynced: () => setHasServerSynced(true),
+      }),
+    [id, realtimeConfig, serverHandler, user]
+  );
 
-  const { mainNavigationExtension, titleNavigationExtension, setMainEditor, setTitleEditor } = useEditorNavigation();
+  const localProvider = useMemo(
+    () => (id ? new IndexeddbPersistence(id, provider.document) : undefined),
+    [id, provider]
+  );
 
-  // Memoize extensions to avoid unnecessary editor recreations
-  const editorExtensions = useMemo(
-    () => [
+  // destroy and disconnect all providers connection on unmount
+  useEffect(
+    () => () => {
+      provider?.destroy();
+      localProvider?.destroy();
+    },
+    [provider, localProvider]
+  );
+
+  const editor = useEditor({
+    disabledExtensions,
+    extendedEditorProps,
+    id,
+    editable,
+    editorProps,
+    editorClassName,
+    enableHistory: false,
+    extensions: [
       SideMenuExtension({
         aiEnabled: !disabledExtensions?.includes("ai"),
         dragDropEnabled,
@@ -72,7 +95,6 @@ export const useCollaborativeEditor = (props: UseCollaborativeEditorArgs) => {
       HeadingListExtension,
       Collaboration.configure({
         document: provider.document,
-        field: "default",
       }),
       ...extensions,
       ...DocumentEditorAdditionalExtensions({
@@ -84,118 +106,26 @@ export const useCollaborativeEditor = (props: UseCollaborativeEditorArgs) => {
         provider,
         userDetails: user,
       }),
-      mainNavigationExtension,
     ],
-    [
-      provider,
-      disabledExtensions,
-      dragDropEnabled,
-      extensions,
-      extendedEditorProps,
-      fileHandler,
-      flaggedExtensions,
-      editable,
-      user,
-      mainNavigationExtension,
-    ]
-  );
-
-  // Editor configuration
-  const editorConfig = useMemo<TEditorHookProps>(
-    () => ({
-      disabledExtensions,
-      extendedEditorProps,
-      id,
-      editable,
-      editorProps,
-      editorClassName,
-      enableHistory: false,
-      extensions: editorExtensions,
-      fileHandler,
-      flaggedExtensions,
-      forwardedRef,
-      getEditorMetaData,
-      handleEditorReady,
-      isTouchDevice,
-      mentionHandler,
-      onAssetChange,
-      onChange,
-      onEditorFocus,
-      onTransaction,
-      placeholder,
-      provider,
-      tabIndex,
-    }),
-    [
-      provider,
-      disabledExtensions,
-      extendedEditorProps,
-      id,
-      editable,
-      editorProps,
-      editorClassName,
-      editorExtensions,
-      fileHandler,
-      flaggedExtensions,
-      forwardedRef,
-      getEditorMetaData,
-      handleEditorReady,
-      isTouchDevice,
-      mentionHandler,
-      onAssetChange,
-      onChange,
-      onEditorFocus,
-      onTransaction,
-      placeholder,
-      tabIndex,
-    ]
-  );
-
-  const editor = useEditor(editorConfig);
-
-  const titleExtensions = useMemo(
-    () => [
-      Collaboration.configure({
-        document: provider.document,
-        field: "title",
-      }),
-      titleNavigationExtension,
-    ],
-    [provider, titleNavigationExtension]
-  );
-
-  const titleEditorConfig = useMemo<{
-    id: string;
-    editable: boolean;
-    provider: HocuspocusProvider;
-    titleRef?: React.MutableRefObject<EditorTitleRefApi | null>;
-    updatePageProperties?: ICollaborativeDocumentEditorProps["updatePageProperties"];
-    extensions: Extensions;
-    extendedEditorProps?: IEditorPropsExtended;
-  }>(
-    () => ({
-      id,
-      editable,
-      provider,
-      titleRef,
-      updatePageProperties,
-      extensions: titleExtensions,
-      extendedEditorProps,
-    }),
-    [provider, id, editable, titleRef, updatePageProperties, titleExtensions, extendedEditorProps]
-  );
-
-  const titleEditor = useTitleEditor(titleEditorConfig as Parameters<typeof useTitleEditor>[0]);
-
-  useEffect(() => {
-    if (editor && titleEditor) {
-      setMainEditor(editor);
-      setTitleEditor(titleEditor);
-    }
-  }, [editor, titleEditor, setMainEditor, setTitleEditor]);
+    fileHandler,
+    flaggedExtensions,
+    forwardedRef,
+    getEditorMetaData,
+    handleEditorReady,
+    isTouchDevice,
+    mentionHandler,
+    onAssetChange,
+    onChange,
+    onEditorFocus,
+    onTransaction,
+    placeholder,
+    provider,
+    tabIndex,
+  });
 
   return {
     editor,
-    titleEditor,
+    hasServerConnectionFailed,
+    hasServerSynced,
   };
 };

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

@@ -1,169 +0,0 @@
-import type { Editor } from "@tiptap/core";
-import { Extension } from "@tiptap/core";
-import { useCallback, useRef } from "react";
-
-/**
- * Creates a title editor extension that enables keyboard navigation to the main editor
- *
- * @param getMainEditor Function to get the main editor instance
- * @returns A Tiptap extension with keyboard shortcuts
- */
-export const createTitleNavigationExtension = (getMainEditor: () => Editor | null) =>
-  Extension.create({
-    name: "titleEditorNavigation",
-    priority: 10,
-
-    addKeyboardShortcuts() {
-      return {
-        // Arrow down at end of title - Move to main editor
-        ArrowDown: () => {
-          const mainEditor = getMainEditor();
-          if (!mainEditor) return false;
-
-          // If cursor is at the end of the title
-          mainEditor.commands.focus("start");
-          return true;
-        },
-
-        // Right arrow at end of title - Move to main editor
-        ArrowRight: ({ editor: titleEditor }) => {
-          const mainEditor = getMainEditor();
-          if (!mainEditor) return false;
-
-          const { from, to } = titleEditor.state.selection;
-          const documentLength = titleEditor.state.doc.content.size;
-
-          // If cursor is at the end of the title
-          if (from === to && to === documentLength - 1) {
-            mainEditor.commands.focus("start");
-            return true;
-          }
-          return false;
-        },
-
-        // Enter - Create new line in main editor and focus
-        Enter: () => {
-          const mainEditor = getMainEditor();
-          if (!mainEditor) return false;
-
-          // Focus at the start of the main editor
-          mainEditor.chain().focus().insertContentAt(0, { type: "paragraph" }).run();
-          return true;
-        },
-      };
-    },
-  });
-
-/**
- * Creates a main editor extension that enables keyboard navigation to the title editor
- *
- * @param getTitleEditor Function to get the title editor instance
- * @returns A Tiptap extension with keyboard shortcuts
- */
-export const createMainNavigationExtension = (getTitleEditor: () => Editor | null) =>
-  Extension.create({
-    name: "mainEditorNavigation",
-    priority: 10,
-
-    addKeyboardShortcuts() {
-      return {
-        // Arrow up at start of main editor - Move to title editor
-        ArrowUp: ({ editor: mainEditor }) => {
-          const titleEditor = getTitleEditor();
-          if (!titleEditor) return false;
-
-          const { from, to } = mainEditor.state.selection;
-
-          // If cursor is at the start of the main editor
-          if (from === 1 && to === 1) {
-            titleEditor.commands.focus("end");
-            return true;
-          }
-          return false;
-        },
-
-        // Left arrow at start of main editor - Move to title editor
-        ArrowLeft: ({ editor: mainEditor }) => {
-          const titleEditor = getTitleEditor();
-          if (!titleEditor) return false;
-
-          const { from, to } = mainEditor.state.selection;
-
-          // If cursor is at the absolute start of the main editor
-          if (from === 1 && to === 1) {
-            titleEditor.commands.focus("end");
-            return true;
-          }
-          return false;
-        },
-
-        // Backspace - Special handling for first paragraph
-        Backspace: ({ editor }) => {
-          const titleEditor = getTitleEditor();
-          if (!titleEditor) return false;
-
-          const { from, to, empty } = editor.state.selection;
-
-          // Only handle when cursor is at position 1 with empty selection
-          if (from === 1 && to === 1 && empty) {
-            const firstNode = editor.state.doc.firstChild;
-
-            // If first node is a paragraph
-            if (firstNode && firstNode.type.name === "paragraph") {
-              // If paragraph is already empty, delete it and focus title editor
-              if (firstNode.content.size === 0) {
-                editor.commands.deleteNode("paragraph");
-                // Use setTimeout to ensure the node is deleted before changing focus
-                setTimeout(() => titleEditor.commands.focus("end"), 0);
-                return true;
-              }
-              // If paragraph is not empty, just move focus to title editor
-              else {
-                titleEditor.commands.focus("end");
-                return true;
-              }
-            }
-          }
-          return false;
-        },
-      };
-    },
-  });
-
-/**
- * Hook to manage navigation between title and main editors
- *
- * Creates extension factories for keyboard navigation between editors
- * and maintains references to both editors
- *
- * @returns Object with editor setters and extensions
- */
-export const useEditorNavigation = () => {
-  // Create refs to store editor instances
-  const titleEditorRef = useRef<Editor | null>(null);
-  const mainEditorRef = useRef<Editor | null>(null);
-
-  // Create stable getter functions
-  const getTitleEditor = useCallback(() => titleEditorRef.current, []);
-  const getMainEditor = useCallback(() => mainEditorRef.current, []);
-
-  // Create stable setter functions
-  const setTitleEditor = useCallback((editor: Editor | null) => {
-    titleEditorRef.current = editor;
-  }, []);
-
-  const setMainEditor = useCallback((editor: Editor | null) => {
-    mainEditorRef.current = editor;
-  }, []);
-
-  // Create extension factories that access editor refs
-  const titleNavigationExtension = createTitleNavigationExtension(getMainEditor);
-  const mainNavigationExtension = createMainNavigationExtension(getTitleEditor);
-
-  return {
-    setTitleEditor,
-    setMainEditor,
-    titleNavigationExtension,
-    mainNavigationExtension,
-  };
-};

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

@@ -1,80 +0,0 @@
-import type { HocuspocusProvider } from "@hocuspocus/provider";
-import type { Extensions } from "@tiptap/core";
-import { Placeholder } from "@tiptap/extension-placeholder";
-import { useEditor } from "@tiptap/react";
-import { useImperativeHandle } from "react";
-// constants
-import { CORE_EDITOR_META } from "@/constants/meta";
-// extensions
-import { TitleExtensions } from "@/extensions/title-extension";
-// helpers
-import { getEditorRefHelpers } from "@/helpers/editor-ref";
-// types
-import type { IEditorPropsExtended } from "@/types";
-import type { EditorTitleRefApi, ICollaborativeDocumentEditorProps } from "@/types/editor";
-
-type Props = {
-  editable?: boolean;
-  provider: HocuspocusProvider;
-  titleRef?: React.MutableRefObject<EditorTitleRefApi | null>;
-  extensions?: Extensions;
-  initialValue?: string;
-  field?: string;
-  placeholder?: string;
-  updatePageProperties?: ICollaborativeDocumentEditorProps["updatePageProperties"];
-  id: string;
-  extendedEditorProps?: IEditorPropsExtended;
-};
-
-/**
- * A hook that creates a title editor with collaboration features
- * Uses the same Y.Doc as the main editor but a different field
- */
-export const useTitleEditor = (props: Props) => {
-  const { editable = true, id, initialValue = "", extensions, provider, updatePageProperties, titleRef } = props;
-
-  // Force editor recreation when Y.Doc changes (provider.document.guid)
-  const docKey = provider?.document?.guid ?? id;
-
-  const editor = useEditor(
-    {
-      onUpdate: () => {
-        updatePageProperties?.(id, "property_updated", { name: editor?.getText() });
-      },
-      editable,
-      immediatelyRender: false,
-      shouldRerenderOnTransaction: false,
-      extensions: [
-        ...TitleExtensions,
-        ...(extensions ?? []),
-        Placeholder.configure({
-          placeholder: () => "Untitled",
-          includeChildren: true,
-          showOnlyWhenEditable: false,
-        }),
-      ],
-      content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<h1></h1>",
-    },
-    [editable, initialValue, docKey]
-  );
-
-  useImperativeHandle(titleRef, () => ({
-    ...getEditorRefHelpers({
-      editor,
-      provider,
-    }),
-    clearEditor: (emitUpdate = false) => {
-      editor
-        ?.chain()
-        .setMeta(CORE_EDITOR_META.SKIP_FILE_DELETION, true)
-        .setMeta(CORE_EDITOR_META.INTENTIONAL_DELETION, true)
-        .clearContent(emitUpdate)
-        .run();
-    },
-    setEditorValue: (content: string) => {
-      editor?.commands.setContent(content, false);
-    },
-  }));
-
-  return editor;
-};

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

@@ -1,369 +0,0 @@
-import { HocuspocusProvider } from "@hocuspocus/provider";
-// react
-import { useCallback, useEffect, useRef, useState } from "react";
-// indexeddb
-import { IndexeddbPersistence } from "y-indexeddb";
-// yjs
-import type * as Y from "yjs";
-// types
-import type { CollaborationState, CollabStage, CollaborationError } from "@/types/collaboration";
-
-// Helper to check if a close code indicates a forced close
-const isForcedCloseCode = (code: number | undefined): boolean => {
-  if (!code) return false;
-  // All custom close codes (4000-4003) are treated as forced closes
-  return code >= 4000 && code <= 4003;
-};
-
-type UseYjsSetupArgs = {
-  docId: string;
-  serverUrl: string;
-  authToken: string;
-  onStateChange?: (state: CollaborationState) => void;
-  options?: {
-    maxConnectionAttempts?: number;
-  };
-};
-
-const DEFAULT_MAX_RETRIES = 3;
-
-export const useYjsSetup = ({ docId, serverUrl, authToken, onStateChange }: UseYjsSetupArgs) => {
-  // Current collaboration stage
-  const [stage, setStage] = useState<CollabStage>({ kind: "initial" });
-
-  // Cache readiness state
-  const [hasCachedContent, setHasCachedContent] = useState(false);
-  const [isCacheReady, setIsCacheReady] = useState(false);
-
-  // Provider and Y.Doc in state (nullable until effect runs)
-  const [yjsSession, setYjsSession] = useState<{ provider: HocuspocusProvider; ydoc: Y.Doc } | null>(null);
-
-  // Use refs for values that need to be mutated from callbacks
-  const retryCountRef = useRef(0);
-  const forcedCloseSignalRef = useRef(false);
-  const isDisposedRef = useRef(false);
-  const stageRef = useRef<CollabStage>({ kind: "initial" });
-  const lastReconnectTimeRef = useRef(0);
-
-  // Create/destroy provider in effect (not during render)
-  useEffect(() => {
-    // Reset refs when creating new provider (e.g., document switch)
-    retryCountRef.current = 0;
-    isDisposedRef.current = false;
-    forcedCloseSignalRef.current = false;
-    stageRef.current = { kind: "initial" };
-
-    const provider = new HocuspocusProvider({
-      name: docId,
-      token: authToken,
-      url: serverUrl,
-      onAuthenticationFailed: () => {
-        if (isDisposedRef.current) return;
-        const error: CollaborationError = { type: "auth-failed", message: "Authentication failed" };
-        const newStage = { kind: "disconnected" as const, error };
-        stageRef.current = newStage;
-        setStage(newStage);
-      },
-      onConnect: () => {
-        if (isDisposedRef.current) {
-          provider?.disconnect();
-          return;
-        }
-        retryCountRef.current = 0;
-        // After successful connection, transition to awaiting-sync (onSynced will move to synced)
-        const newStage = { kind: "awaiting-sync" as const };
-        stageRef.current = newStage;
-        setStage(newStage);
-      },
-      onStatus: ({ status: providerStatus }) => {
-        if (isDisposedRef.current) return;
-        if (providerStatus === "connecting") {
-          // Derive whether this is initial connect or reconnection from retry count
-          const isReconnecting = retryCountRef.current > 0;
-          setStage(isReconnecting ? { kind: "reconnecting", attempt: retryCountRef.current } : { kind: "connecting" });
-        } else if (providerStatus === "disconnected") {
-          // Do not transition here; let handleClose decide the final stage
-        } else if (providerStatus === "connected") {
-          // Connection succeeded, move to awaiting-sync
-          const newStage = { kind: "awaiting-sync" as const };
-          stageRef.current = newStage;
-          setStage(newStage);
-        }
-      },
-      onSynced: () => {
-        if (isDisposedRef.current) return;
-        retryCountRef.current = 0;
-        // Document sync complete
-        const newStage = { kind: "synced" as const };
-        stageRef.current = newStage;
-        setStage(newStage);
-      },
-    });
-
-    const pauseProvider = () => {
-      const wsProvider = provider.configuration.websocketProvider;
-      if (wsProvider) {
-        try {
-          wsProvider.shouldConnect = false;
-          wsProvider.disconnect();
-        } catch (error) {
-          console.error(`Error pausing websocketProvider:`, error);
-        }
-      }
-    };
-
-    const permanentlyStopProvider = () => {
-      isDisposedRef.current = true;
-
-      const wsProvider = provider.configuration.websocketProvider;
-      if (wsProvider) {
-        try {
-          wsProvider.shouldConnect = false;
-          wsProvider.disconnect();
-          wsProvider.destroy();
-        } catch (error) {
-          console.error(`Error tearing down websocketProvider:`, error);
-        }
-      }
-      try {
-        provider.destroy();
-      } catch (error) {
-        console.error(`Error destroying provider:`, error);
-      }
-    };
-
-    const handleClose = (closeEvent: { event?: { code?: number; reason?: string } }) => {
-      if (isDisposedRef.current) return;
-
-      const closeCode = closeEvent.event?.code;
-      const wsProvider = provider.configuration.websocketProvider;
-      const shouldConnect = wsProvider.shouldConnect;
-      const isForcedClose = isForcedCloseCode(closeCode) || forcedCloseSignalRef.current || shouldConnect === false;
-
-      if (isForcedClose) {
-        // Determine if this is a manual disconnect or a permanent error
-        const isManualDisconnect = shouldConnect === false;
-
-        const error: CollaborationError = {
-          type: "forced-close",
-          code: closeCode || 0,
-          message: isManualDisconnect ? "Manually disconnected" : "Server forced connection close",
-        };
-        const newStage = { kind: "disconnected" as const, error };
-        stageRef.current = newStage;
-        setStage(newStage);
-
-        retryCountRef.current = 0;
-        forcedCloseSignalRef.current = false;
-
-        // Only pause if it's a real forced close (not manual disconnect)
-        // Manual disconnect leaves it as is (shouldConnect=false already set if manual)
-        if (!isManualDisconnect) {
-          pauseProvider();
-        }
-      } else {
-        // Transient connection loss: attempt reconnection
-        retryCountRef.current++;
-
-        if (retryCountRef.current >= DEFAULT_MAX_RETRIES) {
-          // Exceeded max retry attempts
-          const error: CollaborationError = {
-            type: "max-retries",
-            message: `Failed to connect after ${DEFAULT_MAX_RETRIES} attempts`,
-          };
-          const newStage = { kind: "disconnected" as const, error };
-          stageRef.current = newStage;
-          setStage(newStage);
-
-          pauseProvider();
-        } else {
-          // Still have retries left, move to reconnecting
-          const newStage = { kind: "reconnecting" as const, attempt: retryCountRef.current };
-          stageRef.current = newStage;
-          setStage(newStage);
-        }
-      }
-    };
-
-    provider.on("close", handleClose);
-
-    setYjsSession({ provider, ydoc: provider.document as Y.Doc });
-
-    // Handle page visibility changes (sleep/wake, tab switching)
-    const handleVisibilityChange = (event?: Event) => {
-      if (isDisposedRef.current) return;
-
-      const isVisible = document.visibilityState === "visible";
-      const isFocus = event?.type === "focus";
-
-      if (isVisible || isFocus) {
-        // Throttle reconnection attempts to avoid double-firing (visibility + focus)
-        const now = Date.now();
-        if (now - lastReconnectTimeRef.current < 1000) {
-          return;
-        }
-
-        const wsProvider = provider.configuration.websocketProvider;
-        if (!wsProvider) return;
-
-        const ws = wsProvider.webSocket;
-        const isStale = ws?.readyState === WebSocket.CLOSED || ws?.readyState === WebSocket.CLOSING;
-
-        // If disconnected or stale, re-enable reconnection and force reconnect
-        if (isStale || stageRef.current.kind === "disconnected") {
-          lastReconnectTimeRef.current = now;
-
-          // Re-enable connection on tab focus (even if manually disconnected before sleep)
-          wsProvider.shouldConnect = true;
-
-          // Reset retry count for fresh reconnection attempt
-          retryCountRef.current = 0;
-
-          // Move to connecting state
-          const newStage = { kind: "connecting" as const };
-          stageRef.current = newStage;
-          setStage(newStage);
-
-          wsProvider.disconnect();
-          wsProvider.connect();
-        }
-      }
-    };
-
-    // Handle online/offline events
-    const handleOnline = () => {
-      if (isDisposedRef.current) return;
-
-      const wsProvider = provider.configuration.websocketProvider;
-      if (wsProvider) {
-        wsProvider.shouldConnect = true;
-        wsProvider.disconnect();
-        wsProvider.connect();
-      }
-    };
-
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    window.addEventListener("focus", handleVisibilityChange);
-    window.addEventListener("online", handleOnline);
-
-    return () => {
-      try {
-        provider.off("close", handleClose);
-      } catch (error) {
-        console.error(`Error unregistering close handler:`, error);
-      }
-
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-      window.removeEventListener("focus", handleVisibilityChange);
-      window.removeEventListener("online", handleOnline);
-
-      permanentlyStopProvider();
-    };
-  }, [docId, serverUrl, authToken]);
-
-  // IndexedDB persistence lifecycle
-  useEffect(() => {
-    if (!yjsSession) return;
-
-    const idbPersistence = new IndexeddbPersistence(docId, yjsSession.provider.document);
-
-    const onIdbSynced = () => {
-      const yFragment = idbPersistence.doc.getXmlFragment("default");
-      const docLength = yFragment?.length ?? 0;
-      setIsCacheReady(true);
-      setHasCachedContent(docLength > 0);
-    };
-
-    idbPersistence.on("synced", onIdbSynced);
-
-    return () => {
-      idbPersistence.off("synced", onIdbSynced);
-      try {
-        idbPersistence.destroy();
-      } catch (error) {
-        console.error(`Error destroying local provider:`, error);
-      }
-    };
-  }, [docId, yjsSession]);
-
-  // Observe Y.Doc content changes to update hasCachedContent (catches fallback scenario)
-  useEffect(() => {
-    if (!yjsSession || !isCacheReady) return;
-
-    const fragment = yjsSession.ydoc.getXmlFragment("default");
-    let lastHasContent = false;
-
-    const updateCachedContentFlag = () => {
-      const len = fragment?.length ?? 0;
-      const hasContent = len > 0;
-
-      // Only update state if the boolean value actually changed
-      if (hasContent !== lastHasContent) {
-        lastHasContent = hasContent;
-        setHasCachedContent(hasContent);
-      }
-    };
-    // Initial check (handles fallback content loaded before this effect runs)
-    updateCachedContentFlag();
-
-    // Use observeDeep to catch nested changes (keystrokes modify Y.XmlText inside Y.XmlElement)
-    fragment.observeDeep(updateCachedContentFlag);
-
-    return () => {
-      try {
-        fragment.unobserveDeep(updateCachedContentFlag);
-      } catch (error) {
-        console.error("Error unobserving fragment:", error);
-      }
-    };
-  }, [yjsSession, isCacheReady]);
-
-  // Notify state changes callback (use ref to avoid dependency on handler)
-  const stateChangeCallbackRef = useRef(onStateChange);
-  stateChangeCallbackRef.current = onStateChange;
-
-  useEffect(() => {
-    if (!stateChangeCallbackRef.current) return;
-
-    const isServerSynced = stage.kind === "synced";
-    const isServerDisconnected = stage.kind === "disconnected";
-
-    const state: CollaborationState = {
-      stage,
-      isServerSynced,
-      isServerDisconnected,
-    };
-
-    stateChangeCallbackRef.current(state);
-  }, [stage]);
-
-  // Derived values for convenience
-  const isServerSynced = stage.kind === "synced";
-  const isServerDisconnected = stage.kind === "disconnected";
-  const isDocReady = isServerSynced || isServerDisconnected || (isCacheReady && hasCachedContent);
-
-  const signalForcedClose = useCallback((value: boolean) => {
-    forcedCloseSignalRef.current = value;
-  }, []);
-
-  // Don't return anything until provider is ready - guarantees non-null provider
-  if (!yjsSession) {
-    return null;
-  }
-
-  return {
-    provider: yjsSession.provider,
-    ydoc: yjsSession.ydoc,
-    state: {
-      stage,
-      hasCachedContent,
-      isCacheReady,
-      isServerSynced,
-      isServerDisconnected,
-      isDocReady,
-    },
-    actions: {
-      signalForcedClose,
-    },
-  };
-};

packages/editor/src/core/plugins/highlight.ts

@@ -1,92 +0,0 @@
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet } from "@tiptap/pm/view";
-
-type NodeHighlightState = {
-  highlightedNodeId: string | null;
-  decorations: DecorationSet;
-};
-
-type NodeHighlightMeta = {
-  nodeId?: string | null;
-};
-
-export const nodeHighlightPluginKey = new PluginKey<NodeHighlightState>("nodeHighlight");
-
-const buildDecorations = (doc: Parameters<typeof DecorationSet.create>[0], highlightedNodeId: string | null) => {
-  if (!highlightedNodeId) {
-    return DecorationSet.empty;
-  }
-
-  const decorations: Decoration[] = [];
-  const highlightClassNames = ["bg-custom-primary-100/20", "transition-all", "duration-300", "rounded"];
-
-  doc.descendants((node, pos) => {
-    // Check if this node has the id we're looking for
-    if (node.attrs && node.attrs.id === highlightedNodeId) {
-      const decorationAttrs: Record<string, string> = {
-        "data-node-highlighted": "true",
-        class: highlightClassNames.join(" "),
-      };
-
-      // For text nodes, highlight the inline content
-      if (node.isText) {
-        decorations.push(
-          Decoration.inline(pos, pos + node.nodeSize, decorationAttrs, {
-            inclusiveStart: true,
-            inclusiveEnd: true,
-          })
-        );
-      } else {
-        // For block nodes, add a node decoration
-        decorations.push(Decoration.node(pos, pos + node.nodeSize, decorationAttrs));
-      }
-
-      return false; // Stop searching once we found the node
-    }
-
-    return true;
-  });
-
-  return DecorationSet.create(doc, decorations);
-};
-
-export const NodeHighlightPlugin = () =>
-  new Plugin<NodeHighlightState>({
-    key: nodeHighlightPluginKey,
-    state: {
-      init: () => ({
-        highlightedNodeId: null,
-        decorations: DecorationSet.empty,
-      }),
-      apply: (tr, value, _oldState, newState) => {
-        let highlightedNodeId = value.highlightedNodeId;
-        let decorations = value.decorations;
-
-        const meta = tr.getMeta(nodeHighlightPluginKey) as NodeHighlightMeta | undefined;
-        let shouldRecalculate = tr.docChanged;
-
-        if (meta) {
-          if (meta.nodeId !== undefined) {
-            highlightedNodeId = typeof meta.nodeId === "string" && meta.nodeId.length > 0 ? meta.nodeId : null;
-            shouldRecalculate = true;
-          }
-        }
-
-        if (shouldRecalculate) {
-          decorations = buildDecorations(newState.doc, highlightedNodeId);
-        } else if (tr.docChanged) {
-          decorations = decorations.map(tr.mapping, newState.doc);
-        }
-
-        return {
-          highlightedNodeId,
-          decorations,
-        };
-      },
-    },
-    props: {
-      decorations(state) {
-        return nodeHighlightPluginKey.getState(state)?.decorations ?? DecorationSet.empty;
-      },
-    },
-  });

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

@@ -1,37 +1,4 @@
-export type CollaborationError =
-  | { type: "auth-failed"; message: string }
-  | { type: "network-error"; message: string }
-  | { type: "forced-close"; code: number; message: string }
-  | { type: "max-retries"; message: string };
-
-/**
- * Single-stage state machine for collaboration lifecycle.
- * Stages represent the sequential progression: initial → connecting → awaiting-sync → synced
- *
- * Invariants:
- * - "awaiting-sync" only occurs when connection is successful and sync is pending
- * - "synced" occurs only after connection success and onSynced callback
- * - "reconnecting" with attempt > 0 when retrying after a connection drop
- * - "disconnected" is terminal (connection failed or forced close)
- */
-export type CollabStage =
-  | { kind: "initial" }
-  | { kind: "connecting" }
-  | { kind: "awaiting-sync" }
-  | { kind: "synced" }
-  | { kind: "reconnecting"; attempt: number }
-  | { kind: "disconnected"; error: CollaborationError };
-
-/**
- * Public collaboration state exposed to consumers.
- * Contains the current stage and derived booleans for convenience.
- */
-export type CollaborationState = {
-  stage: CollabStage;
-  isServerSynced: boolean;
-  isServerDisconnected: boolean;
-};
-
 export type TServerHandler = {
-  onStateChange: (state: CollaborationState) => void;
+  onConnect?: () => void;
+  onServerError?: () => void;
 };

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

@@ -27,8 +27,6 @@ import type {
   TRealtimeConfig,
   TServerHandler,
   TUserDetails,
-  TExtendedEditorRefApi,
-  EventToPayloadMap,
 } from "@/types";
 
 export type TEditorCommands =
@@ -99,7 +97,7 @@ export type TDocumentInfo = {
   words: number;
 };
 
-export type CoreEditorRefApi = {
+export type EditorRefApi = {
   blur: () => void;
   clearEditor: (emitUpdate?: boolean) => void;
   createSelectionAtCursorPosition: () => void;
@@ -140,10 +138,6 @@ export type CoreEditorRefApi = {
   undo: () => void;
 };
 
-export type EditorRefApi = CoreEditorRefApi & TExtendedEditorRefApi;
-
-export type EditorTitleRefApi = EditorRefApi;
-
 // editor props
 export type IEditorProps = {
   autofocus?: boolean;
@@ -191,15 +185,6 @@ export type ICollaborativeDocumentEditorProps = Omit<IEditorProps, "initialValue
   serverHandler?: TServerHandler;
   user: TUserDetails;
   extendedDocumentEditorProps?: ICollaborativeDocumentEditorPropsExtended;
-  updatePageProperties?: <T extends keyof EventToPayloadMap>(
-    pageIds: string | string[],
-    actionType: T,
-    data: EventToPayloadMap[T],
-    performAction?: boolean
-  ) => void;
-  pageRestorationInProgress?: boolean;
-  titleRef?: React.MutableRefObject<EditorTitleRefApi | null>;
-  isFetchingFallbackBinary?: boolean;
 };
 
 export type IDocumentEditorProps = Omit<IEditorProps, "initialValue" | "onEnterKeyPress" | "value"> & {

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

@@ -55,7 +55,4 @@ export type TCollaborativeEditorHookProps = TCoreHookProps &
   Pick<
     ICollaborativeDocumentEditorProps,
     "dragDropEnabled" | "extendedDocumentEditorProps" | "realtimeConfig" | "serverHandler" | "user"
-  > & {
-    titleRef?: ICollaborativeDocumentEditorProps["titleRef"];
-    updatePageProperties?: ICollaborativeDocumentEditorProps["updatePageProperties"];
-  };
+  >;

packages/editor/src/styles/index.css

@@ -3,4 +3,3 @@
 @import "./table.css";
 @import "./github-dark.css";
 @import "./drag-drop.css";
-@import "./title-editor.css";

packages/editor/src/styles/title-editor.css

@@ -1,49 +0,0 @@
-/* Title editor styles */
-.page-title-editor {
-  width: 100%;
-  outline: none;
-  resize: none;
-  border-radius: 0;
-}
-
-.page-title-editor .ProseMirror {
-  background-color: transparent;
-  font-weight: bold;
-  letter-spacing: -2%;
-  padding: 0;
-  margin-bottom: 0;
-}
-
-/* Handle font sizes */
-.page-title-editor.small-font .ProseMirror h1 {
-  font-size: 1.6rem;
-  line-height: 1.9rem;
-}
-
-.page-title-editor.large-font .ProseMirror h1 {
-  font-size: 2rem;
-  line-height: 2.375rem;
-}
-
-/* Focus state */
-.page-title-editor.active-editor .ProseMirror {
-  box-shadow: none;
-  outline: none;
-}
-
-/* Placeholder */
-.page-title-editor .ProseMirror h1.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: var(--color-placeholder);
-  pointer-events: none;
-  height: 0;
-}
-
-.page-title-editor .ProseMirror h1.is-empty::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: var(--color-placeholder);
-  pointer-events: none;
-  height: 0;
-}

packages/i18n/src/locales/cs/empty-state.ts

@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Vypadá to, že nemáte přístup k tomuto projektu",
+      restricted_description: "Kontaktujte administrátora a požádejte o přístup, abyste zde mohli pokračovat.",
+      join_description: "Klikněte na tlačítko níže pro připojení k projektu.",
+      cta_primary: "Připojit se k projektu",
+      cta_loading: "Připojování k projektu",
+    },
+    invalid_project: {
+      title: "Projekt nebyl nalezen",
+      description: "Projekt, který hledáte, neexistuje.",
+    },
     work_items: {
       title: "Začněte s vaší první pracovní položkou.",
       description:

packages/i18n/src/locales/cs/translations.ts

@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Jedinečný kód",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Vložte kód zaslaný na váš e-mail",
         requesting_new_code: "Žádám o nový kód",
         sending_code: "Odesílám kód",
@@ -1544,7 +1544,7 @@ export default {
           },
           code: {
             label: "Jedinečný kód",
-            placeholder: "gets-sets-flys",
+            placeholder: "123456",
             helper_text: "Ověřovací kód byl odeslán na váš nový e-mail.",
             errors: {
               required: "Jedinečný kód je povinný",

packages/i18n/src/locales/de/empty-state.ts

@@ -26,6 +26,18 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Es scheint, als hätten Sie keinen Zugriff auf dieses Projekt",
+      restricted_description:
+        "Kontaktieren Sie den Administrator, um Zugriff anzufordern, damit Sie hier fortfahren können.",
+      join_description: "Klicken Sie unten auf die Schaltfläche, um beizutreten.",
+      cta_primary: "Projekt beitreten",
+      cta_loading: "Projekt wird beigetreten",
+    },
+    invalid_project: {
+      title: "Projekt nicht gefunden",
+      description: "Das gesuchte Projekt existiert nicht.",
+    },
     work_items: {
       title: "Beginnen Sie mit Ihrem ersten Arbeitselement.",
       description:

packages/i18n/src/locales/de/translations.ts

@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Einmaliger Code",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Fügen Sie den an Ihre E-Mail gesendeten Code ein",
         requesting_new_code: "Neuen Code anfordern",
         sending_code: "Code wird gesendet",
@@ -1562,7 +1562,7 @@ export default {
           },
           code: {
             label: "Einmaliger Code",
-            placeholder: "gets-sets-flys",
+            placeholder: "123456",
             helper_text: "Verifizierungscode wurde an deine neue E-Mail gesendet.",
             errors: {
               required: "Einmaliger Code ist erforderlich",

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

@@ -75,7 +75,7 @@ export default {
       },
       unique_code: {
         label: "Unique code",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Paste the code sent to your email",
         requesting_new_code: "Requesting new code",
         sending_code: "Sending code",

packages/i18n/src/locales/en/empty-state.ts

@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Seems like you don’t have access to this Project",
+      restricted_description: "Contact admin to request for access and you can continue here.",
+      join_description: "Click the button below to join it.",
+      cta_primary: "Join project",
+      cta_loading: "Joining project",
+    },
+    invalid_project: {
+      title: "Project not found",
+      description: "The project you are looking for does not exist.",
+    },
     work_items: {
       title: "Start with your first work item.",
       description:

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

@@ -1378,7 +1378,7 @@ export default {
           },
           code: {
             label: "Unique code",
-            placeholder: "gets-sets-flys",
+            placeholder: "123456",
             helper_text: "Verification code sent to your new email.",
             errors: {
               required: "Unique code is required",

packages/i18n/src/locales/es/empty-state.ts

@@ -26,6 +26,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Parece que no tienes acceso a este proyecto",
+      restricted_description: "Contacta con el administrador para solicitar acceso y podrás continuar aquí.",
+      join_description: "Haz clic en el botón de abajo para unirte.",
+      cta_primary: "Unirse al proyecto",
+      cta_loading: "Uniéndose al proyecto",
+    },
+    invalid_project: {
+      title: "Proyecto no encontrado",
+      description: "El proyecto que buscas no existe.",
+    },
     work_items: {
       title: "Comienza con tu primer elemento de trabajo.",
       description:

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

@@ -1566,7 +1566,7 @@ export default {
           },
           code: {
             label: "Código único",
-            placeholder: "gets-sets-flys",
+            placeholder: "123456",
             helper_text: "Código de verificación enviado a tu nuevo correo electrónico.",
             errors: {
               required: "El código único es obligatorio",

packages/i18n/src/locales/fr/empty-state.ts

@@ -27,6 +27,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Il semble que vous n’ayez pas accès à ce projet",
+      restricted_description: "Contactez l’administrateur pour demander l’accès afin de pouvoir continuer ici.",
+      join_description: "Cliquez sur le bouton ci-dessous pour rejoindre le projet.",
+      cta_primary: "Rejoindre le projet",
+      cta_loading: "Rejoindre le projet…",
+    },
+    invalid_project: {
+      title: "Projet non trouvé",
+      description: "Le projet que vous recherchez n’existe pas.",
+    },
     work_items: {
       title: "Commencez avec votre premier élément de travail.",
       description:

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

@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Code unique",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Collez le code envoyé à votre e-mail",
         requesting_new_code: "Demande d’un nouveau code",
         sending_code: "Envoi du code",
@@ -1564,7 +1564,7 @@ export default {
           },
           code: {
             label: "Code unique",
-            placeholder: "gets-sets-flys",
+            placeholder: "123456",
             helper_text: "Code de vérification envoyé à votre nouvel e-mail.",
             errors: {
               required: "Le code unique est requis",

packages/i18n/src/locales/id/empty-state.ts

@@ -25,6 +25,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Sepertinya Anda tidak memiliki akses ke Proyek ini",
+      restricted_description: "Hubungi admin untuk meminta akses agar Anda dapat melanjutkan di sini.",
+      join_description: "Klik tombol di bawah ini untuk bergabung.",
+      cta_primary: "Bergabung dengan proyek",
+      cta_loading: "Sedang bergabung dengan proyek",
+    },
+    invalid_project: {
+      title: "Proyek tidak ditemukan",
+      description: "Proyek yang Anda cari tidak ada.",
+    },
     work_items: {
       title: "Mulai dengan item kerja pertama Anda.",
       description:

packages/i18n/src/locales/id/translations.ts

@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Kode unik",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Tempelkan kode yang dikirim ke email anda",
         requesting_new_code: "Meminta kode baru",
         sending_code: "Mengirim kode",
@@ -1552,7 +1552,7 @@ export default {
           },
           code: {
             label: "Kode unik",
-            placeholder: "gets-sets-flys",
+            placeholder: "123456",
             helper_text: "Kode verifikasi dikirim ke email baru Anda.",
             errors: {
               required: "Kode unik wajib diisi",

packages/i18n/src/locales/it/empty-state.ts

@@ -27,6 +27,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Sembra che tu non abbia accesso a questo progetto",
+      restricted_description: "Contatta l'amministratore per richiedere l'accesso e potrai continuare qui.",
+      join_description: "Clicca sul pulsante qui sotto per unirti.",
+      cta_primary: "Unisciti al progetto",
+      cta_loading: "Unione al progetto in corso",
+    },
+    invalid_project: {
+      title: "Progetto non trovato",
+      description: "Il progetto che stai cercando non esiste.",
+    },
     work_items: {
       title: "Inizia con il tuo primo elemento di lavoro.",
       description:

packages/i18n/src/locales/it/translations.ts

@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Codice unico",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Incolla il codice inviato alla tua email",
         requesting_new_code: "Richiesta di nuovo codice",
         sending_code: "Invio codice",
@@ -1556,7 +1556,7 @@ export default {
           },
           code: {
             label: "Codice univoco",
-            placeholder: "gets-sets-flys",
+            placeholder: "123456",
             helper_text: "Codice di verifica inviato alla tua nuova email.",
             errors: {
               required: "Il codice univoco è obbligatorio",

packages/i18n/src/locales/ja/empty-state.ts

@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "このプロジェクトへのアクセス権がないようです",
+      restricted_description: "管理者に連絡してアクセス権をリクエストすると、ここで作業を続けられます。",
+      join_description: "下のボタンをクリックして参加してください。",
+      cta_primary: "プロジェクトに参加",
+      cta_loading: "プロジェクトに参加中",
+    },
+    invalid_project: {
+      title: "プロジェクトが見つかりません",
+      description: "お探しのプロジェクトは存在しません。",
+    },
     work_items: {
       title: "最初の作業項目から始めましょう。",
       description:

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

@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "ユニークコード",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "メールで送信されたコードを貼り付けてください",
         requesting_new_code: "新しいコードをリクエスト中",
         sending_code: "コードを送信中",
@@ -1543,7 +1543,7 @@ export default {
           },
           code: {
             label: "認証コード",
-            placeholder: "gets-sets-flys",
+            placeholder: "123456",
             helper_text: "認証コードを新しいメールに送信しました。",
             errors: {
               required: "認証コードは必須です",

packages/i18n/src/locales/ko/empty-state.ts

@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "이 프로젝트에 접근할 수 없는 것 같습니다",
+      restricted_description: "관리자에게 접근 권한을 요청하시면 여기서 계속 진행하실 수 있습니다.",
+      join_description: "아래 버튼을 클릭하여 프로젝트에 참여하세요.",
+      cta_primary: "프로젝트 참여",
+      cta_loading: "프로젝트 참여 중",
+    },
+    invalid_project: {
+      title: "프로젝트를 찾을 수 없습니다",
+      description: "찾으시는 프로젝트가 존재하지 않습니다.",
+    },
     work_items: {
       title: "첫 번째 작업 항목으로 시작하세요.",
       description:

packages/i18n/src/locales/ko/translations.ts

@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "고유 코드",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "이메일로 전송된 코드를 붙여넣기",
         requesting_new_code: "새 코드 요청 중",
         sending_code: "코드 전송 중",
@@ -1536,7 +1536,7 @@ export default {
           },
           code: {
             label: "고유 코드",
-            placeholder: "gets-sets-flys",
+            placeholder: "123456",
             helper_text: "인증 코드가 새 이메일로 전송되었습니다.",
             errors: {
               required: "고유 코드는 필수입니다",