wip: optimization of pages binary data

* chore: adjusted  increment/decrement  for unread count

* chore: improved param handling for unread notification count function

.github/pull_request_template.md

@@ -0,0 +1,20 @@
+### Description
+<!-- Provide a detailed description of the changes in this PR -->
+
+### Type of Change
+<!-- Put an 'x' in the boxes that apply -->
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] Feature (non-breaking change which adds functionality)
+- [ ] Improvement (change that would cause existing functionality to not work as expected)
+- [ ] Code refactoring
+- [ ] Performance improvements
+- [ ] Documentation update
+
+### Screenshots and Media (if applicable)
+<!-- Add screenshots to help explain your changes, ideally showcasing before and after -->
+
+### Test Scenarios 
+<!-- Please describe the tests that you ran to verify your changes -->
+
+### References
+<!-- Link related issues if there are any -->

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

@@ -15,8 +15,6 @@ from django.db.models import (
     UUIDField,
     Value,
     Subquery,
-    Case,
-    When,
 )
 from django.db.models.functions import Coalesce
 from django.utils import timezone

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

@@ -39,6 +39,7 @@ from ..base import BaseAPIView, BaseViewSet
 from plane.bgtasks.page_transaction_task import page_transaction
 from plane.bgtasks.page_version_task import page_version
 from plane.bgtasks.recent_visited_task import recent_visited_task
+from rest_framework.parsers import MultiPartParser, FormParser
 
 
 def unarchive_archive_page_and_descendants(page_id, archived_at):
@@ -470,6 +471,8 @@ class SubPagesEndpoint(BaseAPIView):
 
 
 class PagesDescriptionViewSet(BaseViewSet):
+    parser_classes = [MultiPartParser]
+
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def retrieve(self, request, slug, project_id, pk):
         page = (
@@ -526,30 +529,33 @@ class PagesDescriptionViewSet(BaseViewSet):
         existing_instance = json.dumps(
             {"description_html": page.description_html}, cls=DjangoJSONEncoder
         )
+        print("before the variables")
 
-        # Get the base64 data from the request
-        base64_data = request.data.get("description_binary")
-
-        # If base64 data is provided
-        if base64_data:
-            # Decode the base64 data to bytes
-            new_binary_data = base64.b64decode(base64_data)
-            # capture the page transaction
-            if request.data.get("description_html"):
-                page_transaction.delay(
-                    new_value=request.data, old_value=existing_instance, page_id=pk
-                )
-            # Store the updated binary data
-            page.description_binary = new_binary_data
-            page.description_html = request.data.get("description_html")
-            page.description = request.data.get("description")
-            page.save()
-            # Return a success response
-            page_version.delay(
-                page_id=page.id,
-                existing_instance=existing_instance,
-                user_id=request.user.id,
+        # capture the page transaction
+        if request.data.get("description_html"):
+            page_transaction.delay(
+                new_value=request.data, old_value=existing_instance, page_id=pk
             )
-            return Response({"message": "Updated successfully"})
-        else:
+
+        if not request.data.get("description_binary"):
             return Response({"error": "No binary data provided"})
+
+        # Store the updated binary data
+        page.description_html = request.data.get(
+            "description_html", page.description_html
+        )
+        page.description = request.data.get("description", page.description)
+        page.description_binary = request.POST.get("description_binary")
+
+        page.description_binary = base64.b64decode(
+            request.POST.get("description_binary")
+        )
+        print("before the ssssave")
+        page.save()
+        # Return a success response
+        page_version.delay(
+            page_id=page.id,
+            existing_instance=existing_instance,
+            user_id=request.user.id,
+        )
+        return Response({"message": "Updated successfully"})

apiserver/plane/app/views/timezone.py

@@ -1,230 +0,0 @@
-# Python imports
-import pytz
-from datetime import datetime
-
-# Django imports
-from django.utils.decorators import method_decorator
-from django.views.decorators.cache import cache_page
-
-# Third party imports
-from rest_framework.response import Response
-from rest_framework import status
-from rest_framework.permissions import AllowAny
-from rest_framework.views import APIView
-
-
-class TimezoneEndpoint(APIView):
-    permission_classes = [AllowAny]
-
-    @method_decorator(cache_page(60 * 60 * 24))
-    def get(self, request):
-        timezone_mapping = {
-            "-1100": [
-                ("Midway Island", "Pacific/Midway"),
-                ("American Samoa", "Pacific/Pago_Pago"),
-            ],
-            "-1000": [
-                ("Hawaii", "Pacific/Honolulu"),
-                ("Aleutian Islands", "America/Adak"),
-            ],
-            "-0930": [("Marquesas Islands", "Pacific/Marquesas")],
-            "-0900": [
-                ("Alaska", "America/Anchorage"),
-                ("Gambier Islands", "Pacific/Gambier"),
-            ],
-            "-0800": [
-                ("Pacific Time (US and Canada)", "America/Los_Angeles"),
-                ("Baja California", "America/Tijuana"),
-            ],
-            "-0700": [
-                ("Mountain Time (US and Canada)", "America/Denver"),
-                ("Arizona", "America/Phoenix"),
-                ("Chihuahua, Mazatlan", "America/Chihuahua"),
-            ],
-            "-0600": [
-                ("Central Time (US and Canada)", "America/Chicago"),
-                ("Saskatchewan", "America/Regina"),
-                ("Guadalajara, Mexico City, Monterrey", "America/Mexico_City"),
-                ("Tegucigalpa, Honduras", "America/Tegucigalpa"),
-                ("Costa Rica", "America/Costa_Rica"),
-            ],
-            "-0500": [
-                ("Eastern Time (US and Canada)", "America/New_York"),
-                ("Lima", "America/Lima"),
-                ("Bogota", "America/Bogota"),
-                ("Quito", "America/Guayaquil"),
-                ("Chetumal", "America/Cancun"),
-            ],
-            "-0430": [("Caracas (Old Venezuela Time)", "America/Caracas")],
-            "-0400": [
-                ("Atlantic Time (Canada)", "America/Halifax"),
-                ("Caracas", "America/Caracas"),
-                ("Santiago", "America/Santiago"),
-                ("La Paz", "America/La_Paz"),
-                ("Manaus", "America/Manaus"),
-                ("Georgetown", "America/Guyana"),
-                ("Bermuda", "Atlantic/Bermuda"),
-            ],
-            "-0330": [("Newfoundland Time (Canada)", "America/St_Johns")],
-            "-0300": [
-                ("Buenos Aires", "America/Argentina/Buenos_Aires"),
-                ("Brasilia", "America/Sao_Paulo"),
-                ("Greenland", "America/Godthab"),
-                ("Montevideo", "America/Montevideo"),
-                ("Falkland Islands", "Atlantic/Stanley"),
-            ],
-            "-0200": [
-                (
-                    "South Georgia and the South Sandwich Islands",
-                    "Atlantic/South_Georgia",
-                )
-            ],
-            "-0100": [
-                ("Azores", "Atlantic/Azores"),
-                ("Cape Verde Islands", "Atlantic/Cape_Verde"),
-            ],
-            "+0000": [
-                ("Dublin", "Europe/Dublin"),
-                ("Reykjavik", "Atlantic/Reykjavik"),
-                ("Lisbon", "Europe/Lisbon"),
-                ("Monrovia", "Africa/Monrovia"),
-                ("Casablanca", "Africa/Casablanca"),
-            ],
-            "+0100": [
-                ("Central European Time (Berlin, Rome, Paris)", "Europe/Paris"),
-                ("West Central Africa", "Africa/Lagos"),
-                ("Algiers", "Africa/Algiers"),
-                ("Lagos", "Africa/Lagos"),
-                ("Tunis", "Africa/Tunis"),
-            ],
-            "+0200": [
-                ("Eastern European Time (Cairo, Helsinki, Kyiv)", "Europe/Kiev"),
-                ("Athens", "Europe/Athens"),
-                ("Jerusalem", "Asia/Jerusalem"),
-                ("Johannesburg", "Africa/Johannesburg"),
-                ("Harare, Pretoria", "Africa/Harare"),
-            ],
-            "+0300": [
-                ("Moscow Time", "Europe/Moscow"),
-                ("Baghdad", "Asia/Baghdad"),
-                ("Nairobi", "Africa/Nairobi"),
-                ("Kuwait, Riyadh", "Asia/Riyadh"),
-            ],
-            "+0330": [("Tehran", "Asia/Tehran")],
-            "+0400": [
-                ("Abu Dhabi", "Asia/Dubai"),
-                ("Baku", "Asia/Baku"),
-                ("Yerevan", "Asia/Yerevan"),
-                ("Astrakhan", "Europe/Astrakhan"),
-                ("Tbilisi", "Asia/Tbilisi"),
-                ("Mauritius", "Indian/Mauritius"),
-            ],
-            "+0500": [
-                ("Islamabad", "Asia/Karachi"),
-                ("Karachi", "Asia/Karachi"),
-                ("Tashkent", "Asia/Tashkent"),
-                ("Yekaterinburg", "Asia/Yekaterinburg"),
-                ("Maldives", "Indian/Maldives"),
-                ("Chagos", "Indian/Chagos"),
-            ],
-            "+0530": [
-                ("Chennai", "Asia/Kolkata"),
-                ("Kolkata", "Asia/Kolkata"),
-                ("Mumbai", "Asia/Kolkata"),
-                ("New Delhi", "Asia/Kolkata"),
-                ("Sri Jayawardenepura", "Asia/Colombo"),
-            ],
-            "+0545": [("Kathmandu", "Asia/Kathmandu")],
-            "+0600": [
-                ("Dhaka", "Asia/Dhaka"),
-                ("Almaty", "Asia/Almaty"),
-                ("Bishkek", "Asia/Bishkek"),
-                ("Thimphu", "Asia/Thimphu"),
-            ],
-            "+0630": [
-                ("Yangon (Rangoon)", "Asia/Yangon"),
-                ("Cocos Islands", "Indian/Cocos"),
-            ],
-            "+0700": [
-                ("Bangkok", "Asia/Bangkok"),
-                ("Hanoi", "Asia/Ho_Chi_Minh"),
-                ("Jakarta", "Asia/Jakarta"),
-                ("Novosibirsk", "Asia/Novosibirsk"),
-                ("Krasnoyarsk", "Asia/Krasnoyarsk"),
-            ],
-            "+0800": [
-                ("Beijing", "Asia/Shanghai"),
-                ("Singapore", "Asia/Singapore"),
-                ("Perth", "Australia/Perth"),
-                ("Hong Kong", "Asia/Hong_Kong"),
-                ("Ulaanbaatar", "Asia/Ulaanbaatar"),
-                ("Palau", "Pacific/Palau"),
-            ],
-            "+0845": [("Eucla", "Australia/Eucla")],
-            "+0900": [
-                ("Tokyo", "Asia/Tokyo"),
-                ("Seoul", "Asia/Seoul"),
-                ("Yakutsk", "Asia/Yakutsk"),
-            ],
-            "+0930": [
-                ("Adelaide", "Australia/Adelaide"),
-                ("Darwin", "Australia/Darwin"),
-            ],
-            "+1000": [
-                ("Sydney", "Australia/Sydney"),
-                ("Brisbane", "Australia/Brisbane"),
-                ("Guam", "Pacific/Guam"),
-                ("Vladivostok", "Asia/Vladivostok"),
-                ("Tahiti", "Pacific/Tahiti"),
-            ],
-            "+1030": [("Lord Howe Island", "Australia/Lord_Howe")],
-            "+1100": [
-                ("Solomon Islands", "Pacific/Guadalcanal"),
-                ("Magadan", "Asia/Magadan"),
-                ("Norfolk Island", "Pacific/Norfolk"),
-                ("Bougainville Island", "Pacific/Bougainville"),
-                ("Chokurdakh", "Asia/Srednekolymsk"),
-            ],
-            "+1200": [
-                ("Auckland", "Pacific/Auckland"),
-                ("Wellington", "Pacific/Auckland"),
-                ("Fiji Islands", "Pacific/Fiji"),
-                ("Anadyr", "Asia/Anadyr"),
-            ],
-            "+1245": [("Chatham Islands", "Pacific/Chatham")],
-            "+1300": [("Nuku'alofa", "Pacific/Tongatapu"), ("Samoa", "Pacific/Apia")],
-            "+1400": [("Kiritimati Island", "Pacific/Kiritimati")],
-        }
-
-        timezone_list = []
-        now = datetime.now()
-
-        # Process timezone mapping
-        for offset, locations in timezone_mapping.items():
-            sign = "-" if offset.startswith("-") else "+"
-            hours = offset[1:3]
-            minutes = offset[3:] if len(offset) > 3 else "00"
-
-            for friendly_name, tz_identifier in locations:
-                try:
-                    tz = pytz.timezone(tz_identifier)
-                    current_offset = now.astimezone(tz).strftime("%z")
-
-                    timezone_list.append(
-                        {
-                            "value": tz_identifier,
-                            "label": f"{friendly_name} (UTC{sign}{hours}:{minutes})",
-                            "offset": int(current_offset),
-                        }
-                    )
-                except pytz.exceptions.UnknownTimeZoneError:
-                    continue
-
-        # Sort by offset and then by label
-        timezone_list.sort(key=lambda x: (x["offset"], x["label"]))
-
-        # Remove offset from final output
-        for tz in timezone_list:
-            del tz["offset"]
-
-        return Response({"timezones": timezone_list}, status=status.HTTP_200_OK)

apiserver/plane/bgtasks/deletion_task.py

@@ -3,7 +3,8 @@ from django.utils import timezone
 from django.apps import apps
 from django.conf import settings
 from django.db import models
-from django.core.exceptions import ObjectDoesNotExist
+from django.db.models.fields.related import OneToOneRel
+
 
 # Third party imports
 from celery import shared_task
@@ -11,32 +12,98 @@ from celery import shared_task
 
 @shared_task
 def soft_delete_related_objects(app_label, model_name, instance_pk, using=None):
+    """
+    Soft delete related objects for a given model instance
+    """
+    # Get the model class using app registry
     model_class = apps.get_model(app_label, model_name)
-    instance = model_class.all_objects.get(pk=instance_pk)
-    related_fields = instance._meta.get_fields()
-    for field in related_fields:
-        if field.one_to_many or field.one_to_one:
-            try:
-                # Check if the field has CASCADE on delete
-                if (
-                    hasattr(field, "remote_field")
-                    and hasattr(field.remote_field, "on_delete")
-                    and field.remote_field.on_delete == models.CASCADE
-                ):
-                    if field.one_to_many:
-                        related_objects = getattr(instance, field.name).all()
-                    elif field.one_to_one:
-                        related_object = getattr(instance, field.name)
-                        related_objects = (
-                            [related_object] if related_object is not None else []
-                        )
 
-                    for obj in related_objects:
-                        if obj:
-                            obj.deleted_at = timezone.now()
-                            obj.save(using=using)
-            except ObjectDoesNotExist:
-                pass
+    # Get the instance using all_objects to ensure we can get even if it's already soft deleted
+    try:
+        instance = model_class.all_objects.get(pk=instance_pk)
+    except model_class.DoesNotExist:
+        return
+
+    # Get all related fields that are reverse relationships
+    all_related = [
+        f
+        for f in instance._meta.get_fields()
+        if (f.one_to_many or f.one_to_one) and f.auto_created and not f.concrete
+    ]
+
+    # Handle each related field
+    for relation in all_related:
+        related_name = relation.get_accessor_name()
+
+        # Skip if the relation doesn't exist
+        if not hasattr(instance, related_name):
+            continue
+
+        # Get the on_delete behavior name
+        on_delete_name = (
+            relation.on_delete.__name__
+            if hasattr(relation.on_delete, "__name__")
+            else ""
+        )
+
+        if on_delete_name == "DO_NOTHING":
+            continue
+
+        elif on_delete_name == "SET_NULL":
+            # Handle SET_NULL relationships
+            if isinstance(relation, OneToOneRel):
+                # For OneToOne relationships
+                related_obj = getattr(instance, related_name, None)
+                if related_obj and isinstance(related_obj, models.Model):
+                    setattr(related_obj, relation.remote_field.name, None)
+                    related_obj.save(update_fields=[relation.remote_field.name])
+            else:
+                # For other relationships
+                related_queryset = getattr(instance, related_name).all()
+                related_queryset.update(**{relation.remote_field.name: None})
+
+        else:
+            # Handle CASCADE and other delete behaviors
+            try:
+                if relation.one_to_one:
+                    # Handle OneToOne relationships
+                    related_obj = getattr(instance, related_name, None)
+                    if related_obj:
+                        if hasattr(related_obj, "deleted_at"):
+                            if not related_obj.deleted_at:
+                                related_obj.deleted_at = timezone.now()
+                                related_obj.save()
+                                # Recursively handle related objects
+                                soft_delete_related_objects(
+                                    related_obj._meta.app_label,
+                                    related_obj._meta.model_name,
+                                    related_obj.pk,
+                                    using,
+                                )
+                else:
+                    # Handle other relationships
+                    related_queryset = getattr(instance, related_name).all()
+                    for related_obj in related_queryset:
+                        if hasattr(related_obj, "deleted_at"):
+                            if not related_obj.deleted_at:
+                                related_obj.deleted_at = timezone.now()
+                                related_obj.save()
+                                # Recursively handle related objects
+                                soft_delete_related_objects(
+                                    related_obj._meta.app_label,
+                                    related_obj._meta.model_name,
+                                    related_obj.pk,
+                                    using,
+                                )
+            except Exception as e:
+                # Log the error or handle as needed
+                print(f"Error handling relation {related_name}: {str(e)}")
+                continue
+
+    # Finally, soft delete the instance itself if it hasn't been deleted yet
+    if hasattr(instance, "deleted_at") and not instance.deleted_at:
+        instance.deleted_at = timezone.now()
+        instance.save()
 
 
 # @shared_task

apiserver/plane/db/models/__init__.py

@@ -53,7 +53,6 @@ from .project import (
     ProjectMemberInvite,
     ProjectPublicMember,
 )
-from .deploy_board import DeployBoard
 from .session import Session
 from .social_connection import SocialLoginConnection
 from .state import State
@@ -69,23 +68,14 @@ from .workspace import (
     WorkspaceUserProperties,
 )
 
-from .importer import Importer
 
-from .page import Page, PageLog, PageLabel
 
-from .estimate import Estimate, EstimatePoint
 
-from .intake import Intake, IntakeIssue
 
-from .analytic import AnalyticView
 
-from .notification import Notification, UserNotificationPreference, EmailNotificationLog
 
-from .exporter import ExporterHistory
 
-from .webhook import Webhook, WebhookLog
 
-from .dashboard import Dashboard, DashboardWidget, Widget
 
 from .favorite import UserFavorite
 

apiserver/plane/urls.py

@@ -3,7 +3,6 @@
 from django.conf import settings
 from django.urls import include, path, re_path
 from django.views.generic import TemplateView
-from plane.app.views.timezone import TimezoneEndpoint
 
 handler404 = "plane.app.views.error_404.custom_404_view"
 
@@ -15,7 +14,6 @@ urlpatterns = [
     path("api/v1/", include("plane.api.urls")),
     path("auth/", include("plane.authentication.urls")),
     path("", include("plane.web.urls")),
-    path("api/timezones/", TimezoneEndpoint.as_view(), name="timezones"),
 ]
 
 

apiserver/requirements/base.txt

@@ -1,7 +1,7 @@
 # base requirements
 
 # django
-Django==4.2.16
+Django==4.2.17
 # rest framework
 djangorestframework==3.15.2
 # postgres 

live/package.json

@@ -30,7 +30,7 @@
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
-    "express": "^4.20.0",
+    "express": "^4.21.2",
     "express-ws": "^5.0.2",
     "helmet": "^7.1.0",
     "ioredis": "^5.4.1",

live/src/core/helpers/page.ts

@@ -1,9 +1,15 @@
 import { getSchema } from "@tiptap/core";
 import { generateHTML, generateJSON } from "@tiptap/html";
-import { prosemirrorJSONToYDoc, yXmlFragmentToProseMirrorRootNode } from "y-prosemirror";
-import * as Y from "yjs"
+import {
+  prosemirrorJSONToYDoc,
+  yXmlFragmentToProseMirrorRootNode,
+} from "y-prosemirror";
+import * as Y from "yjs";
 // plane editor
-import { CoreEditorExtensionsWithoutProps, DocumentEditorExtensionsWithoutProps } from "@plane/editor/lib";
+import {
+  CoreEditorExtensionsWithoutProps,
+  DocumentEditorExtensionsWithoutProps,
+} from "@plane/editor/lib";
 
 const DOCUMENT_EDITOR_EXTENSIONS = [
   ...CoreEditorExtensionsWithoutProps,
@@ -11,7 +17,9 @@ const DOCUMENT_EDITOR_EXTENSIONS = [
 ];
 const documentEditorSchema = getSchema(DOCUMENT_EDITOR_EXTENSIONS);
 
-export const getAllDocumentFormatsFromBinaryData =  (description: Uint8Array): {
+export const getAllDocumentFormatsFromBinaryData = (
+  description: Uint8Array,
+): {
   contentBinaryEncoded: string;
   contentJSON: object;
   contentHTML: string;
@@ -24,7 +32,7 @@ export const getAllDocumentFormatsFromBinaryData =  (description: Uint8Array): {
   const type = yDoc.getXmlFragment("default");
   const contentJSON = yXmlFragmentToProseMirrorRootNode(
     type,
-    documentEditorSchema
+    documentEditorSchema,
   ).toJSON();
   // convert to HTML
   const contentHTML = generateHTML(contentJSON, DOCUMENT_EDITOR_EXTENSIONS);
@@ -34,26 +42,29 @@ export const getAllDocumentFormatsFromBinaryData =  (description: Uint8Array): {
     contentJSON,
     contentHTML,
   };
-}
+};
 
-export const getBinaryDataFromHTMLString = (descriptionHTML: string): {
-  contentBinary: Uint8Array
+export const getBinaryDataFromHTMLString = (
+  descriptionHTML: string,
+): {
+  contentBinary: Uint8Array;
 } => {
   // convert HTML to JSON
   const contentJSON = generateJSON(
     descriptionHTML ?? "<p></p>",
-    DOCUMENT_EDITOR_EXTENSIONS
+    DOCUMENT_EDITOR_EXTENSIONS,
   );
   // convert JSON to Y.Doc format
   const transformedData = prosemirrorJSONToYDoc(
     documentEditorSchema,
     contentJSON,
-    "default"
+    "default",
   );
   // convert Y.Doc to Uint8Array format
   const encodedData = Y.encodeStateAsUpdate(transformedData);
 
   return {
-    contentBinary: encodedData
-  }
-}
+    contentBinary: encodedData,
+  };
+};
+

live/src/core/lib/page.ts

@@ -26,18 +26,41 @@ export const updatePageDescription = async (
 
   const { contentBinaryEncoded, contentHTML, contentJSON } =
     getAllDocumentFormatsFromBinaryData(updatedDescription);
+
   try {
-    const payload = {
-      description_binary: contentBinaryEncoded,
-      description_html: contentHTML,
-      description: contentJSON,
-    };
+    // Generate a unique boundary
+    const boundary = `----FormBoundary${Date.now().toString()}`;
+
+    // Construct the multipart form data manually
+    let formData = "";
+
+    // Add binary content
+    formData += `--${boundary}\r\n`;
+    formData += 'Content-Disposition: form-data; name="description_binary"\r\n';
+    formData += "Content-Type: application/octet-stream\r\n\r\n";
+    formData += updatedDescription + "\r\n";
+
+    // Add HTML content
+    formData += `--${boundary}\r\n`;
+    formData += 'Content-Disposition: form-data; name="description_html"\r\n';
+    formData += "Content-Type: text/html\r\n\r\n";
+    formData += contentHTML + "\r\n";
+
+    // Add JSON content
+    formData += `--${boundary}\r\n`;
+    formData += 'Content-Disposition: form-data; name="description"\r\n';
+    formData += "Content-Type: application/json\r\n\r\n";
+    formData += JSON.stringify(contentJSON) + "\r\n";
+
+    // End boundary
+    formData += `--${boundary}--\r\n`;
 
     await pageService.updateDescription(
       workspaceSlug,
       projectId,
       pageId,
-      payload,
+      formData,
+      boundary,
       cookie,
     );
   } catch (error) {
@@ -46,6 +69,8 @@ export const updatePageDescription = async (
   }
 };
 
+// Update the service method
+
 const fetchDescriptionHTMLAndTransform = async (
   workspaceSlug: string,
   projectId: string,
@@ -90,7 +115,9 @@ export const fetchPageDescriptionBinary = async (
       pageId,
       cookie,
     );
+    console.log("response", response);
     const binaryData = new Uint8Array(response);
+    console.log("binaryData", binaryData);
 
     if (binaryData.byteLength === 0) {
       const binary = await fetchDescriptionHTMLAndTransform(

live/src/core/services/page.service.ts

@@ -12,7 +12,7 @@ export class PageService extends APIService {
     workspaceSlug: string,
     projectId: string,
     pageId: string,
-    cookie: string
+    cookie: string,
   ): Promise<TPage> {
     return this.get(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`,
@@ -20,7 +20,7 @@ export class PageService extends APIService {
         headers: {
           Cookie: cookie,
         },
-      }
+      },
     )
       .then((response) => response?.data)
       .catch((error) => {
@@ -32,7 +32,7 @@ export class PageService extends APIService {
     workspaceSlug: string,
     projectId: string,
     pageId: string,
-    cookie: string
+    cookie: string,
   ): Promise<any> {
     return this.get(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`,
@@ -42,7 +42,7 @@ export class PageService extends APIService {
           Cookie: cookie,
         },
         responseType: "arraybuffer",
-      }
+      },
     )
       .then((response) => response?.data)
       .catch((error) => {
@@ -54,21 +54,19 @@ export class PageService extends APIService {
     workspaceSlug: string,
     projectId: string,
     pageId: string,
-    data: {
-      description_binary: string;
-      description_html: string;
-      description: object;
-    },
-    cookie: string
+    formData: string,
+    boundary: string,
+    cookie: string,
   ): Promise<any> {
     return this.patch(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`,
-      data,
+      formData,
       {
         headers: {
+          "Content-Type": `multipart/form-data; boundary=${boundary}`,
           Cookie: cookie,
         },
-      }
+      },
     )
       .then((response) => response?.data)
       .catch((error) => {

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 // components
 import { DocumentContentLoader, PageRenderer } from "@/components/editors";
 // constants
@@ -19,6 +19,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     containerClassName,
     disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
+    editable,
     editorClassName = "",
     embedHandler,
     fileHandler,
@@ -43,23 +44,25 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
   }
 
   // use document editor
-  const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
-    onTransaction,
-    disabledExtensions,
-    editorClassName,
-    embedHandler,
-    extensions,
-    fileHandler,
-    forwardedRef,
-    handleEditorReady,
-    id,
-    mentionHandler,
-    placeholder,
-    realtimeConfig,
-    serverHandler,
-    tabIndex,
-    user,
-  });
+  const { editor, hasServerConnectionFailed, hasServerSynced, localProvider, hasIndexedDbSynced } =
+    useCollaborativeEditor({
+      disabledExtensions,
+      editable,
+      editorClassName,
+      embedHandler,
+      extensions,
+      fileHandler,
+      forwardedRef,
+      handleEditorReady,
+      id,
+      mentionHandler,
+      onTransaction,
+      placeholder,
+      realtimeConfig,
+      serverHandler,
+      tabIndex,
+      user,
+    });
 
   const editorContainerClassNames = getEditorClassNames({
     noBorder: true,
@@ -67,9 +70,30 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     containerClassName,
   });
 
+  const [hasIndexedDbEntry, setHasIndexedDbEntry] = useState(null);
+
+  useEffect(() => {
+    async function documentIndexedDbEntry(dbName: string) {
+      try {
+        const databases = await indexedDB.databases();
+        const hasEntry = databases.some((db) => db.name === dbName);
+        setHasIndexedDbEntry(hasEntry);
+      } catch (error) {
+        console.error("Error checking database existence:", error);
+        return false;
+      }
+    }
+    documentIndexedDbEntry(id);
+  }, [id, localProvider]);
+
   if (!editor) return null;
 
-  if (!hasServerSynced && !hasServerConnectionFailed) return <DocumentContentLoader />;
+  // Wait until we know about IndexedDB status
+  if (hasIndexedDbEntry === null) return null;
+
+  if (hasServerConnectionFailed || (!hasIndexedDbEntry && !hasServerSynced) || !hasIndexedDbSynced) {
+    return <DocumentContentLoader />;
+  }
 
   return (
     <PageRenderer

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

@@ -129,6 +129,7 @@ export const PageRenderer = (props: IPageRenderer) => {
     [editor, cleanup]
   );
 
+  console.log("rendered");
   return (
     <>
       <div className="frame-renderer flex-grow w-full -mx-5" onMouseOver={handleLinkHover}>
@@ -139,12 +140,12 @@ export const PageRenderer = (props: IPageRenderer) => {
           id={id}
         >
           <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
-          {editor.isEditable && (
-            <>
-              <BlockMenu editor={editor} />
-              <AIFeaturesMenu menu={aiHandler?.menu} />
-            </>
-          )}
+          {/* {editor.isEditable && ( */}
+          {/*   <> */}
+          {/*     <BlockMenu editor={editor} /> */}
+          {/*     <AIFeaturesMenu menu={aiHandler?.menu} /> */}
+          {/*   </> */}
+          {/* )} */}
         </EditorContainer>
       </div>
       {isOpen && linkViewProps && coordinates && (

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

@@ -21,6 +21,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     containerClassName,
     disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
+    editable,
     editorClassName = "",
     extensions,
     id,
@@ -38,6 +39,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
   } = props;
 
   const editor = useEditor({
+    editable,
     disabledExtensions,
     editorClassName,
     enableHistory: true,

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

@@ -127,24 +127,30 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
       return "Uploading...";
     }
 
-    if (draggedInside) {
+    if (draggedInside && editor.isEditable) {
       return "Drop image here";
     }
 
-    return "Add an image";
+    if (!editor.isEditable) {
+      return "Viewing Mode: Image Upload Disabled";
+    } else {
+      return "Add an image";
+    }
   }, [draggedInside, failedToLoadImage, isImageBeingUploaded]);
 
   return (
     <div
       className={cn(
-        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 hover:text-custom-text-200 bg-custom-background-90 hover:bg-custom-background-80 border border-dashed border-custom-border-300 transition-all duration-200 ease-in-out cursor-default",
+        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 bg-custom-background-90 border border-dashed border-custom-border-300 transition-all duration-200 ease-in-out cursor-default",
         {
-          "hover:text-custom-text-200 cursor-pointer": editor.isEditable,
-          "bg-custom-background-80 text-custom-text-200": draggedInside,
-          "text-custom-primary-200 bg-custom-primary-100/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200 border-custom-primary-200/10":
-            selected,
-          "text-red-500 cursor-default hover:text-red-500": failedToLoadImage,
-          "bg-red-500/10 hover:bg-red-500/10": failedToLoadImage && selected,
+          "hover:text-custom-text-200 hover:bg-custom-background-80 cursor-pointer": editor.isEditable,
+          "bg-custom-background-80 text-custom-text-200": draggedInside && editor.isEditable,
+          "text-custom-primary-200 bg-custom-primary-100/10 border-custom-primary-200/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200":
+            selected && editor.isEditable,
+          "text-red-500 cursor-default": failedToLoadImage,
+          "hover:text-red-500": failedToLoadImage && editor.isEditable,
+          "bg-red-500/10": failedToLoadImage && selected,
+          "hover:bg-red-500/10": failedToLoadImage && selected && editor.isEditable,
         }
       )}
       onDrop={onDrop}

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

@@ -2,58 +2,67 @@ import { Extension, Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { EditorView } from "@tiptap/pm/view";
 
-export const DropHandlerExtension = () =>
-  Extension.create({
-    name: "dropHandler",
-    priority: 1000,
+export const DropHandlerExtension = Extension.create({
+  name: "dropHandler",
+  priority: 1000,
 
-    addProseMirrorPlugins() {
-      const editor = this.editor;
-      return [
-        new Plugin({
-          key: new PluginKey("drop-handler-plugin"),
-          props: {
-            handlePaste: (view: EditorView, event: ClipboardEvent) => {
-              if (event.clipboardData && event.clipboardData.files && event.clipboardData.files.length > 0) {
-                event.preventDefault();
-                const files = Array.from(event.clipboardData.files);
-                const imageFiles = files.filter((file) => file.type.startsWith("image"));
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    return [
+      new Plugin({
+        key: new PluginKey("drop-handler-plugin"),
+        props: {
+          handlePaste: (view: EditorView, event: ClipboardEvent) => {
+            if (
+              editor.isEditable &&
+              event.clipboardData &&
+              event.clipboardData.files &&
+              event.clipboardData.files.length > 0
+            ) {
+              event.preventDefault();
+              const files = Array.from(event.clipboardData.files);
+              const imageFiles = files.filter((file) => file.type.startsWith("image"));
 
-                if (imageFiles.length > 0) {
-                  const pos = view.state.selection.from;
+              if (imageFiles.length > 0) {
+                const pos = view.state.selection.from;
+                insertImagesSafely({ editor, files: imageFiles, initialPos: pos, event: "drop" });
+              }
+              return true;
+            }
+            return false;
+          },
+          handleDrop: (view: EditorView, event: DragEvent, _slice: any, moved: boolean) => {
+            if (
+              editor.isEditable &&
+              !moved &&
+              event.dataTransfer &&
+              event.dataTransfer.files &&
+              event.dataTransfer.files.length > 0
+            ) {
+              event.preventDefault();
+              const files = Array.from(event.dataTransfer.files);
+              const imageFiles = files.filter((file) => file.type.startsWith("image"));
+
+              if (imageFiles.length > 0) {
+                const coordinates = view.posAtCoords({
+                  left: event.clientX,
+                  top: event.clientY,
+                });
+
+                if (coordinates) {
+                  const pos = coordinates.pos;
                   insertImagesSafely({ editor, files: imageFiles, initialPos: pos, event: "drop" });
                 }
                 return true;
               }
-              return false;
-            },
-            handleDrop: (view: EditorView, event: DragEvent, _slice: any, moved: boolean) => {
-              if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length > 0) {
-                event.preventDefault();
-                const files = Array.from(event.dataTransfer.files);
-                const imageFiles = files.filter((file) => file.type.startsWith("image"));
-
-                if (imageFiles.length > 0) {
-                  const coordinates = view.posAtCoords({
-                    left: event.clientX,
-                    top: event.clientY,
-                  });
-
-                  if (coordinates) {
-                    const pos = coordinates.pos;
-                    insertImagesSafely({ editor, files: imageFiles, initialPos: pos, event: "drop" });
-                  }
-                  return true;
-                }
-              }
-              return false;
-            },
+            }
+            return false;
           },
-        }),
-      ];
-    },
-  });
-
+        },
+      }),
+    ];
+  },
+});
 export const insertImagesSafely = async ({
   editor,
   files,

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

@@ -47,10 +47,11 @@ type TArguments = {
   };
   placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
+  editable?: boolean;
 };
 
 export const CoreEditorExtensions = (args: TArguments): Extensions => {
-  const { disabledExtensions, enableHistory, fileHandler, mentionConfig, placeholder, tabIndex } = args;
+  const { disabledExtensions, enableHistory, fileHandler, mentionConfig, placeholder, tabIndex, editable } = args;
 
   return [
     StarterKit.configure({
@@ -89,7 +90,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
       ...(enableHistory ? {} : { history: false }),
     }),
     CustomQuoteExtension,
-    DropHandlerExtension(),
+    DropHandlerExtension,
     CustomHorizontalRule.configure({
       HTMLAttributes: {
         class: "py-4 border-custom-border-400",
@@ -145,9 +146,9 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     TableCell,
     TableRow,
     CustomMention({
-      mentionSuggestions: mentionConfig.mentionSuggestions,
+      mentionSuggestions: editable ? mentionConfig.mentionSuggestions : undefined,
       mentionHighlights: mentionConfig.mentionHighlights,
-      readonly: false,
+      readonly: !editable,
     }),
     Placeholder.configure({
       placeholder: ({ editor, node }) => {

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

@@ -15,6 +15,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
   const {
     onTransaction,
     disabledExtensions,
+    editable,
     editorClassName,
     editorProps = {},
     embedHandler,
@@ -33,6 +34,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
   // states
   const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false);
   const [hasServerSynced, setHasServerSynced] = useState(false);
+  const [hasIndexedDbSynced, setHasIndexedDbSynced] = useState(false);
   // initialize Hocuspocus provider
   const provider = useMemo(
     () =>
@@ -53,7 +55,10 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
             setHasServerConnectionFailed(true);
           }
         },
-        onSynced: () => setHasServerSynced(true),
+        onSynced: () => {
+          serverHandler?.onServerSync?.();
+          setHasServerSynced(true);
+        },
       }),
     [id, realtimeConfig, serverHandler, user]
   );
@@ -63,6 +68,10 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
     [id, provider]
   );
 
+  localProvider?.on("synced", () => {
+    setHasIndexedDbSynced(true);
+  });
+
   // destroy and disconnect all providers connection on unmount
   useEffect(
     () => () => {
@@ -75,7 +84,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
   const editor = useEditor({
     disabledExtensions,
     id,
-    onTransaction,
+    editable,
     editorProps,
     editorClassName,
     enableHistory: false,
@@ -97,9 +106,10 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
       }),
     ],
     fileHandler,
-    handleEditorReady,
     forwardedRef,
+    handleEditorReady,
     mentionHandler,
+    onTransaction,
     placeholder,
     provider,
     tabIndex,
@@ -109,5 +119,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
     editor,
     hasServerConnectionFailed,
     hasServerSynced,
+    hasIndexedDbSynced,
+    localProvider,
   };
 };

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

@@ -27,6 +27,7 @@ import type {
 } from "@/types";
 
 export interface CustomEditorProps {
+  editable: boolean;
   editorClassName: string;
   editorProps?: EditorProps;
   enableHistory: boolean;
@@ -55,6 +56,7 @@ export interface CustomEditorProps {
 export const useEditor = (props: CustomEditorProps) => {
   const {
     disabledExtensions,
+    editable,
     editorClassName,
     editorProps = {},
     enableHistory,
@@ -74,42 +76,46 @@ export const useEditor = (props: CustomEditorProps) => {
     autofocus = false,
   } = props;
   // states
-
   const [savedSelection, setSavedSelection] = useState<Selection | null>(null);
   // refs
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
   const savedSelectionRef = useRef(savedSelection);
-  const editor = useTiptapEditor({
-    autofocus,
-    editorProps: {
-      ...CoreEditorProps({
-        editorClassName,
-      }),
-      ...editorProps,
+  const editor = useTiptapEditor(
+    {
+      editable,
+      autofocus,
+      editorProps: {
+        ...CoreEditorProps({
+          editorClassName,
+        }),
+        ...editorProps,
+      },
+      extensions: [
+        ...CoreEditorExtensions({
+          editable,
+          disabledExtensions,
+          enableHistory,
+          fileHandler,
+          mentionConfig: {
+            mentionSuggestions: mentionHandler.suggestions ?? (() => Promise.resolve<IMentionSuggestion[]>([])),
+            mentionHighlights: mentionHandler.highlights,
+          },
+          placeholder,
+          tabIndex,
+        }),
+        ...extensions,
+      ],
+      content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",
+      onCreate: () => handleEditorReady?.(true),
+      onTransaction: ({ editor }) => {
+        setSavedSelection(editor.state.selection);
+        onTransaction?.();
+      },
+      onUpdate: ({ editor }) => onChange?.(editor.getJSON(), editor.getHTML()),
+      onDestroy: () => handleEditorReady?.(false),
     },
-    extensions: [
-      ...CoreEditorExtensions({
-        disabledExtensions,
-        enableHistory,
-        fileHandler,
-        mentionConfig: {
-          mentionSuggestions: mentionHandler.suggestions ?? (() => Promise.resolve<IMentionSuggestion[]>([])),
-          mentionHighlights: mentionHandler.highlights,
-        },
-        placeholder,
-        tabIndex,
-      }),
-      ...extensions,
-    ],
-    content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",
-    onCreate: () => handleEditorReady?.(true),
-    onTransaction: ({ editor }) => {
-      setSavedSelection(editor.state.selection);
-      onTransaction?.();
-    },
-    onUpdate: ({ editor }) => onChange?.(editor.getJSON(), editor.getHTML()),
-    onDestroy: () => handleEditorReady?.(false),
-  });
+    [editable]
+  );
 
   // Update the ref whenever savedSelection changes
   useEffect(() => {

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

@@ -105,7 +105,7 @@ export const useDropZone = (args: TDropzoneArgs) => {
     async (e: DragEvent<HTMLDivElement>) => {
       e.preventDefault();
       setDraggedInside(false);
-      if (e.dataTransfer.files.length === 0) {
+      if (e.dataTransfer.files.length === 0 || !editor.isEditable) {
         return;
       }
       const filesList = e.dataTransfer.files;

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

@@ -17,10 +17,12 @@ import {
 export type TServerHandler = {
   onConnect?: () => void;
   onServerError?: () => void;
+  onServerSync?: () => void;
 };
 
 type TCollaborativeEditorHookProps = {
   disabledExtensions: TExtensions[];
+  editable?: boolean;
   editorClassName: string;
   editorProps?: EditorProps;
   extensions?: Extensions;

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

@@ -106,6 +106,7 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
 
 // editor props
 export interface IEditorProps {
+  editable: boolean;
   containerClassName?: string;
   displayConfig?: TDisplayConfig;
   disabledExtensions: TExtensions[];

packages/ui/package.json

@@ -31,9 +31,9 @@
     "@blueprintjs/core": "^4.16.3",
     "@blueprintjs/popover2": "^1.13.3",
     "@headlessui/react": "^1.7.3",
-    "@popperjs/core": "^2.11.8",
     "@plane/hooks": "*",
     "@plane/utils": "*",
+    "@popperjs/core": "^2.11.8",
     "clsx": "^2.0.0",
     "emoji-picker-react": "^4.5.16",
     "lodash": "^4.17.21",
@@ -46,6 +46,8 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.4.0",
+    "@plane/eslint-config": "*",
+    "@plane/typescript-config": "*",
     "@storybook/addon-essentials": "^8.1.1",
     "@storybook/addon-interactions": "^8.1.1",
     "@storybook/addon-links": "^8.1.1",
@@ -63,14 +65,15 @@
     "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.19",
     "classnames": "^2.3.2",
-    "@plane/eslint-config": "*",
     "postcss-cli": "^11.0.0",
     "postcss-nested": "^6.0.1",
     "storybook": "^8.1.1",
     "tailwind-config-custom": "*",
     "tailwindcss": "^3.4.3",
-    "@plane/typescript-config": "*",
     "tsup": "^7.2.0",
     "typescript": "5.3.3"
+  },
+  "resolutions": {
+    "@types/react": "^18.0.0"
   }
 }

web/ce/components/sidebar/index.ts

@@ -1 +1,2 @@
 export * from "./app-switcher";
+export * from "./project-navigation-root";

web/ce/components/sidebar/project-navigation-root.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { FC } from "react";
+// components
+import { ProjectNavigation } from "@/components/workspace";
+
+type TProjectItemsRootProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ProjectNavigationRoot: FC<TProjectItemsRootProps> = (props) => {
+  const { workspaceSlug, projectId } = props;
+  return <ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} />;
+};

web/core/components/icons/syncing-component.tsx

@@ -0,0 +1,18 @@
+import { RefreshCcw } from "lucide-react";
+import { Tooltip } from "@plane/ui";
+
+export const SyncingComponent = (props: { toolTipContent?: string }) => {
+  const { toolTipContent } = props;
+  const lockedComponent = (
+    <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
+      <RefreshCcw className="h-3 w-3" />
+      <span>Syncing</span>
+    </div>
+  );
+
+  return (
+    <>
+      {toolTipContent ? <Tooltip tooltipContent={toolTipContent}>{lockedComponent}</Tooltip> : <>{lockedComponent}</>}
+    </>
+  );
+};

web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx

@@ -121,7 +121,10 @@ export const IssueDetailWidgetModals: FC<Props> = observer((props) => {
   };
 
   // helpers
-  const createUpdateModalData = { parent_id: issueCrudOperationState?.create?.parentIssueId };
+  const createUpdateModalData: Partial<TIssue> = {
+    parent_id: issueCrudOperationState?.create?.parentIssueId,
+    project_id: projectId,
+  };
 
   const existingIssuesModalSearchParams = {
     sub_issue: true,

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

@@ -1,11 +1,9 @@
-import { useCallback, useMemo } from "react";
+import { Dispatch, SetStateAction, useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // document-editor
 import {
   CollaborativeDocumentEditorWithRef,
-  CollaborativeDocumentReadOnlyEditorWithRef,
-  EditorReadOnlyRefApi,
   EditorRefApi,
   TAIMenuProps,
   TDisplayConfig,
@@ -20,7 +18,7 @@ import { Row } from "@plane/ui";
 import { PageContentBrowser, PageContentLoader, PageEditorTitle } from "@/components/pages";
 // helpers
 import { cn, LIVE_BASE_PATH, LIVE_BASE_URL } from "@/helpers/common.helper";
-import { getEditorFileHandlers, getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
+import { getEditorFileHandlers } from "@/helpers/editor.helper";
 import { generateRandomColor } from "@/helpers/string.helper";
 // hooks
 import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store";
@@ -42,24 +40,15 @@ const fileService = new FileService();
 type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   editorReady: boolean;
-  handleConnectionStatus: (status: boolean) => void;
-  handleEditorReady: (value: boolean) => void;
-  handleReadOnlyEditorReady: (value: boolean) => void;
+  handleConnectionStatus: Dispatch<SetStateAction<boolean>>;
+  handleEditorReady: Dispatch<SetStateAction<boolean>>;
   page: IPage;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
   sidePeekVisible: boolean;
+  setSyncing: (value: boolean) => void;
 };
 
 export const PageEditorBody: React.FC<Props> = observer((props) => {
-  const {
-    editorRef,
-    handleConnectionStatus,
-    handleEditorReady,
-    handleReadOnlyEditorReady,
-    page,
-    readOnlyEditorRef,
-    sidePeekVisible,
-  } = props;
+  const { editorRef, handleConnectionStatus, handleEditorReady, page, sidePeekVisible, setSyncing } = props;
   // router
   const { workspaceSlug, projectId } = useParams();
   // store hooks
@@ -118,12 +107,17 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     handleConnectionStatus(true);
   }, []);
 
+  const handleServerSynced = useCallback(() => {
+    setSyncing(true);
+  }, []);
+
   const serverHandler: TServerHandler = useMemo(
     () => ({
       onConnect: handleServerConnect,
       onServerError: handleServerError,
+      onServerSync: handleServerSynced,
     }),
-    [handleServerConnect, handleServerError]
+    [handleServerConnect, handleServerError, handleServerSynced]
   );
 
   const realtimeConfig: TRealtimeConfig | undefined = useMemo(() => {
@@ -169,9 +163,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
           "w-[5%]": isFullWidth,
         })}
       >
-        {!isFullWidth && (
-          <PageContentBrowser editorRef={(isContentEditable ? editorRef : readOnlyEditorRef)?.current} />
-        )}
+        {!isFullWidth && <PageContentBrowser editorRef={editorRef.current} />}
       </Row>
       <div
         className={cn("h-full w-full pt-5 duration-200", {
@@ -188,72 +180,48 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
               readOnly={!isContentEditable}
             />
           </div>
-          {isContentEditable ? (
-            <CollaborativeDocumentEditorWithRef
-              id={pageId}
-              fileHandler={getEditorFileHandlers({
-                maxFileSize,
-                projectId: projectId?.toString() ?? "",
-                uploadFile: async (file) => {
-                  const { asset_id } = await fileService.uploadProjectAsset(
-                    workspaceSlug?.toString() ?? "",
-                    projectId?.toString() ?? "",
-                    {
-                      entity_identifier: pageId,
-                      entity_type: EFileAssetType.PAGE_DESCRIPTION,
-                    },
-                    file
-                  );
-                  return asset_id;
-                },
-                workspaceId,
-                workspaceSlug: workspaceSlug?.toString() ?? "",
-              })}
-              handleEditorReady={handleEditorReady}
-              ref={editorRef}
-              containerClassName="h-full p-0 pb-64"
-              displayConfig={displayConfig}
-              editorClassName="pl-10"
-              mentionHandler={{
-                highlights: mentionHighlights,
-                suggestions: mentionSuggestions,
-              }}
-              embedHandler={{
-                issue: issueEmbedProps,
-              }}
-              realtimeConfig={realtimeConfig}
-              serverHandler={serverHandler}
-              user={userConfig}
-              disabledExtensions={disabledExtensions}
-              aiHandler={{
-                menu: getAIMenu,
-              }}
-            />
-          ) : (
-            <CollaborativeDocumentReadOnlyEditorWithRef
-              id={pageId}
-              ref={readOnlyEditorRef}
-              disabledExtensions={disabledExtensions}
-              fileHandler={getReadOnlyEditorFileHandlers({
-                projectId: projectId?.toString() ?? "",
-                workspaceSlug: workspaceSlug?.toString() ?? "",
-              })}
-              handleEditorReady={handleReadOnlyEditorReady}
-              containerClassName="p-0 pb-64 border-none"
-              displayConfig={displayConfig}
-              editorClassName="pl-10"
-              mentionHandler={{
-                highlights: mentionHighlights,
-              }}
-              embedHandler={{
-                issue: {
-                  widgetCallback: issueEmbedProps.widgetCallback,
-                },
-              }}
-              realtimeConfig={realtimeConfig}
-              user={userConfig}
-            />
-          )}
+          <CollaborativeDocumentEditorWithRef
+            editable={isContentEditable}
+            id={pageId}
+            fileHandler={getEditorFileHandlers({
+              maxFileSize,
+              projectId: projectId?.toString() ?? "",
+              uploadFile: async (file) => {
+                const { asset_id } = await fileService.uploadProjectAsset(
+                  workspaceSlug?.toString() ?? "",
+                  projectId?.toString() ?? "",
+                  {
+                    entity_identifier: pageId,
+                    entity_type: EFileAssetType.PAGE_DESCRIPTION,
+                  },
+                  file
+                );
+                return asset_id;
+              },
+              workspaceId,
+              workspaceSlug: workspaceSlug?.toString() ?? "",
+            })}
+            handleEditorReady={handleEditorReady}
+            ref={editorRef}
+            containerClassName="h-full p-0 pb-64"
+            displayConfig={displayConfig}
+            editorClassName="pl-10"
+            mentionHandler={{
+              highlights: mentionHighlights,
+              suggestions: mentionSuggestions,
+            }}
+            embedHandler={{
+              issue: issueEmbedProps,
+            }}
+            realtimeConfig={realtimeConfig}
+            serverHandler={serverHandler}
+            user={userConfig}
+            disabledExtensions={disabledExtensions}
+            aiHandler={{
+              menu: getAIMenu,
+            }}
+          />
+          )
         </div>
       </div>
       <div

web/core/components/pages/editor/header/extra-options.tsx

@@ -2,11 +2,12 @@
 
 import { observer } from "mobx-react";
 // editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // ui
 import { ArchiveIcon, FavoriteStar, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
 // components
 import { LockedComponent } from "@/components/icons/locked-component";
+import { SyncingComponent } from "@/components/icons/syncing-component";
 import { PageInfoPopover, PageOptionsDropdown } from "@/components/pages";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
@@ -19,11 +20,11 @@ type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   handleDuplicatePage: () => void;
   page: IPage;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
+  syncState: boolean | null;
 };
 
 export const PageExtraOptions: React.FC<Props> = observer((props) => {
-  const { editorRef, handleDuplicatePage, page, readOnlyEditorRef } = props;
+  const { editorRef, syncState, handleDuplicatePage, page } = props;
   // derived values
   const {
     archived_at,
@@ -60,6 +61,7 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
   return (
     <div className="flex items-center justify-end gap-3">
       {is_locked && <LockedComponent />}
+      {!syncState && <SyncingComponent />}
       {archived_at && (
         <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-blue-500/20 px-3 py-0.5 text-xs font-medium text-blue-500">
           <ArchiveIcon className="flex-shrink-0 size-3" />
@@ -85,12 +87,8 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
           iconClassName="text-custom-text-100"
         />
       )}
-      <PageInfoPopover editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current} />
-      <PageOptionsDropdown
-        editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
-        handleDuplicatePage={handleDuplicatePage}
-        page={page}
-      />
+      <PageInfoPopover editorRef={editorRef.current} />
+      <PageOptionsDropdown editorRef={editorRef.current} handleDuplicatePage={handleDuplicatePage} page={page} />
     </div>
   );
 });

web/core/components/pages/editor/header/info-popover.tsx

@@ -2,12 +2,12 @@ import { useState } from "react";
 import { usePopper } from "react-popper";
 import { Info } from "lucide-react";
 // plane editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // helpers
 import { getReadTimeFromWordsCount } from "@/helpers/date-time.helper";
 
 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
 };
 
 export const PageInfoPopover: React.FC<Props> = (props) => {

web/core/components/pages/editor/header/mobile-root.tsx

@@ -13,52 +13,34 @@ type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   handleDuplicatePage: () => void;
   page: IPage;
-  readOnlyEditorReady: boolean;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
   setSidePeekVisible: (sidePeekState: boolean) => void;
   sidePeekVisible: boolean;
 };
 
 export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
-  const {
-    editorReady,
-    editorRef,
-    handleDuplicatePage,
-    page,
-    readOnlyEditorReady,
-    readOnlyEditorRef,
-    setSidePeekVisible,
-    sidePeekVisible,
-  } = props;
+  const { editorReady, editorRef, handleDuplicatePage, page, setSidePeekVisible, sidePeekVisible } = props;
   // derived values
   const { isContentEditable } = page;
   // page filters
   const { isFullWidth } = usePageFilters();
 
-  if (!editorRef.current && !readOnlyEditorRef.current) return null;
+  if (!editorRef.current) return null;
 
   return (
     <>
       <Header variant={EHeaderVariant.SECONDARY}>
         <div className="flex-shrink-0 my-auto">
           <PageSummaryPopover
-            editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
+            editorRef={editorRef.current}
             isFullWidth={isFullWidth}
             sidePeekVisible={sidePeekVisible}
             setSidePeekVisible={setSidePeekVisible}
           />
         </div>
-        <PageExtraOptions
-          editorRef={editorRef}
-          handleDuplicatePage={handleDuplicatePage}
-          page={page}
-          readOnlyEditorRef={readOnlyEditorRef}
-        />
+        <PageExtraOptions editorRef={editorRef} handleDuplicatePage={handleDuplicatePage} page={page} />
       </Header>
       <Header variant={EHeaderVariant.TERNARY}>
-        {(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
-          <PageToolbar editorRef={editorRef?.current} />
-        )}
+        {editorReady && isContentEditable && editorRef.current && <PageToolbar editorRef={editorRef?.current} />}
       </Header>
     </>
   );

web/core/components/pages/editor/header/options-dropdown.tsx

@@ -15,7 +15,7 @@ import {
   LucideIcon,
 } from "lucide-react";
 // document editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // ui
 import { ArchiveIcon, CustomMenu, type ISvgIcons, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 // components
@@ -30,7 +30,7 @@ import { useQueryParams } from "@/hooks/use-query-params";
 import { IPage } from "@/store/pages/page";
 
 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
   handleDuplicatePage: () => void;
   page: IPage;
 };

web/core/components/pages/editor/header/root.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // components
 import { Header, EHeaderVariant } from "@plane/ui";
 import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
@@ -15,35 +15,25 @@ type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   handleDuplicatePage: () => void;
   page: IPage;
-  readOnlyEditorReady: boolean;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
   setSidePeekVisible: (sidePeekState: boolean) => void;
   sidePeekVisible: boolean;
+  syncState: boolean | null;
 };
 
 export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
-  const {
-    editorReady,
-    editorRef,
-    handleDuplicatePage,
-    page,
-    readOnlyEditorReady,
-    readOnlyEditorRef,
-    setSidePeekVisible,
-    sidePeekVisible,
-  } = props;
+  const { editorReady, editorRef, setSidePeekVisible, sidePeekVisible, handleDuplicatePage, page, syncState } = props;
   // derived values
   const { isContentEditable } = page;
   // page filters
   const { isFullWidth } = usePageFilters();
 
-  if (!editorRef.current && !readOnlyEditorRef.current) return null;
+  if (!editorRef.current) return null;
 
   return (
     <>
       <Header variant={EHeaderVariant.SECONDARY} showOnMobile={false}>
         <Header.LeftItem className="gap-0 w-full">
-          {(editorReady || readOnlyEditorReady) && (
+          {editorReady && (
             <div
               className={cn("flex-shrink-0 my-auto", {
                 "w-40 lg:w-56": !isFullWidth,
@@ -51,30 +41,26 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
               })}
             >
               <PageSummaryPopover
-                editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
+                editorRef={editorRef.current}
                 isFullWidth={isFullWidth}
                 sidePeekVisible={sidePeekVisible}
                 setSidePeekVisible={setSidePeekVisible}
               />
             </div>
           )}
-          {(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
-            <PageToolbar editorRef={editorRef?.current} />
-          )}
+          {editorReady && isContentEditable && editorRef.current && <PageToolbar editorRef={editorRef?.current} />}
         </Header.LeftItem>
         <PageExtraOptions
           editorRef={editorRef}
           handleDuplicatePage={handleDuplicatePage}
           page={page}
-          readOnlyEditorRef={readOnlyEditorRef}
+          syncState={syncState}
         />
       </Header>
       <div className="md:hidden">
         <PageEditorMobileHeaderRoot
           editorRef={editorRef}
-          readOnlyEditorRef={readOnlyEditorRef}
           editorReady={editorReady}
-          readOnlyEditorReady={readOnlyEditorReady}
           handleDuplicatePage={handleDuplicatePage}
           page={page}
           sidePeekVisible={sidePeekVisible}

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

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 // editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // types
 import { TPage } from "@plane/types";
 // ui
@@ -32,12 +32,11 @@ export const PageRoot = observer((props: TPageRootProps) => {
   // states
   const [editorReady, setEditorReady] = useState(false);
   const [hasConnectionFailed, setHasConnectionFailed] = useState(false);
-  const [readOnlyEditorReady, setReadOnlyEditorReady] = useState(false);
   const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768);
+  const [syncState, setSyncing] = useState<boolean | null>(null);
   const [isVersionsOverlayOpen, setIsVersionsOverlayOpen] = useState(false);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
-  const readOnlyEditorRef = useRef<EditorReadOnlyRefApi>(null);
   // router
   const router = useAppRouter();
   // search params
@@ -99,9 +98,7 @@ export const PageRoot = observer((props: TPageRootProps) => {
     editorRef.current?.clearEditor();
     editorRef.current?.setEditorValue(descriptionHTML);
   };
-  const currentVersionDescription = isContentEditable
-    ? editorRef.current?.getDocument().html
-    : readOnlyEditorRef.current?.getDocument().html;
+  const currentVersionDescription = editorRef.current?.getDocument().html;
 
   return (
     <>
@@ -137,20 +134,18 @@ export const PageRoot = observer((props: TPageRootProps) => {
         editorRef={editorRef}
         handleDuplicatePage={handleDuplicatePage}
         page={page}
-        readOnlyEditorReady={readOnlyEditorReady}
-        readOnlyEditorRef={readOnlyEditorRef}
         setSidePeekVisible={(state) => setSidePeekVisible(state)}
         sidePeekVisible={sidePeekVisible}
+        syncState={syncState}
       />
       <PageEditorBody
         editorReady={editorReady}
         editorRef={editorRef}
-        handleConnectionStatus={(status) => setHasConnectionFailed(status)}
-        handleEditorReady={(val) => setEditorReady(val)}
-        handleReadOnlyEditorReady={() => setReadOnlyEditorReady(true)}
+        handleConnectionStatus={setHasConnectionFailed}
+        handleEditorReady={setEditorReady}
         page={page}
-        readOnlyEditorRef={readOnlyEditorRef}
         sidePeekVisible={sidePeekVisible}
+        setSyncing={setSyncing}
       />
     </>
   );

web/core/components/pages/editor/summary/content-browser.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
 // plane editor
-import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/editor";
+import { EditorRefApi, IMarking } from "@plane/editor";
 // components
 import { OutlineHeading1, OutlineHeading2, OutlineHeading3 } from "./heading-components";
 
 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
   setSidePeekVisible?: (sidePeekState: boolean) => void;
 };
 

web/core/components/pages/editor/summary/popover.tsx

@@ -2,14 +2,14 @@ import { useState } from "react";
 import { usePopper } from "react-popper";
 import { List } from "lucide-react";
 // document editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // components
 import { PageContentBrowser } from "./content-browser";
 
 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
   isFullWidth: boolean;
   sidePeekVisible: boolean;
   setSidePeekVisible: (sidePeekState: boolean) => void;

web/core/components/pages/modals/export-page-modal.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { PageProps, pdf } from "@react-pdf/renderer";
 import { Controller, useForm } from "react-hook-form";
 // plane editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // plane ui
 import { Button, CustomSelect, EModalPosition, EModalWidth, ModalCore, setToast, TOAST_TYPE } from "@plane/ui";
 // components
@@ -16,7 +16,7 @@ import {
 } from "@/helpers/editor.helper";
 
 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
   isOpen: boolean;
   onClose: () => void;
   pageTitle: string;

web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx

@@ -5,7 +5,6 @@ import { useParams } from "next/navigation";
 import { useForm, Controller } from "react-hook-form";
 import { X } from "lucide-react";
 import { Transition, Dialog } from "@headlessui/react";
-import { TNotification } from "@plane/types";
 import { Button, CustomSelect } from "@plane/ui";
 // components
 import { DateDropdown } from "@/components/dropdowns";

web/core/components/workspace/sidebar/index.ts

@@ -3,6 +3,7 @@ export * from "./favorites";
 export * from "./help-section";
 export * from "./projects-list-item";
 export * from "./projects-list";
+export * from "./project-navigation";
 export * from "./quick-actions";
 export * from "./user-menu";
 export * from "./workspace-menu";

web/core/components/workspace/sidebar/project-navigation.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import React, { FC, useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { FileText, Layers } from "lucide-react";
+// plane ui
+import { Tooltip, DiceIcon, ContrastIcon, LayersIcon, Intake } from "@plane/ui";
+// components
+import { SidebarNavItem } from "@/components/sidebar";
+// hooks
+import { useAppTheme, useProject, useUserPermissions } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane-web constants
+import { EUserPermissions } from "@/plane-web/constants";
+import { EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+
+export type TNavigationItem = {
+  name: string;
+  href: string;
+  icon: React.ElementType;
+  access: EUserPermissions[];
+  shouldRender: boolean;
+  sortOrder: number;
+};
+
+type TProjectItemsProps = {
+  workspaceSlug: string;
+  projectId: string;
+  additionalNavigationItems?: (workspaceSlug: string, projectId: string) => TNavigationItem[];
+};
+
+export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
+  const { workspaceSlug, projectId, additionalNavigationItems } = props;
+  // store hooks
+  const { sidebarCollapsed: isSidebarCollapsed, toggleSidebar } = useAppTheme();
+  const { getProjectById } = useProject();
+  const { isMobile } = usePlatformOS();
+  const { allowPermissions } = useUserPermissions();
+  // pathname
+  const pathname = usePathname();
+  // derived values
+  const project = getProjectById(projectId);
+  // handlers
+  const handleProjectClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+  };
+
+  if (!project) return null;
+
+  const baseNavigation = useCallback(
+    (workspaceSlug: string, projectId: string): TNavigationItem[] => [
+      {
+        name: "Issues",
+        href: `/${workspaceSlug}/projects/${projectId}/issues`,
+        icon: LayersIcon,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: true,
+        sortOrder: 1,
+      },
+      {
+        name: "Cycles",
+        href: `/${workspaceSlug}/projects/${projectId}/cycles`,
+        icon: ContrastIcon,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+        shouldRender: project.cycle_view,
+        sortOrder: 2,
+      },
+      {
+        name: "Modules",
+        href: `/${workspaceSlug}/projects/${projectId}/modules`,
+        icon: DiceIcon,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+        shouldRender: project.module_view,
+        sortOrder: 3,
+      },
+      {
+        name: "Views",
+        href: `/${workspaceSlug}/projects/${projectId}/views`,
+        icon: Layers,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: project.issue_views_view,
+        sortOrder: 4,
+      },
+      {
+        name: "Pages",
+        href: `/${workspaceSlug}/projects/${projectId}/pages`,
+        icon: FileText,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: project.page_view,
+        sortOrder: 5,
+      },
+      {
+        name: "Intake",
+        href: `/${workspaceSlug}/projects/${projectId}/inbox`,
+        icon: Intake,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: project.inbox_view,
+        sortOrder: 6,
+      },
+    ],
+    [project]
+  );
+
+  // memoized navigation items and adding additional navigation items
+  const navigationItemsMemo = useMemo(() => {
+    const navigationItems = (workspaceSlug: string, projectId: string): TNavigationItem[] => {
+      const navItems = baseNavigation(workspaceSlug, projectId);
+
+      if (additionalNavigationItems) {
+        navItems.push(...additionalNavigationItems(workspaceSlug, projectId));
+      }
+
+      return navItems;
+    };
+
+    // sort navigation items by sortOrder
+    const sortedNavigationItems = navigationItems(workspaceSlug, projectId).sort(
+      (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0)
+    );
+
+    return sortedNavigationItems;
+  }, [workspaceSlug, projectId, baseNavigation, additionalNavigationItems]);
+
+  return (
+    <>
+      {navigationItemsMemo.map((item) => {
+        if (!item.shouldRender) return;
+
+        const hasAccess = allowPermissions(item.access, EUserPermissionsLevel.PROJECT, workspaceSlug, project.id);
+        if (!hasAccess) return null;
+
+        return (
+          <Tooltip
+            key={item.name}
+            isMobile={isMobile}
+            tooltipContent={`${project?.name}: ${item.name}`}
+            position="right"
+            className="ml-2"
+            disabled={!isSidebarCollapsed}
+          >
+            <Link href={item.href} onClick={handleProjectClick}>
+              <SidebarNavItem
+                className={`pl-[18px] ${isSidebarCollapsed ? "p-0 size-7 justify-center mx-auto" : ""}`}
+                isActive={pathname.includes(item.href)}
+              >
+                <div className="flex items-center gap-1.5 py-[1px]">
+                  <item.icon
+                    className={`flex-shrink-0 size-4 ${item.name === "Intake" ? "stroke-1" : "stroke-[1.5]"}`}
+                  />
+                  {!isSidebarCollapsed && <span className="text-xs font-medium">{item.name}</span>}
+                </div>
+              </SidebarNavItem>
+            </Link>
+          </Tooltip>
+        );
+      })}
+    </>
+  );
+});

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

@@ -8,46 +8,24 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { createRoot } from "react-dom/client";
-import {
-  PenSquare,
-  LinkIcon,
-  Star,
-  FileText,
-  Settings,
-  Share2,
-  LogOut,
-  MoreHorizontal,
-  ChevronRight,
-  Layers,
-} from "lucide-react";
+import { LinkIcon, Star, Settings, Share2, LogOut, MoreHorizontal, ChevronRight } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // ui
-import {
-  CustomMenu,
-  Tooltip,
-  ArchiveIcon,
-  DiceIcon,
-  ContrastIcon,
-  LayersIcon,
-  setPromiseToast,
-  DropIndicator,
-  DragHandle,
-  Intake,
-  ControlLink,
-} from "@plane/ui";
+import { CustomMenu, Tooltip, ArchiveIcon, setPromiseToast, DropIndicator, DragHandle, ControlLink } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
 import { LeaveProjectModal, PublishProjectModal } from "@/components/project";
-import { SidebarNavItem } from "@/components/sidebar";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane-web components
+import { ProjectNavigationRoot } from "@/plane-web/components/sidebar";
 // constants
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 import { HIGHLIGHT_CLASS, highlightIssueOnDrop } from "../../issues/issue-layouts/utils";
@@ -66,50 +44,11 @@ type Props = {
   isLastChild: boolean;
 };
 
-const navigation = (workspaceSlug: string, projectId: string) => [
-  {
-    name: "Issues",
-    href: `/${workspaceSlug}/projects/${projectId}/issues`,
-    Icon: LayersIcon,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-  },
-  {
-    name: "Cycles",
-    href: `/${workspaceSlug}/projects/${projectId}/cycles`,
-    Icon: ContrastIcon,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  {
-    name: "Modules",
-    href: `/${workspaceSlug}/projects/${projectId}/modules`,
-    Icon: DiceIcon,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  {
-    name: "Views",
-    href: `/${workspaceSlug}/projects/${projectId}/views`,
-    Icon: Layers,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-  },
-  {
-    name: "Pages",
-    href: `/${workspaceSlug}/projects/${projectId}/pages`,
-    Icon: FileText,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-  },
-  {
-    name: "Intake",
-    href: `/${workspaceSlug}/projects/${projectId}/inbox`,
-    Icon: Intake,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-  },
-];
-
 export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   const { projectId, handleCopyText, disableDrag, disableDrop, isLastChild, handleOnProjectDrop, projectListType } =
     props;
   // store hooks
-  const { sidebarCollapsed: isSidebarCollapsed, toggleSidebar } = useAppTheme();
+  const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
   const { setTrackElement } = useEventTracker();
   const { addProjectToFavorites, removeProjectFromFavorites, getProjectById } = useProject();
   const { isMobile } = usePlatformOS();
@@ -128,8 +67,6 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId: URLProjectId } = useParams();
-  // pathname
-  const pathname = usePathname();
   // derived values
   const project = getProjectById(projectId);
   // auth
@@ -185,12 +122,6 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     setLeaveProjectModal(true);
   };
 
-  const handleProjectClick = () => {
-    if (window.innerWidth < 768) {
-      toggleSidebar();
-    }
-  };
-
   useEffect(() => {
     const element = projectRef.current;
     const dragHandleElement = dragHandleRef.current;
@@ -503,50 +434,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
           >
             {isProjectListOpen && (
               <Disclosure.Panel as="div" className="flex flex-col gap-0.5 mt-1">
-                {navigation(workspaceSlug?.toString(), project?.id).map((item) => {
-                  if (
-                    (item.name === "Cycles" && !project.cycle_view) ||
-                    (item.name === "Modules" && !project.module_view) ||
-                    (item.name === "Views" && !project.issue_views_view) ||
-                    (item.name === "Pages" && !project.page_view) ||
-                    (item.name === "Intake" && !project.inbox_view)
-                  )
-                    return;
-                  return (
-                    <>
-                      {allowPermissions(
-                        item.access,
-                        EUserPermissionsLevel.PROJECT,
-                        workspaceSlug.toString(),
-                        project.id
-                      ) && (
-                        <Tooltip
-                          key={item.name}
-                          isMobile={isMobile}
-                          tooltipContent={`${project?.name}: ${item.name}`}
-                          position="right"
-                          className="ml-2"
-                          disabled={!isSidebarCollapsed}
-                        >
-                          <Link key={item.name} href={item.href} onClick={handleProjectClick}>
-                            <SidebarNavItem
-                              key={item.name}
-                              className={`pl-[18px]  ${isSidebarCollapsed ? "p-0 size-7 justify-center mx-auto" : ""}`}
-                              isActive={pathname.includes(item.href)}
-                            >
-                              <div className="flex items-center gap-1.5 py-[1px]">
-                                <item.Icon
-                                  className={`flex-shrink-0 size-4 ${item.name === "Intake" ? "stroke-1" : "stroke-[1.5]"}`}
-                                />
-                                {!isSidebarCollapsed && <span className="text-xs font-medium">{item.name}</span>}
-                              </div>
-                            </SidebarNavItem>
-                          </Link>
-                        </Tooltip>
-                      )}
-                    </>
-                  );
-                })}
+                <ProjectNavigationRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
               </Disclosure.Panel>
             )}
           </Transition>

web/core/hooks/use-collaborative-page-actions.tsx

@@ -50,6 +50,10 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead
       try {
         await actionDetails.execute(isPerformedByCurrentUser);
         if (isPerformedByCurrentUser) {
+          const serverEventName = getServerEventName(clientAction);
+          if (serverEventName) {
+            editorRef?.emitRealTimeUpdate(serverEventName);
+          }
           setCurrentActionBeingProcessed(clientAction);
         }
       } catch {
@@ -60,18 +64,9 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead
         });
       }
     },
-    [actionHandlerMap]
+    [actionHandlerMap, editorRef]
   );
 
-  useEffect(() => {
-    if (currentActionBeingProcessed) {
-      const serverEventName = getServerEventName(currentActionBeingProcessed);
-      if (serverEventName) {
-        editorRef?.emitRealTimeUpdate(serverEventName);
-      }
-    }
-  }, [currentActionBeingProcessed, editorRef]);
-
   useEffect(() => {
     const realTimeStatelessMessageListener = editorRef?.listenToRealTimeUpdate();
 
@@ -95,6 +90,5 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead
 
   return {
     executeCollaborativeAction,
-    EVENT_ACTION_DETAILS_MAP: actionHandlerMap,
   };
 };

web/core/local-db/utils/load-workspace.ts

@@ -150,7 +150,7 @@ export const syncIssuesWithDeletedModules = async (deletedModuleIds: string[]) =
     return;
   }
 
-  const issues = await persistence.getIssues("", "", { modules: deletedModuleIds.join(","), cursor: "10000:0:0" }, {});
+  const issues = await persistence.getIssues("", "", { module: deletedModuleIds.join(","), cursor: "10000:0:0" }, {});
   if (issues?.results && Array.isArray(issues.results)) {
     const promises = issues.results.map(async (issue: TIssue) => {
       const updatedIssue = {
@@ -177,7 +177,7 @@ export const syncIssuesWithDeletedCycles = async (deletedCycleIds: string[]) =>
     return;
   }
 
-  const issues = await persistence.getIssues("", "", { cycles: deletedCycleIds.join(","), cursor: "10000:0:0" }, {});
+  const issues = await persistence.getIssues("", "", { cycle: deletedCycleIds.join(","), cursor: "10000:0:0" }, {});
   if (issues?.results && Array.isArray(issues.results)) {
     const promises = issues.results.map(async (issue: TIssue) => {
       const updatedIssue = {
@@ -204,7 +204,7 @@ export const syncIssuesWithDeletedStates = async (deletedStateIds: string[]) =>
     return;
   }
 
-  const issues = await persistence.getIssues("", "", { states: deletedStateIds.join(","), cursor: "10000:0:0" }, {});
+  const issues = await persistence.getIssues("", "", { state: deletedStateIds.join(","), cursor: "10000:0:0" }, {});
   if (issues?.results && Array.isArray(issues.results)) {
     const promises = issues.results.map(async (issue: TIssue) => {
       const updatedIssue = {

web/core/store/notifications/workspace-notifications.store.ts

@@ -50,7 +50,7 @@ export interface IWorkspaceNotificationStore {
   // actions
   setCurrentNotificationTab: (tab: TNotificationTab) => void;
   setCurrentSelectedNotificationId: (notificationId: string | undefined) => void;
-  setUnreadNotificationsCount: (type: "increment" | "decrement") => void;
+  setUnreadNotificationsCount: (type: "increment" | "decrement", newCount?: number) => void;
   getUnreadNotificationsCount: (workspaceSlug: string) => Promise<TUnreadNotificationsCount | undefined>;
   getNotifications: (
     workspaceSlug: string,
@@ -285,16 +285,22 @@ export class WorkspaceNotificationStore implements IWorkspaceNotificationStore {
    * @param { "increment" | "decrement" } type
    * @returns { void }
    */
-  setUnreadNotificationsCount = (type: "increment" | "decrement"): void => {
+  setUnreadNotificationsCount = (type: "increment" | "decrement", newCount: number = 1): void => {
+    const validCount = Math.max(0, Math.abs(newCount));
+
     switch (this.currentNotificationTab) {
       case ENotificationTab.ALL:
-        update(this.unreadNotificationsCount, "total_unread_notifications_count", (count: 0) =>
-          type === "increment" ? count + 1 : count - 1
+        update(
+          this.unreadNotificationsCount,
+          "total_unread_notifications_count",
+          (count: number) => +Math.max(0, type === "increment" ? count + validCount : count - validCount)
         );
         break;
       case ENotificationTab.MENTIONS:
-        update(this.unreadNotificationsCount, "mention_unread_notifications_count", (count: 0) =>
-          type === "increment" ? count + 1 : count - 1
+        update(
+          this.unreadNotificationsCount,
+          "mention_unread_notifications_count",
+          (count: number) => +Math.max(0, type === "increment" ? count + validCount : count - validCount)
         );
         break;
       default: