Merge pull request #318 from makeplane/preview

release: v0.20.7

.github/workflows/build-aio-base.yml

@@ -0,0 +1,91 @@
+name: Build AIO Base Image
+
+on:
+  workflow_dispatch:
+
+env:
+  TARGET_BRANCH: ${{ github.ref_name }}
+
+jobs:
+  base_build_setup:
+    name: Build Preparation
+    runs-on: ubuntu-latest
+    outputs:
+      gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
+      gh_buildx_driver: ${{ steps.set_env_variables.outputs.BUILDX_DRIVER }}
+      gh_buildx_version: ${{ steps.set_env_variables.outputs.BUILDX_VERSION }}
+      gh_buildx_platforms: ${{ steps.set_env_variables.outputs.BUILDX_PLATFORMS }}
+      gh_buildx_endpoint: ${{ steps.set_env_variables.outputs.BUILDX_ENDPOINT }}
+      build_base: ${{ steps.changed_files.outputs.base_any_changed }}
+
+    steps:
+      - id: set_env_variables
+        name: Set Environment Variables
+        run: |
+          echo "BUILDX_DRIVER=cloud" >> $GITHUB_OUTPUT
+          echo "BUILDX_VERSION=lab:latest" >> $GITHUB_OUTPUT
+          echo "BUILDX_PLATFORMS=linux/amd64,linux/arm64" >> $GITHUB_OUTPUT
+          echo "BUILDX_ENDPOINT=makeplane/plane-dev" >> $GITHUB_OUTPUT
+          echo "TARGET_BRANCH=${{ env.TARGET_BRANCH }}" >> $GITHUB_OUTPUT
+
+      - id: checkout_files
+        name: Checkout Files
+        uses: actions/checkout@v4
+
+      - name: Get changed files
+        id: changed_files
+        uses: tj-actions/changed-files@v42
+        with:
+          files_yaml: |
+            base: 
+              - aio/Dockerfile.base
+
+  base_build_push:
+    if: ${{ needs.base_build_setup.outputs.build_base == 'true' || github.event_name == 'workflow_dispatch' || needs.base_build_setup.outputs.gh_branch_name == 'master' }}
+    runs-on: ubuntu-latest
+    needs: [base_build_setup]
+    env:
+      BASE_IMG_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-aio-base:${{ needs.base_build_setup.outputs.gh_branch_name }}
+      TARGET_BRANCH: ${{ needs.base_build_setup.outputs.gh_branch_name }}
+      BUILDX_DRIVER: ${{ needs.base_build_setup.outputs.gh_buildx_driver }}
+      BUILDX_VERSION: ${{ needs.base_build_setup.outputs.gh_buildx_version }}
+      BUILDX_PLATFORMS: ${{ needs.base_build_setup.outputs.gh_buildx_platforms }}
+      BUILDX_ENDPOINT: ${{ needs.base_build_setup.outputs.gh_buildx_endpoint }}
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Set Docker Tag
+        run: |
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-aio-base:latest
+          else
+            TAG=${{ env.BASE_IMG_TAG }}
+          fi
+          echo "BASE_IMG_TAG=${TAG}" >> $GITHUB_ENV
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: ${{ env.BUILDX_DRIVER }}
+          version: ${{ env.BUILDX_VERSION }}
+          endpoint: ${{ env.BUILDX_ENDPOINT }}
+
+      - name: Build and Push to Docker Hub
+        uses: docker/build-push-action@v5.1.0
+        with:
+          context: ./aio
+          file: ./aio/Dockerfile.base
+          platforms: ${{ env.BUILDX_PLATFORMS }}
+          tags: ${{ env.BASE_IMG_TAG }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

Dockerfile

@@ -1,124 +0,0 @@
-FROM node:18-alpine AS builder
-RUN apk add --no-cache libc6-compat
-# Set working directory
-WORKDIR /app
-ENV NEXT_PUBLIC_API_BASE_URL=http://NEXT_PUBLIC_API_BASE_URL_PLACEHOLDER
-
-RUN yarn global add turbo
-RUN apk add tree
-COPY . .
-
-RUN turbo prune --scope=app --scope=plane-deploy --docker
-CMD tree -I node_modules/
-
-# Add lockfile and package.json's of isolated subworkspace
-FROM node:18-alpine AS installer
-
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
-ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
-# First install the dependencies (as they change less often)
-COPY .gitignore .gitignore
-COPY --from=builder /app/out/json/ .
-COPY --from=builder /app/out/yarn.lock ./yarn.lock
-RUN yarn install
-
-# # Build the project
-COPY --from=builder /app/out/full/ .
-COPY turbo.json turbo.json
-COPY replace-env-vars.sh /usr/local/bin/
-
-RUN chmod +x /usr/local/bin/replace-env-vars.sh
-
-RUN yarn turbo run build
-
-ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
-    BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
-
-RUN /usr/local/bin/replace-env-vars.sh http://NEXT_PUBLIC_WEBAPP_URL_PLACEHOLDER ${NEXT_PUBLIC_API_BASE_URL}
-
-FROM python:3.11.1-alpine3.17 AS backend
-
-# set environment variables
-ENV PYTHONDONTWRITEBYTECODE 1
-ENV PYTHONUNBUFFERED 1
-ENV PIP_DISABLE_PIP_VERSION_CHECK=1 
-
-WORKDIR /code
-
-RUN apk --no-cache add \
-    "libpq~=15" \
-    "libxslt~=1.1" \
-    "nodejs-current~=19" \
-    "xmlsec~=1.2" \
-    "nginx" \
-    "nodejs" \
-    "npm" \
-    "supervisor"
-
-COPY apiserver/requirements.txt ./
-COPY apiserver/requirements ./requirements
-RUN apk add --no-cache libffi-dev
-RUN apk add --no-cache --virtual .build-deps \
-    "bash~=5.2" \
-    "g++~=12.2" \
-    "gcc~=12.2" \
-    "cargo~=1.64" \
-    "git~=2" \
-    "make~=4.3" \
-    "postgresql13-dev~=13" \
-    "libc-dev" \
-    "linux-headers" \
-    && \
-    pip install -r requirements.txt --compile --no-cache-dir \
-    && \
-    apk del .build-deps
-
-# Add in Django deps and generate Django's static files
-COPY apiserver/manage.py manage.py
-COPY apiserver/plane plane/
-COPY apiserver/templates templates/
-
-RUN apk --no-cache add "bash~=5.2"
-COPY apiserver/bin ./bin/
-
-RUN chmod +x ./bin/*
-RUN chmod -R 777 /code
-
-# Expose container port and run entry point script
-
-WORKDIR /app
-
-COPY --from=installer /app/apps/app/next.config.js .
-COPY --from=installer /app/apps/app/package.json .
-COPY --from=installer /app/apps/space/next.config.js .
-COPY --from=installer /app/apps/space/package.json .
-
-COPY --from=installer /app/apps/app/.next/standalone ./
-
-COPY --from=installer /app/apps/app/.next/static ./apps/app/.next/static
-
-COPY --from=installer /app/apps/space/.next/standalone ./
-COPY --from=installer /app/apps/space/.next ./apps/space/.next
-
-ENV NEXT_TELEMETRY_DISABLED 1
-
-# RUN rm /etc/nginx/conf.d/default.conf
-#######################################################################
-COPY nginx/nginx-single-docker-image.conf /etc/nginx/http.d/default.conf
-#######################################################################
-
-COPY nginx/supervisor.conf /code/supervisor.conf
-
-ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
-ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
-    BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
-
-COPY replace-env-vars.sh /usr/local/bin/
-COPY start.sh /usr/local/bin/
-RUN chmod +x /usr/local/bin/replace-env-vars.sh
-RUN chmod +x /usr/local/bin/start.sh
-
-EXPOSE 80
-
-CMD ["supervisord","-c","/code/supervisor.conf"]

aio/Dockerfile

@@ -0,0 +1,149 @@
+# *****************************************************************************
+# STAGE 1: Build the project
+# *****************************************************************************
+FROM node:18-alpine AS builder
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+ENV NEXT_PUBLIC_API_BASE_URL=http://NEXT_PUBLIC_API_BASE_URL_PLACEHOLDER
+
+RUN yarn global add turbo
+COPY . .
+
+RUN turbo prune --scope=web --scope=space --scope=admin --docker
+
+# *****************************************************************************
+# STAGE 2: Install dependencies & build the project
+# *****************************************************************************
+# Add lockfile and package.json's of isolated subworkspace
+FROM node:18-alpine AS installer
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# First install the dependencies (as they change less often)
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/yarn.lock ./yarn.lock
+RUN yarn install
+
+# # Build the project
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+
+ARG NEXT_PUBLIC_API_BASE_URL=""
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
+ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
+
+ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
+
+ARG NEXT_PUBLIC_SPACE_BASE_URL=""
+ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
+
+ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
+ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
+
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV TURBO_TELEMETRY_DISABLED 1
+
+RUN yarn turbo run build
+
+# *****************************************************************************
+# STAGE 3: Copy the project and start it
+# *****************************************************************************
+# FROM makeplane/plane-aio-base AS runner
+FROM makeplane/plane-aio-base:develop AS runner
+
+WORKDIR /app
+
+SHELL [ "/bin/bash", "-c" ]
+
+# PYTHON APPLICATION SETUP
+
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+ENV PIP_DISABLE_PIP_VERSION_CHECK=1 
+
+COPY apiserver/requirements.txt ./api/
+COPY apiserver/requirements ./api/requirements
+
+RUN python3.12 -m venv /app/venv && \
+    source /app/venv/bin/activate && \
+    /app/venv/bin/pip install --upgrade pip && \
+    /app/venv/bin/pip install -r ./api/requirements.txt --compile --no-cache-dir
+
+# Add in Django deps and generate Django's static files
+COPY apiserver/manage.py ./api/manage.py
+COPY apiserver/plane ./api/plane/
+COPY apiserver/templates ./api/templates/
+COPY package.json ./api/package.json
+
+COPY apiserver/bin ./api/bin/
+
+RUN chmod +x ./api/bin/*
+RUN chmod -R 777 ./api/
+
+# NEXTJS BUILDS
+
+COPY --from=installer /app/web/next.config.js ./web/
+COPY --from=installer /app/web/package.json ./web/
+COPY --from=installer /app/web/.next/standalone ./web
+COPY --from=installer /app/web/.next/static ./web/web/.next/static
+COPY --from=installer /app/web/public ./web/web/public
+
+COPY --from=installer /app/space/next.config.js ./space/
+COPY --from=installer /app/space/package.json ./space/
+COPY --from=installer /app/space/.next/standalone ./space
+COPY --from=installer /app/space/.next/static ./space/space/.next/static
+COPY --from=installer /app/space/public ./space/space/public
+
+COPY --from=installer /app/admin/next.config.js ./admin/
+COPY --from=installer /app/admin/package.json ./admin/
+COPY --from=installer /app/admin/.next/standalone ./admin
+COPY --from=installer /app/admin/.next/static ./admin/admin/.next/static
+COPY --from=installer /app/admin/public ./admin/admin/public
+
+ARG NEXT_PUBLIC_API_BASE_URL=""
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
+ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
+
+ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
+
+ARG NEXT_PUBLIC_SPACE_BASE_URL=""
+ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
+
+ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
+ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
+
+ARG NEXT_PUBLIC_WEB_BASE_URL=""
+ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV TURBO_TELEMETRY_DISABLED 1
+
+COPY aio/supervisord.conf /app/supervisord.conf
+
+COPY aio/aio.sh /app/aio.sh
+RUN chmod +x /app/aio.sh
+
+COPY aio/pg-setup.sh /app/pg-setup.sh
+RUN chmod +x /app/pg-setup.sh 
+
+COPY deploy/selfhost/variables.env /app/plane.env
+
+# NGINX Conf Copy
+COPY ./aio/nginx.conf.aio /etc/nginx/nginx.conf.template
+COPY ./nginx/env.sh /app/nginx-start.sh
+RUN chmod +x /app/nginx-start.sh
+
+RUN  ./pg-setup.sh
+
+VOLUME [ "/app/data/minio/uploads", "/var/lib/postgresql/data" ]
+
+CMD ["/usr/bin/supervisord", "-c", "/app/supervisord.conf"]

aio/Dockerfile.base

@@ -0,0 +1,92 @@
+FROM --platform=$BUILDPLATFORM tonistiigi/binfmt as binfmt
+
+FROM debian:12-slim
+
+# Set environment variables to non-interactive for apt
+ENV DEBIAN_FRONTEND=noninteractive
+
+SHELL [ "/bin/bash", "-c" ]
+
+# Update the package list and install prerequisites
+RUN apt-get update && \
+    apt-get install -y \
+    gnupg2 curl ca-certificates lsb-release software-properties-common \
+    build-essential libssl-dev zlib1g-dev libbz2-dev libreadline-dev \
+    libsqlite3-dev wget llvm libncurses5-dev libncursesw5-dev xz-utils \
+    tk-dev libffi-dev liblzma-dev supervisor nginx nano vim ncdu
+
+# Install Redis 7.2
+RUN echo "deb http://deb.debian.org/debian $(lsb_release -cs)-backports main" > /etc/apt/sources.list.d/backports.list && \
+    curl -fsSL https://packages.redis.io/gpg | gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg && \
+    echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" > /etc/apt/sources.list.d/redis.list && \
+    apt-get update && \
+    apt-get install -y redis-server
+
+# Install PostgreSQL 15
+ENV POSTGRES_VERSION 15
+RUN curl -fsSL https://www.postgresql.org/media/keys/ACCC4CF8.asc | gpg --dearmor -o /usr/share/keyrings/pgdg-archive-keyring.gpg && \
+    echo "deb [signed-by=/usr/share/keyrings/pgdg-archive-keyring.gpg] http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list && \
+    apt-get update && \
+    apt-get install -y postgresql-$POSTGRES_VERSION postgresql-client-$POSTGRES_VERSION && \
+    mkdir -p /var/lib/postgresql/data && \
+    chown -R postgres:postgres /var/lib/postgresql
+
+# Install MinIO
+ARG TARGETARCH
+RUN if [ "$TARGETARCH" = "amd64" ]; then \
+        curl -fSl https://dl.min.io/server/minio/release/linux-amd64/minio -o /usr/local/bin/minio; \
+    elif [ "$TARGETARCH" = "arm64" ]; then \
+        curl -fSl https://dl.min.io/server/minio/release/linux-arm64/minio -o /usr/local/bin/minio; \
+    else \
+        echo "Unsupported architecture: $TARGETARCH"; exit 1; \
+    fi && \
+    chmod +x /usr/local/bin/minio
+
+
+# Install Node.js 18
+RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \
+    apt-get install -y nodejs
+
+# Install Python 3.12 from source
+RUN cd /usr/src && \
+    wget https://www.python.org/ftp/python/3.12.0/Python-3.12.0.tgz && \
+    tar xzf Python-3.12.0.tgz && \
+    cd Python-3.12.0 && \
+    ./configure --enable-optimizations && \
+    make altinstall && \
+    rm -f /usr/src/Python-3.12.0.tgz
+
+RUN python3.12 -m pip install --upgrade pip
+
+RUN echo "alias python=/usr/local/bin/python3.12" >> ~/.bashrc && \
+    echo "alias pip=/usr/local/bin/pip3.12" >> ~/.bashrc
+    
+# Clean up
+RUN apt-get clean && \
+    rm -rf /var/lib/apt/lists/* /usr/src/Python-3.12.0
+    
+WORKDIR /app
+
+RUN mkdir -p /app/{data,logs} && \
+    mkdir -p /app/data/{redis,pg,minio,nginx} && \
+    mkdir -p /app/logs/{access,error} && \
+    mkdir -p /etc/supervisor/conf.d
+
+# Create Supervisor configuration file
+COPY supervisord.base /app/supervisord.conf
+
+RUN apt-get update && \
+    apt-get install -y sudo lsof net-tools libpq-dev procps gettext && \
+    apt-get clean
+
+RUN sudo -u postgres /usr/lib/postgresql/$POSTGRES_VERSION/bin/initdb -D /var/lib/postgresql/data
+COPY postgresql.conf /etc/postgresql/postgresql.conf
+
+RUN echo "alias python=/usr/local/bin/python3.12" >> ~/.bashrc && \
+    echo "alias pip=/usr/local/bin/pip3.12" >> ~/.bashrc
+
+# Expose ports for Redis, PostgreSQL, and MinIO
+EXPOSE 6379 5432 9000 80
+
+# Start Supervisor
+CMD ["/usr/bin/supervisord", "-c", "/app/supervisord.conf"]

aio/aio.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+set -e
+
+
+if [ "$1" = 'api' ]; then
+    source /app/venv/bin/activate
+    cd /app/api
+    exec ./bin/docker-entrypoint-api.sh
+elif [ "$1" = 'worker' ]; then
+    source /app/venv/bin/activate
+    cd /app/api
+    exec ./bin/docker-entrypoint-worker.sh
+elif [ "$1" = 'beat' ]; then
+    source /app/venv/bin/activate
+    cd /app/api
+    exec ./bin/docker-entrypoint-beat.sh
+elif [ "$1" = 'migrator' ]; then
+    source /app/venv/bin/activate
+    cd /app/api
+    exec ./bin/docker-entrypoint-migrator.sh
+elif [ "$1" = 'web' ]; then
+    node /app/web/web/server.js
+elif [ "$1" = 'space' ]; then
+    node /app/space/space/server.js
+elif [ "$1" = 'admin' ]; then
+    node /app/admin/admin/server.js
+else
+    echo "Command not found"
+    exit 1
+fi

aio/nginx.conf.aio

@@ -0,0 +1,73 @@
+events {
+}
+
+http {
+    sendfile on;
+
+    server {
+        listen 80;
+        root /www/data/;
+        access_log /var/log/nginx/access.log;
+
+        client_max_body_size ${FILE_SIZE_LIMIT};
+
+        add_header X-Content-Type-Options    "nosniff" always;
+        add_header Referrer-Policy           "no-referrer-when-downgrade" always;
+        add_header Permissions-Policy        "interest-cohort=()" always;
+        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+        add_header X-Forwarded-Proto         "${dollar}scheme";
+        add_header X-Forwarded-Host          "${dollar}host";
+        add_header X-Forwarded-For           "${dollar}proxy_add_x_forwarded_for";
+        add_header X-Real-IP                 "${dollar}remote_addr";
+
+        location / {
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade ${dollar}http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host ${dollar}http_host;
+            proxy_pass http://localhost:3001/;
+        }
+
+        location /spaces/ {
+            rewrite ^/spaces/?$ /spaces/login break;            
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade ${dollar}http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host ${dollar}http_host;
+            proxy_pass http://localhost:3002/spaces/;
+        }
+
+
+        location /god-mode/ {
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade ${dollar}http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host ${dollar}http_host;
+            proxy_pass http://localhost:3003/god-mode/;
+        }
+
+        location /api/ {
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade ${dollar}http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host ${dollar}http_host;
+            proxy_pass http://localhost:8000/api/;
+        }
+
+        location /auth/ {
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade ${dollar}http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host ${dollar}http_host;
+            proxy_pass http://localhost:8000/auth/;
+        }
+
+        location /${BUCKET_NAME}/ {
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade ${dollar}http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host ${dollar}http_host;
+            proxy_pass http://localhost:9000/uploads/;
+        }
+    }
+}

aio/pg-setup.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+
+# Variables
+set -o allexport
+source plane.env set
+set +o allexport
+
+export PGHOST=localhost
+
+sudo -u postgres "/usr/lib/postgresql/${POSTGRES_VERSION}/bin/pg_ctl" -D /var/lib/postgresql/data start
+sudo -u postgres "/usr/lib/postgresql/${POSTGRES_VERSION}/bin/psql" --command "CREATE USER $POSTGRES_USER WITH SUPERUSER PASSWORD '$POSTGRES_PASSWORD';" && \
+sudo -u postgres "/usr/lib/postgresql/${POSTGRES_VERSION}/bin/createdb" -O "$POSTGRES_USER" "$POSTGRES_DB" && \
+sudo -u postgres "/usr/lib/postgresql/${POSTGRES_VERSION}/bin/pg_ctl" -D /var/lib/postgresql/data stop

aio/postgresql.conf

@@ -0,0 +1,12 @@
+# PostgreSQL configuration file
+
+# Allow connections from any IP address
+listen_addresses = '*'
+
+# Set the maximum number of connections
+max_connections = 100
+
+# Set the shared buffers size
+shared_buffers = 128MB
+
+# Other custom configurations can be added here

aio/supervisord.base

@@ -0,0 +1,37 @@
+[supervisord]
+user=root
+nodaemon=true
+stderr_logfile=/app/logs/error/supervisor.err.log
+stdout_logfile=/app/logs/access/supervisor.out.log
+
+[program:redis]
+directory=/app/data/redis
+command=redis-server
+autostart=true
+autorestart=true
+stderr_logfile=/app/logs/error/redis.err.log
+stdout_logfile=/app/logs/access/redis.out.log
+
+[program:postgresql]
+user=postgres
+command=/usr/lib/postgresql/15/bin/postgres --config-file=/etc/postgresql/15/main/postgresql.conf
+autostart=true
+autorestart=true
+stderr_logfile=/app/logs/error/postgresql.err.log
+stdout_logfile=/app/logs/access/postgresql.out.log
+
+[program:minio]
+directory=/app/data/minio
+command=minio server /app/data/minio
+autostart=true
+autorestart=true
+stderr_logfile=/app/logs/error/minio.err.log
+stdout_logfile=/app/logs/access/minio.out.log
+
+[program:nginx]
+directory=/app/data/nginx
+command=/usr/sbin/nginx -g 'daemon off;'
+autostart=true
+autorestart=true
+stderr_logfile=/app/logs/error/nginx.err.log
+stdout_logfile=/app/logs/access/nginx.out.log

aio/supervisord.conf

@@ -0,0 +1,115 @@
+[supervisord]
+user=root
+nodaemon=true
+priority=1
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stdout
+stderr_logfile_maxbytes=0
+
+[program:redis]
+directory=/app/data/redis
+command=redis-server
+autostart=true
+autorestart=true
+priority=1
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stdout
+stderr_logfile_maxbytes=0
+
+[program:postgresql]
+user=postgres
+command=/usr/lib/postgresql/15/bin/postgres -D /var/lib/postgresql/data --config-file=/etc/postgresql/postgresql.conf
+autostart=true
+autorestart=true
+priority=1
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stdout
+stderr_logfile_maxbytes=0
+
+[program:minio]
+directory=/app/data/minio
+command=minio server /app/data/minio
+autostart=true
+autorestart=true
+priority=1
+stdout_logfile=/app/logs/access/minio.log
+stderr_logfile=/app/logs/error/minio.err.log
+
+[program:nginx]
+command=/app/nginx-start.sh
+autostart=true
+autorestart=true
+priority=1
+stdout_logfile=/app/logs/access/nginx.log
+stderr_logfile=/app/logs/error/nginx.err.log
+
+
+[program:web]
+command=/app/aio.sh web
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stdout
+stderr_logfile_maxbytes=0
+environment=PORT=3001,HOSTNAME=0.0.0.0
+
+[program:space]
+command=/app/aio.sh space
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stdout
+stderr_logfile_maxbytes=0
+environment=PORT=3002,HOSTNAME=0.0.0.0
+
+[program:admin]
+command=/app/aio.sh admin
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stdout
+stderr_logfile_maxbytes=0
+environment=PORT=3003,HOSTNAME=0.0.0.0
+
+[program:migrator]
+command=/app/aio.sh migrator
+autostart=true
+autorestart=false
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stdout
+stderr_logfile_maxbytes=0
+
+[program:api]
+command=/app/aio.sh api
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stdout
+stderr_logfile_maxbytes=0
+
+[program:worker]
+command=/app/aio.sh worker
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stdout
+stderr_logfile_maxbytes=0
+
+[program:beat]
+command=/app/aio.sh beat
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stdout
+stderr_logfile_maxbytes=0
+

apiserver/plane/app/serializers/page.py

@@ -106,7 +106,9 @@ class PageDetailSerializer(PageSerializer):
     description_html = serializers.CharField()
 
     class Meta(PageSerializer.Meta):
-        fields = PageSerializer.Meta.fields + ["description_html"]
+        fields = PageSerializer.Meta.fields + [
+            "description_html",
+        ]
 
 
 class SubPageSerializer(BaseSerializer):

apiserver/plane/app/urls/page.py

@@ -6,6 +6,7 @@ from plane.app.views import (
     PageFavoriteViewSet,
     PageLogEndpoint,
     SubPagesEndpoint,
+    PagesDescriptionViewSet,
 )
 
 
@@ -79,4 +80,14 @@ urlpatterns = [
         SubPagesEndpoint.as_view(),
         name="sub-page",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:pk>/description/",
+        PagesDescriptionViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+            }
+        ),
+        name="page-description",
+    ),
 ]

apiserver/plane/app/views/__init__.py

@@ -178,6 +178,7 @@ from .page.base import (
     PageFavoriteViewSet,
     PageLogEndpoint,
     SubPagesEndpoint,
+    PagesDescriptionViewSet,
 )
 
 from .search import GlobalSearchEndpoint, IssueSearchEndpoint, SearchEndpoint

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

@@ -1,5 +1,6 @@
 # Python imports
 import json
+import base64
 from datetime import datetime
 from django.core.serializers.json import DjangoJSONEncoder
 
@@ -8,6 +9,7 @@ from django.db import connection
 from django.db.models import Exists, OuterRef, Q
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
+from django.http import StreamingHttpResponse
 
 # Third party imports
 from rest_framework import status
@@ -388,3 +390,48 @@ class SubPagesEndpoint(BaseAPIView):
         return Response(
             SubPageSerializer(pages, many=True).data, status=status.HTTP_200_OK
         )
+
+
+class PagesDescriptionViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def retrieve(self, request, slug, project_id, pk):
+        page = Page.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
+        )
+        binary_data = page.description_binary
+
+        def stream_data():
+            if binary_data:
+                yield binary_data
+            else:
+                yield b""
+
+        response = StreamingHttpResponse(
+            stream_data(), content_type="application/octet-stream"
+        )
+        response["Content-Disposition"] = (
+            'attachment; filename="page_description.bin"'
+        )
+        return response
+
+    def partial_update(self, request, slug, project_id, pk):
+        page = Page.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
+        )
+
+        base64_data = request.data.get("description_binary")
+
+        if base64_data:
+            # Decode the base64 data to bytes
+            new_binary_data = base64.b64decode(base64_data)
+
+            # Store the updated binary data
+            page.description_binary = new_binary_data
+            page.description_html = request.data.get("description_html")
+            page.save()
+            return Response({"message": "Updated successfully"})
+        else:
+            return Response({"error": "No binary data provided"})

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

@@ -1,5 +1,5 @@
 # Python imports
-# import uuid
+import uuid
 
 # Django imports
 from django.db.models import Case, Count, IntegerField, Q, When
@@ -183,8 +183,8 @@ class UserEndpoint(BaseViewSet):
         profile.save()
 
         # Reset password
-        # user.is_password_autoset = True
-        # user.set_password(uuid.uuid4().hex)
+        user.is_password_autoset = True
+        user.set_password(uuid.uuid4().hex)
 
         # Deactivate the user
         user.is_active = False

apiserver/plane/authentication/adapter/oauth.py

@@ -8,6 +8,10 @@ from django.utils import timezone
 from plane.db.models import Account
 
 from .base import Adapter
+from plane.authentication.adapter.error import (
+    AuthenticationException,
+    AUTHENTICATION_ERROR_CODES,
+)
 
 
 class OauthAdapter(Adapter):
@@ -50,20 +54,42 @@ class OauthAdapter(Adapter):
         return self.complete_login_or_signup()
 
     def get_user_token(self, data, headers=None):
-        headers = headers or {}
-        response = requests.post(
-            self.get_token_url(), data=data, headers=headers
-        )
-        response.raise_for_status()
-        return response.json()
+        try:
+            headers = headers or {}
+            response = requests.post(
+                self.get_token_url(), data=data, headers=headers
+            )
+            response.raise_for_status()
+            return response.json()
+        except requests.RequestException:
+            code = (
+                "GOOGLE_OAUTH_PROVIDER_ERROR"
+                if self.provider == "google"
+                else "GITHUB_OAUTH_PROVIDER_ERROR"
+            )
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[code],
+                error_message=str(code),
+            )
 
     def get_user_response(self):
-        headers = {
-            "Authorization": f"Bearer {self.token_data.get('access_token')}"
-        }
-        response = requests.get(self.get_user_info_url(), headers=headers)
-        response.raise_for_status()
-        return response.json()
+        try:
+            headers = {
+                "Authorization": f"Bearer {self.token_data.get('access_token')}"
+            }
+            response = requests.get(self.get_user_info_url(), headers=headers)
+            response.raise_for_status()
+            return response.json()
+        except requests.RequestException:
+            code = (
+                "GOOGLE_OAUTH_PROVIDER_ERROR"
+                if self.provider == "google"
+                else "GITHUB_OAUTH_PROVIDER_ERROR"
+            )
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[code],
+                error_message=str(code),
+            )
 
     def set_user_data(self, data):
         self.user_data = data

apiserver/plane/authentication/provider/oauth/github.py

@@ -105,14 +105,26 @@ class GitHubOAuthProvider(OauthAdapter):
         )
 
     def __get_email(self, headers):
-        # Github does not provide email in user response
-        emails_url = "https://api.github.com/user/emails"
-        emails_response = requests.get(emails_url, headers=headers).json()
-        email = next(
-            (email["email"] for email in emails_response if email["primary"]),
-            None,
-        )
-        return email
+        try:
+            # Github does not provide email in user response
+            emails_url = "https://api.github.com/user/emails"
+            emails_response = requests.get(emails_url, headers=headers).json()
+            email = next(
+                (
+                    email["email"]
+                    for email in emails_response
+                    if email["primary"]
+                ),
+                None,
+            )
+            return email
+        except requests.RequestException:
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[
+                    "GITHUB_OAUTH_PROVIDER_ERROR"
+                ],
+                error_message="GITHUB_OAUTH_PROVIDER_ERROR",
+            )
 
     def set_user_data(self):
         user_info_response = self.get_user_response()

apiserver/plane/db/management/commands/activate_user.py

@@ -0,0 +1,34 @@
+# Django imports
+from django.core.management import BaseCommand, CommandError
+
+# Module imports
+from plane.db.models import User
+
+
+class Command(BaseCommand):
+    help = "Make the user with the given email active"
+
+    def add_arguments(self, parser):
+        # Positional argument
+        parser.add_argument("email", type=str, help="user email")
+
+    def handle(self, *args, **options):
+        # get the user email from console
+        email = options.get("email", False)
+
+        # raise error if email is not present
+        if not email:
+            raise CommandError("Error: Email is required")
+
+        # filter the user
+        user = User.objects.filter(email=email).first()
+
+        # Raise error if the user is not present
+        if not user:
+            raise CommandError(f"Error: User with {email} does not exists")
+
+        # Activate the user
+        user.is_active = True
+        user.save()
+
+        self.stdout.write(self.style.SUCCESS("User activated succesfully"))

apiserver/plane/db/management/commands/license_check.py

@@ -18,6 +18,7 @@ class Command(BaseCommand):
             license_key = os.environ.get("LICENSE_KEY", False)
             deploy_platform = os.environ.get("DEPLOY_PLATFORM", False)
             domain = os.environ.get("LICENSE_DOMAIN", False)
+            license_version = os.environ.get("LICENSE_VERSION", False)
 
             # If any of the above is not provided raise a command error
             if not prime_host or not machine_signature or not license_key:
@@ -53,11 +54,14 @@ class Command(BaseCommand):
                         json={
                             "machine_signature": str(machine_signature),
                             "domain": domain,
+                            "version": license_version,
                         },
                     )
+                    response.raise_for_status()
                     self.stdout.write(
                         self.style.SUCCESS("Instance created successfully")
                     )
+
                     return
                 else:
                     raise CommandError("Instance does not exist")

apiserver/plane/db/models/page.py

@@ -18,6 +18,7 @@ def get_view_props():
 class Page(ProjectBaseModel):
     name = models.CharField(max_length=255, blank=True)
     description = models.JSONField(default=dict, blank=True)
+    description_binary = models.BinaryField(null=True)
     description_html = models.TextField(blank=True, default="<p></p>")
     description_stripped = models.TextField(blank=True, null=True)
     owned_by = models.ForeignKey(
@@ -43,7 +44,6 @@ class Page(ProjectBaseModel):
     is_locked = models.BooleanField(default=False)
     view_props = models.JSONField(default=get_view_props)
     logo_props = models.JSONField(default=dict)
-    description_binary = models.BinaryField(null=True)
 
     class Meta:
         verbose_name = "Page"

nginx/supervisor.conf

@@ -1,32 +0,0 @@
-[supervisord] ## This is the main process for the Supervisor
-nodaemon=true
-
-[program:node]
-command=sh /usr/local/bin/start.sh
-autostart=true
-autorestart=true
-stderr_logfile=/var/log/node.err.log
-stdout_logfile=/var/log/node.out.log
-
-[program:python]
-directory=/code
-command=sh bin/docker-entrypoint-api.sh
-autostart=true
-autorestart=true
-stderr_logfile=/var/log/python.err.log
-stdout_logfile=/var/log/python.out.log
-
-[program:nginx]
-command=nginx -g "daemon off;"
-autostart=true
-autorestart=true
-stderr_logfile=/var/log/nginx.err.log
-stdout_logfile=/var/log/nginx.out.log
-
-[program:worker]
-directory=/code
-command=sh bin/worker
-autostart=true
-autorestart=true
-stderr_logfile=/var/log/worker.err.log
-stdout_logfile=/var/log/worker.out.log

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

@@ -13,17 +13,21 @@ import { EditorMenuItemNames, getEditorMenuItems } from "src/ui/menus/menu-items
 import { EditorRefApi } from "src/types/editor-ref-api";
 import { IMarking, scrollSummary } from "src/helpers/scroll-to-node";
 
-interface CustomEditorProps {
+export type TFileHandler = {
+  cancel: () => void;
+  delete: DeleteImage;
+  upload: UploadImage;
+  restore: RestoreImage;
+};
+
+export interface CustomEditorProps {
   id?: string;
-  uploadFile: UploadImage;
-  restoreFile: RestoreImage;
-  deleteFile: DeleteImage;
-  cancelUploadImage?: () => void;
-  initialValue: string;
+  fileHandler: TFileHandler;
+  initialValue?: string;
   editorClassName: string;
   // undefined when prop is not passed, null if intentionally passed to stop
   // swr syncing
-  value: string | null | undefined;
+  value?: string | null | undefined;
   onChange?: (json: object, html: string) => void;
   extensions?: any;
   editorProps?: EditorProps;
@@ -38,19 +42,16 @@ interface CustomEditorProps {
 }
 
 export const useEditor = ({
-  uploadFile,
   id = "",
-  deleteFile,
-  cancelUploadImage,
   editorProps = {},
   initialValue,
   editorClassName,
   value,
   extensions = [],
+  fileHandler,
   onChange,
   forwardedRef,
   tabIndex,
-  restoreFile,
   handleEditorReady,
   mentionHandler,
   placeholder,
@@ -67,10 +68,10 @@ export const useEditor = ({
           mentionHighlights: mentionHandler.highlights ?? [],
         },
         fileConfig: {
-          deleteFile,
-          restoreFile,
-          cancelUploadImage,
-          uploadFile,
+          uploadFile: fileHandler.upload,
+          deleteFile: fileHandler.delete,
+          restoreFile: fileHandler.restore,
+          cancelUploadImage: fileHandler.cancel,
         },
         placeholder,
         tabIndex,
@@ -139,7 +140,7 @@ export const useEditor = ({
         }
       },
       executeMenuItemCommand: (itemName: EditorMenuItemNames) => {
-        const editorItems = getEditorMenuItems(editorRef.current, uploadFile);
+        const editorItems = getEditorMenuItems(editorRef.current, fileHandler.upload);
 
         const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.key === itemName);
 
@@ -155,7 +156,7 @@ export const useEditor = ({
         }
       },
       isMenuItemActive: (itemName: EditorMenuItemNames): boolean => {
-        const editorItems = getEditorMenuItems(editorRef.current, uploadFile);
+        const editorItems = getEditorMenuItems(editorRef.current, fileHandler.upload);
 
         const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.key === itemName);
         const item = getEditorMenuItem(itemName);
@@ -177,6 +178,10 @@ export const useEditor = ({
         const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();
         return markdownOutput;
       },
+      getHTML: (): string => {
+        const htmlOutput = editorRef.current?.getHTML() ?? "<p></p>";
+        return htmlOutput;
+      },
       scrollSummary: (marking: IMarking): void => {
         if (!editorRef.current) return;
         scrollSummary(editorRef.current, marking);
@@ -199,7 +204,7 @@ export const useEditor = ({
         }
       },
     }),
-    [editorRef, savedSelection, uploadFile]
+    [editorRef, savedSelection, fileHandler.upload]
   );
 
   if (!editor) {

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

@@ -68,6 +68,10 @@ export const useReadOnlyEditor = ({
       const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();
       return markdownOutput;
     },
+    getHTML: (): string => {
+      const htmlOutput = editorRef.current?.getHTML() ?? "<p></p>";
+      return htmlOutput;
+    },
     scrollSummary: (marking: IMarking): void => {
       if (!editorRef.current) return;
       scrollSummary(editorRef.current, marking);

packages/editor/core/src/index.ts

@@ -24,6 +24,7 @@ export * from "src/ui/menus/menu-items";
 export * from "src/lib/editor-commands";
 
 // types
+export type { CustomEditorProps, TFileHandler } from "src/hooks/use-editor";
 export type { DeleteImage } from "src/types/delete-image";
 export type { UploadImage } from "src/types/upload-image";
 export type { EditorRefApi, EditorReadOnlyRefApi } from "src/types/editor-ref-api";

packages/editor/core/src/lib/utils.ts

@@ -1,5 +1,7 @@
+import { Extensions, generateJSON, getSchema } from "@tiptap/core";
 import { Selection } from "@tiptap/pm/state";
 import { clsx, type ClassValue } from "clsx";
+import { CoreEditorExtensionsWithoutProps } from "src/ui/extensions/core-without-props";
 import { twMerge } from "tailwind-merge";
 interface EditorClassNames {
   noBorder?: boolean;
@@ -58,3 +60,20 @@ export const isValidHttpUrl = (string: string): boolean => {
 
   return url.protocol === "http:" || url.protocol === "https:";
 };
+
+/**
+ * @description return an object with contentJSON and editorSchema
+ * @description contentJSON- ProseMirror JSON from HTML content
+ * @description editorSchema- editor schema from extensions
+ * @param {string} html
+ * @returns {object} {contentJSON, editorSchema}
+ */
+export const generateJSONfromHTML = (html: string) => {
+  const extensions = CoreEditorExtensionsWithoutProps();
+  const contentJSON = generateJSON(html ?? "<p></p>", extensions as Extensions);
+  const editorSchema = getSchema(extensions as Extensions);
+  return {
+    contentJSON,
+    editorSchema,
+  };
+};

packages/editor/core/src/types/editor-ref-api.ts

@@ -3,6 +3,7 @@ import { EditorMenuItemNames } from "src/ui/menus/menu-items";
 
 export type EditorReadOnlyRefApi = {
   getMarkDown: () => string;
+  getHTML: () => string;
   clearEditor: () => void;
   setEditorValue: (content: string) => void;
   scrollSummary: (marking: IMarking) => void;

packages/editor/core/src/ui/extensions/core-without-props.tsx

@@ -0,0 +1,121 @@
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import TextStyle from "@tiptap/extension-text-style";
+import TiptapUnderline from "@tiptap/extension-underline";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "tiptap-markdown";
+
+import { Table } from "src/ui/extensions/table/table";
+import { TableCell } from "src/ui/extensions/table/table-cell/table-cell";
+import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
+import { TableRow } from "src/ui/extensions/table/table-row/table-row";
+
+import { isValidHttpUrl } from "src/lib/utils";
+
+import { CustomCodeBlockExtension } from "src/ui/extensions/code";
+import { CustomKeymap } from "src/ui/extensions/keymap";
+import { CustomQuoteExtension } from "src/ui/extensions/quote";
+
+import { CustomLinkExtension } from "src/ui/extensions/custom-link";
+import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline";
+import { CustomTypographyExtension } from "src/ui/extensions/typography";
+import { CustomHorizontalRule } from "src/ui/extensions/horizontal-rule/horizontal-rule";
+import { CustomCodeMarkPlugin } from "src/ui/extensions/custom-code-inline/inline-code-plugin";
+import { MentionsWithoutProps } from "src/ui/mentions/mention-without-props";
+import { ImageExtensionWithoutProps } from "src/ui/extensions/image/image-extension-without-props";
+
+import StarterKit from "@tiptap/starter-kit";
+
+export const CoreEditorExtensionsWithoutProps = () => [
+  StarterKit.configure({
+    bulletList: {
+      HTMLAttributes: {
+        class: "list-disc pl-7 space-y-2",
+      },
+    },
+    orderedList: {
+      HTMLAttributes: {
+        class: "list-decimal pl-7 space-y-2",
+      },
+    },
+    listItem: {
+      HTMLAttributes: {
+        class: "not-prose space-y-2",
+      },
+    },
+    code: false,
+    codeBlock: false,
+    horizontalRule: false,
+    blockquote: false,
+    dropcursor: {
+      color: "rgba(var(--color-text-100))",
+      width: 1,
+    },
+  }),
+  CustomQuoteExtension,
+  CustomHorizontalRule.configure({
+    HTMLAttributes: {
+      class: "my-4 border-custom-border-400",
+    },
+  }),
+  CustomKeymap,
+  // ListKeymap,
+  CustomLinkExtension.configure({
+    openOnClick: true,
+    autolink: true,
+    linkOnPaste: true,
+    protocols: ["http", "https"],
+    validate: (url: string) => isValidHttpUrl(url),
+    HTMLAttributes: {
+      class:
+        "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+    },
+  }),
+  CustomTypographyExtension,
+  ImageExtensionWithoutProps().configure({
+    HTMLAttributes: {
+      class: "rounded-md",
+    },
+  }),
+  TiptapUnderline,
+  TextStyle,
+  TaskList.configure({
+    HTMLAttributes: {
+      class: "not-prose pl-2 space-y-2",
+    },
+  }),
+  TaskItem.configure({
+    HTMLAttributes: {
+      class: "flex",
+    },
+    nested: true,
+  }),
+  CustomCodeBlockExtension.configure({
+    HTMLAttributes: {
+      class: "",
+    },
+  }),
+  CustomCodeMarkPlugin,
+  CustomCodeInlineExtension,
+  Markdown.configure({
+    html: true,
+    transformPastedText: true,
+  }),
+  Table,
+  TableHeader,
+  TableCell,
+  TableRow,
+  MentionsWithoutProps(),
+  Placeholder.configure({
+    placeholder: ({ editor, node }) => {
+      if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
+
+      const shouldHidePlaceholder =
+        editor.isActive("table") || editor.isActive("codeBlock") || editor.isActive("image");
+      if (shouldHidePlaceholder) return "";
+
+      return "Press '/' for commands...";
+    },
+    includeChildren: true,
+  }),
+];

packages/editor/core/src/ui/extensions/image/image-extension-without-props.tsx

@@ -0,0 +1,33 @@
+import ImageExt from "@tiptap/extension-image";
+import { insertLineBelowImageAction } from "./utilities/insert-line-below-image";
+import { insertLineAboveImageAction } from "./utilities/insert-line-above-image";
+
+export const ImageExtensionWithoutProps = () =>
+  ImageExt.extend({
+    addKeyboardShortcuts() {
+      return {
+        ArrowDown: insertLineBelowImageAction,
+        ArrowUp: insertLineAboveImageAction,
+      };
+    },
+
+    // storage to keep track of image states Map<src, isDeleted>
+    addStorage() {
+      return {
+        images: new Map<string, boolean>(),
+        uploadInProgress: false,
+      };
+    },
+
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: {
+          default: "35%",
+        },
+        height: {
+          default: null,
+        },
+      };
+    },
+  });

packages/editor/core/src/ui/mentions/mention-without-props.tsx

@@ -0,0 +1,79 @@
+import { CustomMention } from "./custom";
+import { ReactRenderer } from "@tiptap/react";
+import { Editor } from "@tiptap/core";
+import tippy from "tippy.js";
+
+import { MentionList } from "./mention-list";
+
+export const MentionsWithoutProps = () =>
+  CustomMention.configure({
+    HTMLAttributes: {
+      class: "mention",
+    },
+    // mentionHighlights: mentionHighlights,
+    suggestion: {
+      // @ts-expect-error - Tiptap types are incorrect
+      render: () => {
+        let component: ReactRenderer | null = null;
+        let popup: any | null = null;
+
+        return {
+          onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+            if (!props.clientRect) {
+              return;
+            }
+            component = new ReactRenderer(MentionList, {
+              props: { ...props },
+              editor: props.editor,
+            });
+            props.editor.storage.mentionsOpen = true;
+            // @ts-expect-error - Tippy types are incorrect
+            popup = tippy("body", {
+              getReferenceClientRect: props.clientRect,
+              appendTo: () => document.querySelector(".active-editor") ?? document.querySelector("#editor-container"),
+              content: component.element,
+              showOnCreate: true,
+              interactive: true,
+              trigger: "manual",
+              placement: "bottom-start",
+            });
+          },
+          onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+            component?.updateProps(props);
+
+            if (!props.clientRect) {
+              return;
+            }
+
+            popup &&
+              popup[0].setProps({
+                getReferenceClientRect: props.clientRect,
+              });
+          },
+
+          onKeyDown: (props: { event: KeyboardEvent }) => {
+            if (props.event.key === "Escape") {
+              popup?.[0].hide();
+
+              return true;
+            }
+
+            const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+
+            if (navigationKeys.includes(props.event.key)) {
+              // @ts-expect-error - Tippy types are incorrect
+              component?.ref?.onKeyDown(props);
+              event?.stopPropagation();
+              return true;
+            }
+            return false;
+          },
+          onExit: (props: { editor: Editor; event: KeyboardEvent }) => {
+            props.editor.storage.mentionsOpen = false;
+            popup?.[0].destroy();
+            component?.destroy();
+          },
+        };
+      },
+    },
+  });

packages/editor/document-editor/package.json

@@ -34,12 +34,17 @@
     "@plane/ui": "*",
     "@tippyjs/react": "^4.2.6",
     "@tiptap/core": "^2.1.13",
+    "@tiptap/extension-collaboration": "^2.3.2",
     "@tiptap/pm": "^2.1.13",
     "@tiptap/suggestion": "^2.1.13",
     "lucide-react": "^0.378.0",
     "react-popper": "^2.3.0",
     "tippy.js": "^6.3.7",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "y-indexeddb": "^9.0.12",
+    "y-prosemirror": "^1.2.5",
+    "y-protocols": "^1.0.6",
+    "yjs": "^13.6.15"
   },
   "devDependencies": {
     "@types/node": "18.15.3",

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

@@ -0,0 +1,88 @@
+import { useEffect, useLayoutEffect, useMemo } from "react";
+import { EditorProps } from "@tiptap/pm/view";
+import { IndexeddbPersistence } from "y-indexeddb";
+import * as Y from "yjs";
+// editor-core
+import { EditorRefApi, IMentionHighlight, IMentionSuggestion, TFileHandler, useEditor } from "@plane/editor-core";
+// custom provider
+import { CollaborationProvider } from "src/providers/collaboration-provider";
+// extensions
+import { DocumentEditorExtensions, TEmbedConfig } from "src/ui/extensions";
+
+type DocumentEditorProps = {
+  id: string;
+  fileHandler: TFileHandler;
+  value: Uint8Array;
+  editorClassName: string;
+  onChange: (updates: Uint8Array) => void;
+  editorProps?: EditorProps;
+  forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
+  mentionHandler: {
+    highlights: () => Promise<IMentionHighlight[]>;
+    suggestions?: () => Promise<IMentionSuggestion[]>;
+  };
+  handleEditorReady?: (value: boolean) => void;
+  placeholder?: string | ((isFocused: boolean, value: string) => string);
+  setHideDragHandleFunction: (hideDragHandlerFromDragDrop: () => void) => void;
+  tabIndex?: number;
+  embedHandler?: TEmbedConfig;
+};
+
+export const useDocumentEditor = ({
+  id,
+  editorProps = {},
+  value,
+  editorClassName,
+  fileHandler,
+  onChange,
+  forwardedRef,
+  tabIndex,
+  handleEditorReady,
+  mentionHandler,
+  placeholder,
+  embedHandler,
+  setHideDragHandleFunction,
+}: DocumentEditorProps) => {
+  const provider = useMemo(
+    () =>
+      new CollaborationProvider({
+        name: id,
+        onChange,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [id]
+  );
+
+  // update document on value change
+  useEffect(() => {
+    if (value.byteLength > 0) Y.applyUpdate(provider.document, value);
+  }, [value, provider.document]);
+
+  // indexedDB provider
+  useLayoutEffect(() => {
+    const localProvider = new IndexeddbPersistence(id, provider.document);
+    return () => {
+      localProvider?.destroy();
+    };
+  }, [provider, id]);
+
+  const editor = useEditor({
+    id,
+    editorProps,
+    editorClassName,
+    fileHandler,
+    handleEditorReady,
+    forwardedRef,
+    mentionHandler,
+    extensions: DocumentEditorExtensions({
+      uploadFile: fileHandler.upload,
+      setHideDragHandle: setHideDragHandleFunction,
+      issueEmbedConfig: embedHandler?.issue,
+      provider,
+    }),
+    placeholder,
+    tabIndex,
+  });
+
+  return editor;
+};

packages/editor/document-editor/src/index.ts

@@ -3,6 +3,8 @@ export { DocumentReadOnlyEditor, DocumentReadOnlyEditorWithRef } from "src/ui/re
 
 // hooks
 export { useEditorMarkings } from "src/hooks/use-editor-markings";
+// utils
+export { proseMirrorJSONToBinaryString, applyUpdates, mergeUpdates } from "src/utils/yjs";
 
 export type { EditorRefApi, EditorReadOnlyRefApi, EditorMenuItem, EditorMenuItemNames } from "@plane/editor-core";
 

packages/editor/document-editor/src/providers/collaboration-provider.ts

@@ -0,0 +1,60 @@
+import * as Y from "yjs";
+
+export interface CompleteCollaboratorProviderConfiguration {
+  /**
+   * The identifier/name of your document
+   */
+  name: string;
+  /**
+   * The actual Y.js document
+   */
+  document: Y.Doc;
+  /**
+   * onChange callback
+   */
+  onChange: (updates: Uint8Array) => void;
+}
+
+export type CollaborationProviderConfiguration = Required<Pick<CompleteCollaboratorProviderConfiguration, "name">> &
+  Partial<CompleteCollaboratorProviderConfiguration>;
+
+export class CollaborationProvider {
+  public configuration: CompleteCollaboratorProviderConfiguration = {
+    name: "",
+    // @ts-expect-error cannot be undefined
+    document: undefined,
+    onChange: () => {},
+  };
+
+  constructor(configuration: CollaborationProviderConfiguration) {
+    this.setConfiguration(configuration);
+
+    this.configuration.document = configuration.document ?? new Y.Doc();
+    this.document.on("update", this.documentUpdateHandler.bind(this));
+    this.document.on("destroy", this.documentDestroyHandler.bind(this));
+  }
+
+  public setConfiguration(configuration: Partial<CompleteCollaboratorProviderConfiguration> = {}): void {
+    this.configuration = {
+      ...this.configuration,
+      ...configuration,
+    };
+  }
+
+  get document() {
+    return this.configuration.document;
+  }
+
+  documentUpdateHandler(update: Uint8Array, origin: any) {
+    // return if the update is from the provider itself
+    if (origin === this) return;
+
+    // call onChange with the update
+    this.configuration.onChange?.(update);
+  }
+
+  documentDestroyHandler() {
+    this.document.off("update", this.documentUpdateHandler);
+    this.document.off("destroy", this.documentDestroyHandler);
+  }
+}

packages/editor/document-editor/src/ui/extensions/extensions.tsx

@@ -1,3 +1,4 @@
+import Collaboration from "@tiptap/extension-collaboration";
 import Placeholder from "@tiptap/extension-placeholder";
 // plane imports
 import { SlashCommand, DragAndDrop } from "@plane/editor-extensions";
@@ -5,12 +6,18 @@ import { UploadImage, ISlashCommandItem } from "@plane/editor-core";
 // ui
 import { LayersIcon } from "@plane/ui";
 import { IssueEmbedSuggestions, IssueWidget, IssueListRenderer, TIssueEmbedConfig } from "src/ui/extensions";
+import { CollaborationProvider } from "src/providers/collaboration-provider";
+
+type TArguments = {
+  uploadFile: UploadImage;
+  setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void;
+  issueEmbedConfig?: TIssueEmbedConfig;
+  provider: CollaborationProvider;
+};
+
+export const DocumentEditorExtensions = (props: TArguments) => {
+  const { uploadFile, setHideDragHandle, issueEmbedConfig, provider } = props;
 
-export const DocumentEditorExtensions = (
-  uploadFile: UploadImage,
-  setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void,
-  issueEmbedConfig?: TIssueEmbedConfig
-) => {
   const additionalOptions: ISlashCommandItem[] = [
     {
       key: "issue_embed",
@@ -47,11 +54,13 @@ export const DocumentEditorExtensions = (
       },
       includeChildren: true,
     }),
+    Collaboration.configure({
+      document: provider.document,
+    }),
   ];
 
   if (issueEmbedConfig) {
     extensions.push(
-      // TODO: check this
       // @ts-expect-error resolve this
       IssueWidget({
         widgetCallback: issueEmbedConfig.widgetCallback,

packages/editor/document-editor/src/ui/index.tsx

@@ -1,30 +1,27 @@
 import React, { useState } from "react";
+// editor-core
 import {
-  UploadImage,
-  DeleteImage,
-  RestoreImage,
   getEditorClassNames,
-  useEditor,
   EditorRefApi,
   IMentionHighlight,
   IMentionSuggestion,
+  TFileHandler,
 } from "@plane/editor-core";
+// components
 import { PageRenderer } from "src/ui/components/page-renderer";
-import { DocumentEditorExtensions, TEmbedConfig } from "src/ui/extensions";
+// hooks
+import { useDocumentEditor } from "src/hooks/use-document-editor";
+// extensions
+import { TEmbedConfig } from "src/ui/extensions";
 
 interface IDocumentEditor {
-  initialValue: string;
-  value?: string;
-  fileHandler: {
-    cancel: () => void;
-    delete: DeleteImage;
-    upload: UploadImage;
-    restore: RestoreImage;
-  };
+  id: string;
+  value: Uint8Array;
+  fileHandler: TFileHandler;
   handleEditorReady?: (value: boolean) => void;
   containerClassName?: string;
   editorClassName?: string;
-  onChange: (json: object, html: string) => void;
+  onChange: (updates: Uint8Array) => void;
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
   mentionHandler: {
     highlights: () => Promise<IMentionHighlight[]>;
@@ -39,7 +36,7 @@ interface IDocumentEditor {
 const DocumentEditor = (props: IDocumentEditor) => {
   const {
     onChange,
-    initialValue,
+    id,
     value,
     fileHandler,
     containerClassName,
@@ -53,30 +50,26 @@ const DocumentEditor = (props: IDocumentEditor) => {
   } = props;
   // states
   const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = useState<() => void>(() => {});
-
   // this essentially sets the hideDragHandle function from the DragAndDrop extension as the Plugin
   // loads such that we can invoke it from react when the cursor leaves the container
   const setHideDragHandleFunction = (hideDragHandlerFromDragDrop: () => void) => {
     setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
   };
-  // use editor
-  const editor = useEditor({
-    onChange(json, html) {
-      onChange(json, html);
-    },
+
+  // use document editor
+  const editor = useDocumentEditor({
+    id,
     editorClassName,
-    restoreFile: fileHandler.restore,
-    uploadFile: fileHandler.upload,
-    deleteFile: fileHandler.delete,
-    cancelUploadImage: fileHandler.cancel,
-    initialValue,
+    fileHandler,
     value,
+    onChange,
     handleEditorReady,
     forwardedRef,
     mentionHandler,
-    extensions: DocumentEditorExtensions(fileHandler.upload, setHideDragHandleFunction, embedHandler?.issue),
     placeholder,
+    setHideDragHandleFunction,
     tabIndex,
+    embedHandler,
   });
 
   const editorContainerClassNames = getEditorClassNames({

packages/editor/document-editor/src/utils/yjs.ts

@@ -0,0 +1,76 @@
+import { Schema } from "@tiptap/pm/model";
+import { prosemirrorJSONToYDoc } from "y-prosemirror";
+import * as Y from "yjs";
+
+const defaultSchema: Schema = new Schema({
+  nodes: {
+    text: {},
+    doc: { content: "text*" },
+  },
+});
+
+/**
+ * @description converts ProseMirror JSON to Yjs document
+ * @param document prosemirror JSON
+ * @param fieldName
+ * @param schema
+ * @returns {Y.Doc} Yjs document
+ */
+export const proseMirrorJSONToBinaryString = (
+  document: any,
+  fieldName: string | Array<string> = "default",
+  schema?: Schema
+): string => {
+  if (!document) {
+    throw new Error(
+      `You've passed an empty or invalid document to the Transformer. Make sure to pass ProseMirror-compatible JSON. Actually passed JSON: ${document}`
+    );
+  }
+
+  // allow a single field name
+  if (typeof fieldName === "string") {
+    const yDoc = prosemirrorJSONToYDoc(schema ?? defaultSchema, document, fieldName);
+    const docAsUint8Array = Y.encodeStateAsUpdate(yDoc);
+    const base64Doc = Buffer.from(docAsUint8Array).toString("base64");
+    return base64Doc;
+  }
+
+  const yDoc = new Y.Doc();
+
+  fieldName.forEach((field) => {
+    const update = Y.encodeStateAsUpdate(prosemirrorJSONToYDoc(schema ?? defaultSchema, document, field));
+
+    Y.applyUpdate(yDoc, update);
+  });
+
+  const docAsUint8Array = Y.encodeStateAsUpdate(yDoc);
+  const base64Doc = Buffer.from(docAsUint8Array).toString("base64");
+
+  return base64Doc;
+};
+
+/**
+ * @description apply updates to a doc and return the updated doc in base64(binary) format
+ * @param {Uint8Array} document
+ * @param {Uint8Array} updates
+ * @returns {string} base64(binary) form of the updated doc
+ */
+export const applyUpdates = (document: Uint8Array, updates: Uint8Array): string => {
+  const yDoc = new Y.Doc();
+  Y.applyUpdate(yDoc, document);
+  Y.applyUpdate(yDoc, updates);
+
+  const encodedDoc = Y.encodeStateAsUpdate(yDoc);
+  const base64Updates = Buffer.from(encodedDoc).toString("base64");
+  return base64Updates;
+};
+
+/**
+ * @description merge multiple updates into one single update
+ * @param {Uint8Array[]} updates
+ * @returns {Uint8Array} merged updates
+ */
+export const mergeUpdates = (updates: Uint8Array[]): Uint8Array => {
+  const mergedUpdates = Y.mergeUpdates(updates);
+  return mergedUpdates;
+};

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

@@ -1,27 +1,22 @@
 import * as React from "react";
+// editor-core
 import {
-  UploadImage,
-  DeleteImage,
   IMentionSuggestion,
-  RestoreImage,
   EditorContainer,
   EditorContentWrapper,
   getEditorClassNames,
   useEditor,
   IMentionHighlight,
   EditorRefApi,
+  TFileHandler,
 } from "@plane/editor-core";
+// extensions
 import { LiteTextEditorExtensions } from "src/ui/extensions";
 
 export interface ILiteTextEditor {
   initialValue: string;
   value?: string | null;
-  fileHandler: {
-    cancel: () => void;
-    delete: DeleteImage;
-    upload: UploadImage;
-    restore: RestoreImage;
-  };
+  fileHandler: TFileHandler;
   containerClassName?: string;
   editorClassName?: string;
   onChange?: (json: object, html: string) => void;
@@ -58,10 +53,7 @@ const LiteTextEditor = (props: ILiteTextEditor) => {
     value,
     id,
     editorClassName,
-    restoreFile: fileHandler.restore,
-    uploadFile: fileHandler.upload,
-    deleteFile: fileHandler.delete,
-    cancelUploadImage: fileHandler.cancel,
+    fileHandler,
     forwardedRef,
     extensions: LiteTextEditorExtensions(onEnterKeyPress),
     mentionHandler,

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

@@ -0,0 +1,25 @@
+import { Extension } from "@tiptap/core";
+
+export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
+  Extension.create({
+    name: "enterKey",
+
+    addKeyboardShortcuts(this) {
+      return {
+        Enter: () => {
+          if (onEnterKeyPress) {
+            onEnterKeyPress();
+          }
+          return true;
+        },
+        "Shift-Enter": ({ editor }) =>
+          editor.commands.first(({ commands }) => [
+            () => commands.newlineInCode(),
+            () => commands.splitListItem("listItem"),
+            () => commands.createParagraphNear(),
+            () => commands.liftEmptyBlock(),
+            () => commands.splitBlock(),
+          ]),
+      };
+    },
+  });

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

@@ -1,13 +1,21 @@
 import { UploadImage } from "@plane/editor-core";
 import { DragAndDrop, SlashCommand } from "@plane/editor-extensions";
+import { EnterKeyExtension } from "./enter-key-extension";
 
 type TArguments = {
   uploadFile: UploadImage;
   dragDropEnabled?: boolean;
   setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void;
+  onEnterKeyPress?: () => void;
 };
 
-export const RichTextEditorExtensions = ({ uploadFile, dragDropEnabled, setHideDragHandle }: TArguments) => [
+export const RichTextEditorExtensions = ({
+  uploadFile,
+  dragDropEnabled,
+  setHideDragHandle,
+  onEnterKeyPress,
+}: TArguments) => [
   SlashCommand(uploadFile),
   dragDropEnabled === true && DragAndDrop(setHideDragHandle),
+  EnterKeyExtension(onEnterKeyPress),
 ];

packages/editor/rich-text-editor/src/ui/index.tsx

@@ -1,30 +1,26 @@
 "use client";
+import * as React from "react";
+// editor-core
 import {
-  DeleteImage,
   EditorContainer,
   EditorContentWrapper,
   getEditorClassNames,
   IMentionHighlight,
   IMentionSuggestion,
-  RestoreImage,
-  UploadImage,
   useEditor,
   EditorRefApi,
+  TFileHandler,
 } from "@plane/editor-core";
-import * as React from "react";
+// extensions
 import { RichTextEditorExtensions } from "src/ui/extensions";
+// components
 import { EditorBubbleMenu } from "src/ui/menus/bubble-menu";
 
 export type IRichTextEditor = {
   initialValue: string;
   value?: string | null;
   dragDropEnabled?: boolean;
-  fileHandler: {
-    cancel: () => void;
-    delete: DeleteImage;
-    upload: UploadImage;
-    restore: RestoreImage;
-  };
+  fileHandler: TFileHandler;
   id?: string;
   containerClassName?: string;
   editorClassName?: string;
@@ -37,6 +33,7 @@ export type IRichTextEditor = {
   };
   placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
+  onEnterKeyPress?: (e?: any) => void;
 };
 
 const RichTextEditor = (props: IRichTextEditor) => {
@@ -54,6 +51,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
     placeholder,
     tabIndex,
     mentionHandler,
+    onEnterKeyPress,
   } = props;
 
   const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = React.useState<() => void>(() => {});
@@ -67,10 +65,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
   const editor = useEditor({
     id,
     editorClassName,
-    restoreFile: fileHandler.restore,
-    uploadFile: fileHandler.upload,
-    deleteFile: fileHandler.delete,
-    cancelUploadImage: fileHandler.cancel,
+    fileHandler,
     onChange,
     initialValue,
     value,
@@ -80,6 +75,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
       uploadFile: fileHandler.upload,
       dragDropEnabled,
       setHideDragHandle: setHideDragHandleFunction,
+      onEnterKeyPress,
     }),
     tabIndex,
     mentionHandler,

packages/ui/src/icons/index.ts

@@ -19,4 +19,3 @@ export * from "./priority-icon";
 export * from "./related-icon";
 export * from "./side-panel-icon";
 export * from "./transfer-icon";
-export * from "./user-group-icon";

packages/ui/src/icons/user-group-icon.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "./type";
-
-export const UserGroupIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M18 19C18 17.4087 17.3679 15.8826 16.2426 14.7574C15.1174 13.6321 13.5913 13 12 13C10.4087 13 8.88258 13.6321 7.75736 14.7574C6.63214 15.8826 6 17.4087 6 19"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M23 18C23 16.636 22.4732 15.3279 21.5355 14.3635C20.5979 13.399 19.3261 12.8571 18 12.8571C18.8841 12.8571 19.7319 12.4959 20.357 11.8529C20.9821 11.21 21.3333 10.3379 21.3333 9.42857C21.3333 8.51926 20.9821 7.64719 20.357 7.00421C19.7319 6.36122 18.8841 6 18 6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M1 18C1 16.636 1.52678 15.3279 2.46447 14.3635C3.40215 13.399 4.67392 12.8571 6 12.8571C5.11595 12.8571 4.2681 12.4959 3.64298 11.8529C3.01786 11.21 2.66667 10.3379 2.66667 9.42857C2.66667 8.51926 3.01786 7.64719 3.64298 7.00421C4.2681 6.36122 5.11595 6 6 6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);

turbo.json

@@ -8,7 +8,6 @@
     "NEXT_PUBLIC_SPACE_BASE_URL",
     "NEXT_PUBLIC_SPACE_BASE_PATH",
     "NEXT_PUBLIC_WEB_BASE_URL",
-    "NEXT_PUBLIC_TRACK_EVENTS",
     "NEXT_PUBLIC_PLAUSIBLE_DOMAIN",
     "NEXT_PUBLIC_CRISP_ID",
     "NEXT_PUBLIC_ENABLE_SESSION_RECORDER",

web/components/active-cycles/list-page.tsx

@@ -1,9 +1,8 @@
 import { FC, useEffect } from "react";
 import useSWR from "swr";
-// ui
-import { Spinner } from "@plane/ui";
 // components
 import { ActiveCycleInfoCard } from "@/components/active-cycles";
+import { WorkspaceActiveCycleLoader } from "@/components/ui";
 // constants
 import { WORKSPACE_ACTIVE_CYCLES_LIST } from "@/constants/fetch-keys";
 // services
@@ -22,7 +21,7 @@ export const ActiveCyclesListPage: FC<ActiveCyclesListPageProps> = (props) => {
   const { workspaceSlug, cursor, perPage, updateTotalPages, updateResultsCount } = props;
 
   // fetching active cycles in workspace
-  const { data: workspaceActiveCycles } = useSWR(
+  const { data: workspaceActiveCycles, isLoading } = useSWR(
     workspaceSlug && cursor ? WORKSPACE_ACTIVE_CYCLES_LIST(workspaceSlug as string, cursor, `${perPage}`) : null,
     workspaceSlug && cursor ? () => cycleService.workspaceActiveCycles(workspaceSlug.toString(), cursor, perPage) : null
   );
@@ -34,12 +33,8 @@ export const ActiveCyclesListPage: FC<ActiveCyclesListPageProps> = (props) => {
     }
   }, [updateTotalPages, updateResultsCount, workspaceActiveCycles]);
 
-  if (!workspaceActiveCycles) {
-    return (
-      <div className="flex items-center justify-center h-full w-full">
-        <Spinner />
-      </div>
-    );
+  if (!workspaceActiveCycles || isLoading) {
+    return <WorkspaceActiveCycleLoader />;
   }
 
   return (

web/components/analytics/project-modal/main-content.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 import { ICycle, IModule, IProject } from "@plane/types";
@@ -20,20 +20,21 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
 
   return (
     <Tab.Group as={React.Fragment}>
-      <Tab.List as="div" className="flex space-x-2 border-b border-custom-border-200 px-0 md:px-5 py-0 md:py-3">
+      <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200 px-0 md:px-3">
         {ANALYTICS_TABS.map((tab) => (
-          <Tab
-            key={tab.key}
-            className={({ selected }) =>
-              `rounded-0 w-full md:w-max md:rounded-3xl border-b md:border border-custom-border-200 focus:outline-none px-0 md:px-4 py-2 text-xs hover:bg-custom-background-80 ${
-                selected
-                  ? "border-custom-primary-100 text-custom-primary-100 md:bg-custom-background-80 md:text-custom-text-200 md:border-custom-border-200"
-                  : "border-transparent"
-              }`
-            }
-            onClick={() => {}}
-          >
-            {tab.title}
+          <Tab key={tab.key} as={Fragment}>
+            {({ selected }) => (
+              <button
+                className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none  ${
+                  selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
+                }`}
+              >
+                {tab.title}
+                <div
+                  className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
+                />
+              </button>
+            )}
           </Tab>
         ))}
       </Tab.List>

web/components/command-palette/actions/issue-actions/actions-list.tsx

@@ -1,10 +1,10 @@
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
-import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2 } from "lucide-react";
+import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2, Users } from "lucide-react";
 import { TIssue } from "@plane/types";
 // hooks
-import { DoubleCircleIcon, UserGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";
+import { DoubleCircleIcon, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { EIssuesStoreType } from "@/constants/issue";
 // helpers
@@ -115,7 +115,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         className="focus:outline-none"
       >
         <div className="flex items-center gap-2 text-custom-text-200">
-          <UserGroupIcon className="h-3.5 w-3.5" />
+          <Users className="h-3.5 w-3.5" />
           Assign to...
         </div>
       </Command.Item>

web/components/core/activity.tsx

@@ -502,7 +502,7 @@ const activityDetails: {
   name: {
     message: (activity, showIssue) => (
       <>
-        set the name to <span className="break-all">{activity.new_value}</span>
+        set the title to <span className="break-all">{activity.new_value}</span>
         {showIssue && (
           <>
             {" "}

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

@@ -2,6 +2,8 @@ import React, { FC } from "react";
 import Link from "next/link";
 // ui
 import { Tooltip } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
 
 interface IListItemProps {
   title: string;
@@ -12,6 +14,7 @@ interface IListItemProps {
   actionableItems?: JSX.Element;
   isMobile?: boolean;
   parentRef: React.RefObject<HTMLDivElement>;
+  className?: string;
 }
 
 export const ListItem: FC<IListItemProps> = (props) => {
@@ -24,12 +27,18 @@ export const ListItem: FC<IListItemProps> = (props) => {
     onItemClick,
     isMobile = false,
     parentRef,
+    className = "",
   } = props;
 
   return (
     <div ref={parentRef} className="relative">
       <Link href={itemLink} onClick={onItemClick}>
-        <div className="group h-24 sm:h-[52px] flex w-full flex-col items-center justify-between gap-3 sm:gap-5 px-6 py-4 sm:py-0 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 sm:flex-row">
+        <div
+          className={cn(
+            "group h-24 sm:h-[52px] flex w-full flex-col items-center justify-between gap-3 sm:gap-5 px-6 py-4 sm:py-0 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 sm:flex-row",
+            className
+          )}
+        >
           <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
             <div className="relative flex w-full items-center gap-3 overflow-hidden">
               <div className="flex items-center gap-4 truncate">

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

@@ -1,5 +1,5 @@
 import React from "react";
-
+import { observer } from "mobx-react";
 import Image from "next/image";
 // headless ui
 import { Tab } from "@headlessui/react";
@@ -15,6 +15,7 @@ import {
 // hooks
 import { Avatar, StateGroupIcon } from "@plane/ui";
 import { SingleProgressStats } from "@/components/core";
+import { useProjectState } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
 // images
 import emptyLabel from "public/empty-state/empty_label.svg";
@@ -44,20 +45,23 @@ type Props = {
   handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
 };
 
-export const SidebarProgressStats: React.FC<Props> = ({
-  distribution,
-  groupedIssues,
-  totalIssues,
-  module,
-  roundedTab,
-  noBackground,
-  isPeekView = false,
-  isCompleted = false,
-  filters,
-  handleFiltersUpdate,
-}) => {
+export const SidebarProgressStats: React.FC<Props> = observer((props) => {
+  const {
+    distribution,
+    groupedIssues,
+    totalIssues,
+    module,
+    roundedTab,
+    noBackground,
+    isPeekView = false,
+    isCompleted = false,
+    filters,
+    handleFiltersUpdate,
+  } = props;
   const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
 
+  const { groupedProjectStates } = useProjectState();
+
   const currentValue = (tab: string | null) => {
     switch (tab) {
       case "Assignees":
@@ -71,6 +75,12 @@ export const SidebarProgressStats: React.FC<Props> = ({
     }
   };
 
+  const getStateGroupState = (stateGroup: string) => {
+    const stateGroupStates = groupedProjectStates?.[stateGroup];
+    const stateGroupStatesId = stateGroupStates?.map((state) => state.id);
+    return stateGroupStatesId;
+  };
+
   return (
     <Tab.Group
       defaultIndex={currentValue(tab)}
@@ -261,10 +271,14 @@ export const SidebarProgressStats: React.FC<Props> = ({
               }
               completed={groupedIssues[group]}
               total={totalIssues}
+              {...(!isPeekView &&
+                !isCompleted && {
+                  onClick: () => handleFiltersUpdate("state", getStateGroupState(group) ?? []),
+                })}
             />
           ))}
         </Tab.Panel>
       </Tab.Panels>
     </Tab.Group>
   );
-};
+});

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

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import Link from "next/link";
 // types
 import { ICycle } from "@plane/types";
 // components
@@ -8,14 +9,19 @@ import { EmptyState } from "@/components/empty-state";
 import { EmptyStateType } from "@/constants/empty-state";
 
 export type ActiveCycleProductivityProps = {
+  workspaceSlug: string;
+  projectId: string;
   cycle: ICycle;
 };
 
 export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props) => {
-  const { cycle } = props;
+  const { workspaceSlug, projectId, cycle } = props;
 
   return (
-    <div className="flex flex-col justify-center min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+    <Link
+      href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}
+      className="flex flex-col justify-center min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg"
+    >
       <div className="flex items-center justify-between gap-4">
         <h3 className="text-base text-custom-text-300 font-semibold">Issue burndown</h3>
       </div>
@@ -53,6 +59,6 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props)
           </div>
         </>
       )}
-    </div>
+    </Link>
   );
 };

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

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import Link from "next/link";
 // types
 import { ICycle } from "@plane/types";
 // ui
@@ -10,11 +11,13 @@ import { CYCLE_STATE_GROUPS_DETAILS } from "@/constants/cycle";
 import { EmptyStateType } from "@/constants/empty-state";
 
 export type ActiveCycleProgressProps = {
+  workspaceSlug: string;
+  projectId: string;
   cycle: ICycle;
 };
 
 export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
-  const { cycle } = props;
+  const { workspaceSlug, projectId, cycle } = props;
 
   const progressIndicatorData = CYCLE_STATE_GROUPS_DETAILS.map((group, index) => ({
     id: index,
@@ -31,7 +34,10 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
   };
 
   return (
-    <div className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+    <Link
+      href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}
+      className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg"
+    >
       <div className="flex flex-col gap-3">
         <div className="flex items-center justify-between gap-4">
           <h3 className="text-base text-custom-text-300 font-semibold">Progress</h3>
@@ -85,6 +91,6 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
           <EmptyState type={EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE} layout="screen-simple" size="sm" />
         </div>
       )}
-    </div>
+    </Link>
   );
 };

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

@@ -62,13 +62,18 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                       cycleId={currentProjectActiveCycleId}
                       workspaceSlug={workspaceSlug}
                       projectId={projectId}
+                      className="!border-b-transparent"
                     />
                   )}
-                  <div className="bg-custom-background-90 py-6 px-8">
-                    <div className="grid grid-cols-1 bg-custom-background-90 gap-3 lg:grid-cols-2 xl:grid-cols-3">
-                      <ActiveCycleProgress cycle={activeCycle} />
-                      <ActiveCycleProductivity cycle={activeCycle} />
-                      <ActiveCycleStats cycle={activeCycle} workspaceSlug={workspaceSlug} projectId={projectId} />
+                  <div className="bg-custom-background-100 pt-3 pb-6 px-6">
+                    <div className="grid grid-cols-1 bg-custom-background-100 gap-3 lg:grid-cols-2 xl:grid-cols-3">
+                      <ActiveCycleProgress workspaceSlug={workspaceSlug} projectId={projectId} cycle={activeCycle} />
+                      <ActiveCycleProductivity
+                        workspaceSlug={workspaceSlug}
+                        projectId={projectId}
+                        cycle={activeCycle}
+                      />
+                      <ActiveCycleStats workspaceSlug={workspaceSlug} projectId={projectId} cycle={activeCycle} />
                     </div>
                   </div>
                 </div>

web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx

@@ -2,7 +2,7 @@ import { useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { User2 } from "lucide-react";
+import { Users } from "lucide-react";
 // ui
 import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
 // components
@@ -112,9 +112,7 @@ export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
             })}
           </AvatarGroup>
         ) : (
-          <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-            <User2 className="h-4 w-4 text-custom-text-400" />
-          </span>
+          <Users className="h-4 w-4 text-custom-text-300" />
         )}
 
         <FavoriteStar

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

@@ -1,6 +1,6 @@
 import React, { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
-import { CalendarCheck2, CalendarClock, MoveRight, User2 } from "lucide-react";
+import { CalendarCheck2, CalendarClock, MoveRight, Users } from "lucide-react";
 // types
 import { ICycle, TCycleGroups } from "@plane/types";
 // ui
@@ -146,9 +146,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
               })}
             </AvatarGroup>
           ) : (
-            <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-              <User2 className="h-4 w-4 text-custom-text-400" />
-            </span>
+            <Users className="h-4 w-4 text-custom-text-300" />
           )}
         </div>
       </Tooltip>

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

@@ -22,10 +22,11 @@ type TCyclesListItem = {
   handleRemoveFromFavorites?: () => void;
   workspaceSlug: string;
   projectId: string;
+  className?: string;
 };
 
 export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
-  const { cycleId, workspaceSlug, projectId } = props;
+  const { cycleId, workspaceSlug, projectId, className = "" } = props;
   // refs
   const parentRef = useRef(null);
   // router
@@ -83,6 +84,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
       onItemClick={(e) => {
         if (cycleDetails.archived_at) openCycleOverview(e);
       }}
+      className={className}
       prependTitleElement={
         <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
           {isCompleted ? (

web/components/cycles/sidebar.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import isEmpty from "lodash/isEmpty";
+import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
@@ -9,10 +10,10 @@ import {
   ChevronDown,
   LinkIcon,
   Trash2,
-  UserCircle2,
   AlertCircle,
   ChevronRight,
   CalendarClock,
+  SquareUser,
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
@@ -199,14 +200,18 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
       if (!workspaceSlug || !projectId) return;
-      const newValues = issueFilters?.filters?.[key] ?? [];
+      let newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
-        // this validation is majorly for the filter start_date, target_date custom
-        value.forEach((val) => {
-          if (!newValues.includes(val)) newValues.push(val);
-          else newValues.splice(newValues.indexOf(val), 1);
-        });
+        if (key === "state") {
+          if (isEqual(newValues, value)) newValues = [];
+          else newValues = value;
+        } else {
+          value.forEach((val) => {
+            if (!newValues.includes(val)) newValues.push(val);
+            else newValues.splice(newValues.indexOf(val), 1);
+          });
+        }
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);
@@ -427,7 +432,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-              <UserCircle2 className="h-4 w-4" />
+              <SquareUser className="h-4 w-4" />
               <span className="text-base">Lead</span>
             </div>
             <div className="flex w-3/5 items-center rounded-sm">

web/components/dropdowns/member/avatar.tsx

@@ -1,16 +1,19 @@
 import { observer } from "mobx-react";
-// hooks
-import { Avatar, AvatarGroup, UserGroupIcon } from "@plane/ui";
-import { useMember } from "@/hooks/store";
+// icons
+import { LucideIcon, Users } from "lucide-react";
 // ui
+import { Avatar, AvatarGroup } from "@plane/ui";
+// hooks
+import { useMember } from "@/hooks/store";
 
 type AvatarProps = {
   showTooltip: boolean;
   userIds: string | string[] | null;
+  icon?: LucideIcon;
 };
 
 export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
-  const { showTooltip, userIds } = props;
+  const { showTooltip, userIds, icon: Icon } = props;
   // store hooks
   const { getUserDetails } = useMember();
 
@@ -33,5 +36,9 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
     }
   }
 
-  return <UserGroupIcon className="h-3 w-3 flex-shrink-0" />;
+  return Icon ? (
+    <Icon className="h-3 w-3 flex-shrink-0" />
+  ) : (
+    <Users className="h-3 w-3 flex-shrink-0" />
+  );
 });

web/components/dropdowns/member/index.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, LucideIcon } from "lucide-react";
 // headless ui
 import { Combobox } from "@headlessui/react";
 // helpers
@@ -19,6 +19,7 @@ import { MemberDropdownProps } from "./types";
 
 type Props = {
   projectId?: string;
+  icon?: LucideIcon;
   onClose?: () => void;
 } & MemberDropdownProps;
 
@@ -43,6 +44,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     showTooltip = false,
     tabIndex,
     value,
+    icon,
   } = props;
   // states
   const [isOpen, setIsOpen] = useState(false);
@@ -115,7 +117,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
               showTooltip={showTooltip}
               variant={buttonVariant}
             >
-              {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} />}
+              {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} icon={icon} />}
               {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
                 <span className="flex-grow truncate text-xs leading-5">
                   {Array.isArray(value) && value.length > 0

web/components/headers/page-details.tsx

@@ -1,30 +1,26 @@
-import { FC } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { FileText } from "lucide-react";
-// hooks
 // ui
 import { Breadcrumbs, Button } from "@plane/ui";
-// helpers
-import { BreadcrumbLink } from "@/components/common";
 // components
+import { BreadcrumbLink } from "@/components/common";
 import { ProjectLogo } from "@/components/project";
-import { useCommandPalette, usePage, useProject } from "@/hooks/store";
+// hooks
+import { usePage, useProject } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
-export interface IPagesHeaderProps {
-  showButton?: boolean;
-}
-
-export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
-  const { showButton = false } = props;
+export const PageDetailsHeader = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, pageId } = router.query;
   // store hooks
-  const { toggleCreatePageModal } = useCommandPalette();
   const { currentProjectDetails } = useProject();
-
-  const { name } = usePage(pageId?.toString() ?? "");
+  const { isContentEditable, isSubmitting, name } = usePage(pageId?.toString() ?? "");
+  // use platform
+  const { platform } = usePlatformOS();
+  // derived values
+  const isMac = platform === "MacOS";
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
@@ -77,12 +73,24 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
           </Breadcrumbs>
         </div>
       </div>
-      {showButton && (
-        <div className="flex items-center gap-2">
-          <Button variant="primary" size="sm" onClick={() => toggleCreatePageModal(true)}>
-            Add Page
-          </Button>
-        </div>
+      {isContentEditable && (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() => {
+            // ctrl/cmd + s to save the changes
+            const event = new KeyboardEvent("keydown", {
+              key: "s",
+              ctrlKey: !isMac,
+              metaKey: isMac,
+            });
+            window.dispatchEvent(event);
+          }}
+          className="flex-shrink-0"
+          loading={isSubmitting === "submitting"}
+        >
+          {isSubmitting === "submitting" ? "Saving" : "Save changes"}
+        </Button>
       )}
     </div>
   );

web/components/inbox/content/issue-properties.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
-import { CalendarCheck2, CopyPlus, Signal, Tag } from "lucide-react";
+import { CalendarCheck2, CopyPlus, Signal, Tag, Users } from "lucide-react";
 import { TInboxDuplicateIssueDetails, TIssue } from "@plane/types";
-import { ControlLink, DoubleCircleIcon, Tooltip, UserGroupIcon } from "@plane/ui";
+import { ControlLink, DoubleCircleIcon, Tooltip } from "@plane/ui";
 // components
 import { DateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "@/components/dropdowns";
 import { IssueLabel, TIssueOperations } from "@/components/issues";
@@ -64,7 +64,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
             {/* Assignee */}
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+                <Users className="h-4 w-4 flex-shrink-0" />
                 <span>Assignees</span>
               </div>
               <MemberDropdown

web/components/inbox/modals/create-edit-modal/create-root.tsx

@@ -42,6 +42,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
   const router = useRouter();
   // refs
   const descriptionEditorRef = useRef<EditorRefApi>(null);
+  const submitBtnRef = useRef<HTMLButtonElement | null>(null);
   // hooks
   const { captureIssueEvent } = useEventTracker();
   const { createInboxIssue } = useProjectInbox();
@@ -139,6 +140,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
             handleData={handleFormData}
             editorRef={descriptionEditorRef}
             containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
+            onEnterKeyPress={() => submitBtnRef?.current?.click()}
           />
           <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} />
         </div>
@@ -158,6 +160,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
           </Button>
           <Button
             variant="primary"
+            ref={submitBtnRef}
             size="sm"
             type="submit"
             loading={formSubmitting}

web/components/inbox/modals/create-edit-modal/edit-root.tsx

@@ -34,6 +34,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
   const router = useRouter();
   // refs
   const descriptionEditorRef = useRef<EditorRefApi>(null);
+  const submitBtnRef = useRef<HTMLButtonElement | null>(null);
   // store hooks
   const { captureIssueEvent } = useEventTracker();
   const { currentProjectDetails } = useProject();
@@ -148,6 +149,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
             handleData={handleFormData}
             editorRef={descriptionEditorRef}
             containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
+            onEnterKeyPress={() => submitBtnRef?.current?.click()}
           />
           <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} isVisible />
         </div>
@@ -160,6 +162,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
           variant="primary"
           size="sm"
           type="button"
+          ref={submitBtnRef}
           loading={formSubmitting}
           disabled={isTitleLengthMoreThan255Character}
           onClick={handleFormSubmit}

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

@@ -18,11 +18,13 @@ type TInboxIssueDescription = {
   data: Partial<TIssue>;
   handleData: (issueKey: keyof Partial<TIssue>, issueValue: Partial<TIssue>[keyof Partial<TIssue>]) => void;
   editorRef: RefObject<EditorRefApi>;
+  onEnterKeyPress?: (e?: any) => void;
 };
 
 // TODO: have to implement GPT Assistance
 export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props) => {
-  const { containerClassName, workspaceSlug, projectId, workspaceId, data, handleData, editorRef } = props;
+  const { containerClassName, workspaceSlug, projectId, workspaceId, data, handleData, editorRef, onEnterKeyPress } =
+    props;
   // hooks
   const { loader } = useProjectInbox();
 
@@ -44,6 +46,7 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
       onChange={(_description: object, description_html: string) => handleData("description_html", description_html)}
       placeholder={getDescriptionPlaceholder}
       containerClassName={containerClassName}
+      onEnterKeyPress={onEnterKeyPress}
     />
   );
 });

web/components/integration/github/root.tsx

@@ -10,9 +10,9 @@ import useSWR, { mutate } from "swr";
 // react-hook-form
 // services
 // components
-import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
+import { ArrowLeft, Check, List, Settings, UploadCloud, Users } from "lucide-react";
 import { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types";
-import { UserGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/ui";
 import {
   GithubImportConfigure,
   GithubImportData,
@@ -72,7 +72,7 @@ const integrationWorkflowData = [
   {
     title: "Users",
     key: "import-users",
-    icon: UserGroupIcon,
+    icon: Users,
   },
   {
     title: "Confirm",

web/components/integration/jira/root.tsx

@@ -5,12 +5,12 @@ import { useRouter } from "next/router";
 import { FormProvider, useForm } from "react-hook-form";
 import { mutate } from "swr";
 // icons
-import { ArrowLeft, Check, List, Settings } from "lucide-react";
+import { ArrowLeft, Check, List, Settings, Users } from "lucide-react";
 import { IJiraImporterForm } from "@plane/types";
 // services
 // fetch keys
 // components
-import { Button, UserGroupIcon } from "@plane/ui";
+import { Button } from "@plane/ui";
 import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
 // assets
 import { JiraImporterService } from "@/services/integrations";
@@ -44,7 +44,7 @@ const integrationWorkflowData: Array<{
   {
     title: "Users",
     key: "import-users",
-    icon: UserGroupIcon,
+    icon: Users,
   },
   {
     title: "Confirm",

web/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx

@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
-// hooks
-import { UserGroupIcon } from "@plane/ui";
+// icons
+import { Users } from "lucide-react";
+// hooks;
 import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
-// icons
 
 type TIssueAssigneeActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
@@ -21,7 +21,7 @@ export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<UserGroupIcon className="h-4 w-4 flex-shrink-0" />}
+      icon={<Users className="h-3 w-3 flex-shrink-0" />}
       activityId={activityId}
       ends={ends}
     >

web/components/issues/issue-detail/sidebar.tsx

@@ -12,6 +12,7 @@ import {
   Tag,
   Trash2,
   Triangle,
+  Users,
   XCircle,
 } from "lucide-react";
 // hooks
@@ -24,7 +25,6 @@ import {
   RelatedIcon,
   TOAST_TYPE,
   Tooltip,
-  UserGroupIcon,
   setToast,
 } from "@plane/ui";
 import {
@@ -219,7 +219,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+                <Users className="h-4 w-4 flex-shrink-0" />
                 <span>Assignees</span>
               </div>
               <MemberDropdown

web/components/issues/issue-layouts/empty-states/cycle.tsx

@@ -68,7 +68,6 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
     ? EmptyStateType.PROJECT_EMPTY_FILTER
     : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
   const additionalPath = isCompletedAndEmpty ? undefined : activeLayout ?? "list";
-  const emptyStateSize = isEmptyFilters ? "lg" : "sm";
 
   return (
     <>
@@ -84,7 +83,6 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
         <EmptyState
           type={emptyStateType}
           additionalPath={additionalPath}
-          size={emptyStateSize}
           primaryButtonOnClick={
             !isCompletedAndEmpty && !isEmptyFilters
               ? () => {

web/components/issues/issue-layouts/empty-states/draft-issues.tsx

@@ -41,14 +41,12 @@ export const ProjectDraftEmptyState: React.FC = observer(() => {
   const emptyStateType =
     issueFilterCount > 0 ? EmptyStateType.PROJECT_DRAFT_EMPTY_FILTER : EmptyStateType.PROJECT_DRAFT_NO_ISSUES;
   const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
-  const emptyStateSize = issueFilterCount > 0 ? "lg" : "sm";
 
   return (
     <div className="relative h-full w-full overflow-y-auto">
       <EmptyState
         type={emptyStateType}
         additionalPath={additionalPath}
-        size={emptyStateSize}
         secondaryButtonOnClick={issueFilterCount > 0 ? handleClearAllFilters : undefined}
       />
     </div>

web/components/issues/issue-layouts/empty-states/project-issues.tsx

@@ -43,14 +43,12 @@ export const ProjectEmptyState: React.FC = observer(() => {
 
   const emptyStateType = issueFilterCount > 0 ? EmptyStateType.PROJECT_EMPTY_FILTER : EmptyStateType.PROJECT_NO_ISSUES;
   const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
-  const emptyStateSize = issueFilterCount > 0 ? "lg" : "sm";
 
   return (
     <div className="relative h-full w-full overflow-y-auto">
       <EmptyState
         type={emptyStateType}
         additionalPath={additionalPath}
-        size={emptyStateSize}
         primaryButtonOnClick={
           issueFilterCount > 0
             ? undefined

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -182,14 +182,14 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   };
 
   const handleKanbanFilters = (toggle: "group_by" | "sub_group_by", value: string) => {
-    if (workspaceSlug && projectId) {
+    if (workspaceSlug) {
       let kanbanFilters = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || [];
       if (kanbanFilters.includes(value)) {
         kanbanFilters = kanbanFilters.filter((_value) => _value != value);
       } else {
         kanbanFilters.push(value);
       }
-      updateFilters(projectId.toString(), EIssueFilterType.KANBAN_FILTERS, {
+      updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, {
         [toggle]: kanbanFilters,
       });
     }

web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx

@@ -154,12 +154,11 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
 
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
-      <div className="relative flex h-full w-full flex-col">
+      <div className="relative flex h-full w-full flex-col overflow-auto">
         <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
         {issueIds.length === 0 ? (
           <EmptyState
             type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS}
-            size="sm"
             primaryButtonOnClick={
               (workspaceProjectIds ?? []).length > 0
                 ? currentView !== "custom-view" && currentView !== "subscribed"

web/components/issues/issue-modal/form.tsx

@@ -109,6 +109,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
+  const submitBtnRef = useRef<HTMLButtonElement | null>(null);
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -470,6 +471,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           onChange(description_html);
                           handleFormChange();
                         }}
+                        onEnterKeyPress={() => submitBtnRef?.current?.click()}
                         ref={editorRef}
                         tabIndex={getTabIndex("description_html")}
                         placeholder={getDescriptionPlaceholder}
@@ -770,6 +772,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
               variant="primary"
               type="submit"
               size="sm"
+              ref={submitBtnRef}
               loading={isSubmitting}
               tabIndex={isDraft ? getTabIndex("submit_button") : getTabIndex("draft_button")}
             >

web/components/issues/peek-overview/properties.tsx

@@ -10,10 +10,11 @@ import {
   XCircle,
   CalendarClock,
   CalendarCheck2,
+  Users,
 } from "lucide-react";
 // hooks
 // ui icons
-import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
+import { DiceIcon, DoubleCircleIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
 // components
 import {
   DateDropdown,
@@ -94,7 +95,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* assignee */}
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+            <Users className="h-4 w-4 flex-shrink-0" />
             <span>Assignees</span>
           </div>
           <MemberDropdown

web/components/modules/module-card-item.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { CalendarCheck2, CalendarClock, Info, MoveRight, User2 } from "lucide-react";
+import { CalendarCheck2, CalendarClock, Info, MoveRight, SquareUser } from "lucide-react";
 // ui
 import { LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
 // components
@@ -188,9 +188,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                 </span>
               ) : (
                 <Tooltip tooltipContent="No lead">
-                  <span className="cursor-default flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                    <User2 className="h-4 w-4 text-custom-text-400" />
-                  </span>
+                  <SquareUser className="h-4 w-4 mx-1 text-custom-text-300 " />
                 </Tooltip>
               )}
             </div>

web/components/modules/module-list-item-action.tsx

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 // icons
-import { CalendarCheck2, CalendarClock, MoveRight, User2 } from "lucide-react";
+import { CalendarCheck2, CalendarClock, MoveRight, SquareUser } from "lucide-react";
 // types
 import { IModule } from "@plane/types";
 // ui
@@ -140,9 +140,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
         </span>
       ) : (
         <Tooltip tooltipContent="No lead">
-          <span className="cursor-default flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-            <User2 className="h-4 w-4 text-custom-text-400" />
-          </span>
+          <SquareUser className="h-4 w-4 text-custom-text-300" />
         </Tooltip>
       )}
 

web/components/modules/sidebar.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
+import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
@@ -11,8 +12,9 @@ import {
   Info,
   LinkIcon,
   Plus,
+  SquareUser,
   Trash2,
-  UserCircle2,
+  Users,
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { IIssueFilterOptions, ILinkDetails, IModule, ModuleLink } from "@plane/types";
@@ -23,7 +25,6 @@ import {
   LayersIcon,
   CustomSelect,
   ModuleStatusIcon,
-  UserGroupIcon,
   TOAST_TYPE,
   setToast,
   ArchiveIcon,
@@ -252,14 +253,18 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
       if (!workspaceSlug || !projectId) return;
-      const newValues = issueFilters?.filters?.[key] ?? [];
+      let newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
-        // this validation is majorly for the filter start_date, target_date custom
-        value.forEach((val) => {
-          if (!newValues.includes(val)) newValues.push(val);
-          else newValues.splice(newValues.indexOf(val), 1);
-        });
+        if (key === "state") {
+          if (isEqual(newValues, value)) newValues = [];
+          else newValues = value;
+        } else {
+          value.forEach((val) => {
+            if (!newValues.includes(val)) newValues.push(val);
+            else newValues.splice(newValues.indexOf(val), 1);
+          });
+        }
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);
@@ -493,7 +498,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
         <div className="flex flex-col gap-5 pb-6 pt-2.5">
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-              <UserCircle2 className="h-4 w-4" />
+              <SquareUser className="h-4 w-4" />
               <span className="text-base">Lead</span>
             </div>
             <Controller
@@ -511,6 +516,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                     buttonVariant="background-with-text"
                     placeholder="Lead"
                     disabled={!isEditingAllowed || isArchived}
+                    icon={SquareUser}
                   />
                 </div>
               )}
@@ -518,7 +524,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           </div>
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-              <UserGroupIcon className="h-4 w-4" />
+              <Users className="h-4 w-4" />
               <span className="text-base">Members</span>
             </div>
             <Controller

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

@@ -1,8 +1,7 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
-import { Control, Controller } from "react-hook-form";
-// document editor
+// document-editor
 import {
   DocumentEditorWithRef,
   DocumentReadOnlyEditorWithRef,
@@ -11,7 +10,7 @@ import {
   IMarking,
 } from "@plane/document-editor";
 // types
-import { IUserLite, TPage } from "@plane/types";
+import { IUserLite } from "@plane/types";
 // components
 import { IssueEmbedCard, PageContentBrowser, PageEditorTitle, PageContentLoader } from "@/components/pages";
 // helpers
@@ -19,8 +18,8 @@ import { cn } from "@/helpers/common.helper";
 // hooks
 import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store";
 import { useIssueEmbed } from "@/hooks/use-issue-embed";
+import { usePageDescription } from "@/hooks/use-page-description";
 import { usePageFilters } from "@/hooks/use-page-filters";
-import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // services
 import { FileService } from "@/services/file.service";
 // store
@@ -29,13 +28,10 @@ import { IPageStore } from "@/store/pages/page.store";
 const fileService = new FileService();
 
 type Props = {
-  control: Control<TPage, any>;
   editorRef: React.RefObject<EditorRefApi>;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
-  swrPageDetails: TPage | undefined;
-  handleSubmit: () => void;
   markings: IMarking[];
-  pageStore: IPageStore;
+  page: IPageStore;
   sidePeekVisible: boolean;
   handleEditorReady: (value: boolean) => void;
   handleReadOnlyEditorReady: (value: boolean) => void;
@@ -44,15 +40,12 @@ type Props = {
 
 export const PageEditorBody: React.FC<Props> = observer((props) => {
   const {
-    control,
     handleReadOnlyEditorReady,
     handleEditorReady,
     editorRef,
     markings,
     readOnlyEditorRef,
-    handleSubmit,
-    pageStore,
-    swrPageDetails,
+    page,
     sidePeekVisible,
     updateMarkings,
   } = props;
@@ -68,11 +61,19 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
   } = useMember();
   // derived values
   const workspaceId = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "" : "";
-  const pageTitle = pageStore?.name ?? "";
-  const pageDescription = pageStore?.description_html;
-  const { description_html, isContentEditable, updateTitle, isSubmitting, setIsSubmitting } = pageStore;
+  const pageId = page?.id;
+  const pageTitle = page?.name ?? "";
+  const pageDescription = page?.description_html;
+  const { isContentEditable, updateTitle, setIsSubmitting } = page;
   const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : [];
   const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
+  // project-description
+  const { handleDescriptionChange, isDescriptionReady, pageDescriptionYJS } = usePageDescription({
+    editorRef,
+    page,
+    projectId,
+    workspaceSlug,
+  });
   // use-mention
   const { mentionHighlights, mentionSuggestions } = useMention({
     workspaceSlug: workspaceSlug?.toString() ?? "",
@@ -86,11 +87,11 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
   // issue-embed
   const { fetchIssues } = useIssueEmbed(workspaceSlug?.toString() ?? "", projectId?.toString() ?? "");
 
-  const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
-
   useEffect(() => {
-    updateMarkings(description_html ?? "<p></p>");
-  }, [description_html, updateMarkings]);
+    updateMarkings(pageDescription ?? "<p></p>");
+  }, [pageDescription, updateMarkings]);
+
+  if (pageId === undefined || !pageDescriptionYJS || !isDescriptionReady) return <PageContentLoader />;
 
   const handleIssueSearch = async (searchQuery: string) => {
     const response = await fetchIssues(searchQuery);
@@ -131,53 +132,42 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
             />
           </div>
           {isContentEditable ? (
-            <Controller
-              name="description_html"
-              control={control}
-              render={({ field: { onChange } }) => (
-                <DocumentEditorWithRef
-                  fileHandler={{
-                    cancel: fileService.cancelUpload,
-                    delete: fileService.getDeleteImageFunction(workspaceId),
-                    restore: fileService.getRestoreImageFunction(workspaceId),
-                    upload: fileService.getUploadFileFunction(workspaceSlug as string, setIsSubmitting),
-                  }}
-                  handleEditorReady={handleEditorReady}
-                  initialValue={pageDescription ?? "<p></p>"}
-                  value={swrPageDetails?.description_html ?? "<p></p>"}
-                  ref={editorRef}
-                  containerClassName="p-0 pb-64"
-                  editorClassName="lg:px-10 pl-8"
-                  onChange={(_description_json, description_html) => {
-                    setIsSubmitting("submitting");
-                    setShowAlert(true);
-                    onChange(description_html);
-                    handleSubmit();
-                  }}
-                  mentionHandler={{
-                    highlights: mentionHighlights,
-                    suggestions: mentionSuggestions,
-                  }}
-                  embedHandler={{
-                    issue: {
-                      searchCallback: async (query) =>
-                        new Promise((resolve) => {
-                          setTimeout(async () => {
-                            const response = await handleIssueSearch(query);
-                            resolve(response);
-                          }, 300);
-                        }),
-                      widgetCallback: (issueId) => (
-                        <IssueEmbedCard
-                          issueId={issueId}
-                          projectId={projectId?.toString() ?? ""}
-                          workspaceSlug={workspaceSlug?.toString() ?? ""}
-                        />
-                      ),
-                    },
-                  }}
-                />
-              )}
+            <DocumentEditorWithRef
+              id={pageId}
+              fileHandler={{
+                cancel: fileService.cancelUpload,
+                delete: fileService.getDeleteImageFunction(workspaceId),
+                restore: fileService.getRestoreImageFunction(workspaceId),
+                upload: fileService.getUploadFileFunction(workspaceSlug as string, setIsSubmitting),
+              }}
+              handleEditorReady={handleEditorReady}
+              value={pageDescriptionYJS}
+              ref={editorRef}
+              containerClassName="p-0 pb-64"
+              editorClassName="pl-10"
+              onChange={handleDescriptionChange}
+              mentionHandler={{
+                highlights: mentionHighlights,
+                suggestions: mentionSuggestions,
+              }}
+              embedHandler={{
+                issue: {
+                  searchCallback: async (query) =>
+                    new Promise((resolve) => {
+                      setTimeout(async () => {
+                        const response = await handleIssueSearch(query);
+                        resolve(response);
+                      }, 300);
+                    }),
+                  widgetCallback: (issueId) => (
+                    <IssueEmbedCard
+                      issueId={issueId}
+                      projectId={projectId?.toString() ?? ""}
+                      workspaceSlug={workspaceSlug?.toString() ?? ""}
+                    />
+                  ),
+                },
+              }}
             />
           ) : (
             <DocumentReadOnlyEditorWithRef
@@ -185,7 +175,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
               initialValue={pageDescription ?? "<p></p>"}
               handleEditorReady={handleReadOnlyEditorReady}
               containerClassName="p-0 pb-64 border-none"
-              editorClassName="lg:px-10 pl-8"
+              editorClassName="pl-10"
               mentionHandler={{
                 highlights: mentionHighlights,
               }}

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

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Lock, RefreshCw, Sparkle } from "lucide-react";
+import { Lock, Sparkle } from "lucide-react";
 // editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/document-editor";
 // ui
@@ -9,7 +9,6 @@ import { ArchiveIcon } from "@plane/ui";
 import { GptAssistantPopover } from "@/components/core";
 import { PageInfoPopover, PageOptionsDropdown } from "@/components/pages";
 // helpers
-import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -19,20 +18,19 @@ import { IPageStore } from "@/store/pages/page.store";
 type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   handleDuplicatePage: () => void;
-  isSyncing: boolean;
-  pageStore: IPageStore;
+  page: IPageStore;
   projectId: string;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
 };
 
 export const PageExtraOptions: React.FC<Props> = observer((props) => {
-  const { editorRef, handleDuplicatePage, isSyncing, pageStore, projectId, readOnlyEditorRef } = props;
+  const { editorRef, handleDuplicatePage, page, projectId, readOnlyEditorRef } = props;
   // states
   const [gptModalOpen, setGptModal] = useState(false);
   // store hooks
   const { config } = useInstance();
   // derived values
-  const { archived_at, isContentEditable, isSubmitting, is_locked } = pageStore;
+  const { archived_at, isContentEditable, is_locked } = page;
 
   const handleAiAssistance = async (response: string) => {
     if (!editorRef) return;
@@ -41,22 +39,6 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
 
   return (
     <div className="flex flex-grow items-center justify-end gap-3">
-      {isContentEditable && (
-        <div
-          className={cn("fade-in flex items-center gap-x-2 transition-all duration-300", {
-            "fade-out": isSubmitting === "saved",
-          })}
-        >
-          {isSubmitting === "submitting" && <RefreshCw className="h-4 w-4 stroke-custom-text-300" />}
-          <span className="text-sm text-custom-text-300">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
-        </div>
-      )}
-      {isSyncing && (
-        <div className="flex items-center gap-x-2">
-          <RefreshCw className="h-4 w-4 stroke-custom-text-300" />
-          <span className="text-sm text-custom-text-300">Syncing...</span>
-        </div>
-      )}
       {is_locked && (
         <div className="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">
           <Lock className="h-3 w-3" />
@@ -93,11 +75,11 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
           className="!min-w-[38rem]"
         />
       )}
-      <PageInfoPopover pageStore={pageStore} />
+      <PageInfoPopover page={page} />
       <PageOptionsDropdown
         editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
         handleDuplicatePage={handleDuplicatePage}
-        pageStore={pageStore}
+        page={page}
       />
     </div>
   );

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

@@ -7,11 +7,11 @@ import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { IPageStore } from "@/store/pages/page.store";
 
 type Props = {
-  pageStore: IPageStore;
+  page: IPageStore;
 };
 
 export const PageInfoPopover: React.FC<Props> = (props) => {
-  const { pageStore } = props;
+  const { page } = props;
   // states
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
   // refs
@@ -22,7 +22,7 @@ export const PageInfoPopover: React.FC<Props> = (props) => {
     placement: "bottom-start",
   });
   // derived values
-  const { created_at, updated_at } = pageStore;
+  const { created_at, updated_at } = page;
 
   return (
     <div onMouseEnter={() => setIsPopoverOpen(true)} onMouseLeave={() => setIsPopoverOpen(false)}>

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

@@ -11,9 +11,8 @@ type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
   handleDuplicatePage: () => void;
-  isSyncing: boolean;
   markings: IMarking[];
-  pageStore: IPageStore;
+  page: IPageStore;
   projectId: string;
   sidePeekVisible: boolean;
   setSidePeekVisible: (sidePeekState: boolean) => void;
@@ -29,14 +28,13 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
     markings,
     readOnlyEditorReady,
     handleDuplicatePage,
-    isSyncing,
-    pageStore,
+    page,
     projectId,
     sidePeekVisible,
     setSidePeekVisible,
   } = props;
   // derived values
-  const { isContentEditable } = pageStore;
+  const { isContentEditable } = page;
   // page filters
   const { isFullWidth } = usePageFilters();
 
@@ -57,8 +55,7 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
         <PageExtraOptions
           editorRef={editorRef}
           handleDuplicatePage={handleDuplicatePage}
-          isSyncing={isSyncing}
-          pageStore={pageStore}
+          page={page}
           projectId={projectId}
           readOnlyEditorRef={readOnlyEditorRef}
         />

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

@@ -16,11 +16,11 @@ import { IPageStore } from "@/store/pages/page.store";
 type Props = {
   editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
   handleDuplicatePage: () => void;
-  pageStore: IPageStore;
+  page: IPageStore;
 };
 
 export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
-  const { editorRef, handleDuplicatePage, pageStore } = props;
+  const { editorRef, handleDuplicatePage, page } = props;
   // store values
   const {
     archived_at,
@@ -33,7 +33,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
     canCurrentUserDuplicatePage,
     canCurrentUserLockPage,
     restore,
-  } = pageStore;
+  } = page;
   // store hooks
   const { workspaceSlug, projectId } = useAppRouter();
   // page filters

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

@@ -13,9 +13,8 @@ type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
   handleDuplicatePage: () => void;
-  isSyncing: boolean;
   markings: IMarking[];
-  pageStore: IPageStore;
+  page: IPageStore;
   projectId: string;
   sidePeekVisible: boolean;
   setSidePeekVisible: (sidePeekState: boolean) => void;
@@ -31,14 +30,13 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
     markings,
     readOnlyEditorReady,
     handleDuplicatePage,
-    isSyncing,
-    pageStore,
+    page,
     projectId,
     sidePeekVisible,
     setSidePeekVisible,
   } = props;
   // derived values
-  const { isContentEditable } = pageStore;
+  const { isContentEditable } = page;
   // page filters
   const { isFullWidth } = usePageFilters();
 
@@ -67,8 +65,7 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
         <PageExtraOptions
           editorRef={editorRef}
           handleDuplicatePage={handleDuplicatePage}
-          isSyncing={isSyncing}
-          pageStore={pageStore}
+          page={page}
           projectId={projectId}
           readOnlyEditorRef={readOnlyEditorRef}
         />
@@ -81,8 +78,7 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
           readOnlyEditorReady={readOnlyEditorReady}
           markings={markings}
           handleDuplicatePage={handleDuplicatePage}
-          isSyncing={isSyncing}
-          pageStore={pageStore}
+          page={page}
           projectId={projectId}
           sidePeekVisible={sidePeekVisible}
           setSidePeekVisible={setSidePeekVisible}

web/components/pages/editor/title.tsx

@@ -33,7 +33,6 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
       ) : (
         <>
           <TextArea
-            onChange={(e) => updateTitle(e.target.value)}
             className="w-full bg-custom-background text-[1.75rem] font-semibold outline-none p-0 border-none resize-none rounded-none"
             style={{
               lineHeight: "1.2",
@@ -46,6 +45,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
               }
             }}
             value={title}
+            onChange={(e) => updateTitle(e.target.value)}
             maxLength={255}
             onFocus={() => setIsLengthVisible(true)}
             onBlur={() => setIsLengthVisible(false)}

web/components/pages/index.ts

@@ -4,6 +4,5 @@ export * from "./header";
 export * from "./list";
 export * from "./loaders";
 export * from "./modals";
-export * from "./page-detail";
 export * from "./pages-list-main-content";
 export * from "./pages-list-view";

web/components/pages/loaders/page-content-loader.tsx

@@ -2,27 +2,116 @@
 import { Loader } from "@plane/ui";
 
 export const PageContentLoader = () => (
-  <div className="flex">
-    <div className="w-[5%]" />
-    <Loader className="flex-shrink-0 flex-grow">
-      <div className="mt-10 space-y-2">
-        <Loader.Item height="20px" />
-        <Loader.Item height="20px" width="80%" />
-        <Loader.Item height="20px" width="80%" />
+  <div className="relative w-full h-full flex flex-col">
+    {/* header */}
+    <div className="px-4 flex-shrink-0 relative flex items-center justify-between h-12 border-b border-custom-border-100">
+      {/* left options */}
+      <Loader className="flex-shrink-0 w-[280px]">
+        <Loader.Item width="26px" height="26px" />
+      </Loader>
+
+      {/* editor options */}
+      <div className="w-full relative flex items-center divide-x divide-custom-border-100">
+        <Loader className="relative flex items-center gap-1 pr-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
+        <Loader className="relative flex items-center gap-1 px-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
+        <Loader className="relative flex items-center gap-1 px-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
+        <Loader className="relative flex items-center gap-1 pl-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
       </div>
-      <div className="mt-12 space-y-10">
-        {Array.from(Array(4)).map((i) => (
-          <div key={i}>
-            <Loader.Item height="25px" width="20%" />
-            <div className="mt-5 space-y-3">
-              <Loader.Item height="15px" width="40%" />
-              <Loader.Item height="15px" width="30%" />
-              <Loader.Item height="15px" width="35%" />
+
+      {/* right options */}
+      <Loader className="w-full relative flex justify-end items-center gap-1">
+        <Loader.Item width="60px" height="26px" />
+        <Loader.Item width="40px" height="26px" />
+        <Loader.Item width="26px" height="26px" />
+        <Loader.Item width="26px" height="26px" />
+      </Loader>
+    </div>
+
+    {/* content */}
+    <div className="px-4 w-full h-full overflow-hidden relative flex">
+      {/* table of content loader */}
+      <div className="flex-shrink-0 w-[280px] pr-5 py-5">
+        <Loader className="w-full space-y-4">
+          <Loader.Item width="100%" height="24px" />
+          <div className="space-y-2">
+            <Loader.Item width="60%" height="12px" />
+            <div className="ml-6 space-y-2">
+              <Loader.Item width="80%" height="12px" />
+              <Loader.Item width="100%" height="12px" />
+            </div>
+            <Loader.Item width="60%" height="12px" />
+            <div className="ml-6 space-y-2">
+              <Loader.Item width="80%" height="12px" />
+              <Loader.Item width="100%" height="12px" />
+            </div>
+            <Loader.Item width="100%" height="12px" />
+            <Loader.Item width="60%" height="12px" />
+            <div className="ml-6 space-y-2">
+              <Loader.Item width="80%" height="12px" />
+              <Loader.Item width="100%" height="12px" />
+            </div>
+            <Loader.Item width="80%" height="12px" />
+            <Loader.Item width="100%" height="12px" />
+          </div>
+        </Loader>
+      </div>
+
+      {/* editor loader */}
+      <div className="w-full h-full py-5">
+        <Loader className="relative space-y-4">
+          <Loader.Item width="50%" height="36px" />
+          <div className="space-y-2">
+            <div className="py-2">
+              <Loader.Item width="100%" height="36px" />
+            </div>
+            <Loader.Item width="80%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <Loader.Item width="30px" height="30px" />
+              <Loader.Item width="30%" height="22px" />
+            </div>
+            <div className="py-2">
+              <Loader.Item width="60%" height="36px" />
+            </div>
+            <Loader.Item width="70%" height="22px" />
+            <Loader.Item width="30%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <Loader.Item width="30px" height="30px" />
+              <Loader.Item width="30%" height="22px" />
+            </div>
+            <div className="py-2">
+              <Loader.Item width="50%" height="30px" />
+            </div>
+            <Loader.Item width="100%" height="22px" />
+            <div className="py-2">
+              <Loader.Item width="30%" height="30px" />
+            </div>
+            <Loader.Item width="30%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <div className="py-2">
+                <Loader.Item width="30px" height="30px" />
+              </div>
+              <Loader.Item width="30%" height="22px" />
             </div>
           </div>
-        ))}
+        </Loader>
       </div>
-    </Loader>
-    <div className="w-[5%]" />
+    </div>
   </div>
 );

web/components/pages/modals/delete-page-modal.tsx

@@ -23,11 +23,11 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
   // store hooks
   const { removePage } = useProjectPages(projectId);
   const { capturePageEvent } = useEventTracker();
-  const pageStore = usePage(pageId);
+  const page = usePage(pageId);
 
-  if (!pageStore) return null;
+  if (!page) return null;
 
-  const { name } = pageStore;
+  const { name } = page;
 
   const handleClose = () => {
     setIsDeleting(false);
@@ -41,7 +41,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
         capturePageEvent({
           eventName: PAGE_DELETED,
           payload: {
-            ...pageStore,
+            ...page,
             state: "SUCCESS",
           },
         });
@@ -56,7 +56,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
         capturePageEvent({
           eventName: PAGE_DELETED,
           payload: {
-            ...pageStore,
+            ...page,
             state: "FAILED",
           },
         });

web/components/pages/page-detail/index.ts

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

web/components/pages/page-detail/loader.tsx

@@ -1,118 +0,0 @@
-import { FC } from "react";
-// components/ui
-import { Loader } from "@plane/ui";
-
-export const PageDetailRootLoader: FC = () => (
-  <div className=" relative w-full h-full flex flex-col">
-    {/* header */}
-    <div className="px-4 flex-shrink-0 relative flex items-center justify-between h-12 border-b border-custom-border-100">
-      {/* left options */}
-      <Loader className="flex-shrink-0 w-[280px]">
-        <Loader.Item width="26px" height="26px" />
-      </Loader>
-
-      {/* editor options */}
-      <div className="w-full relative flex items-center divide-x divide-custom-border-100">
-        <Loader className="relative flex items-center gap-1 pr-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
-        <Loader className="relative flex items-center gap-1 px-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
-        <Loader className="relative flex items-center gap-1 px-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
-        <Loader className="relative flex items-center gap-1 pl-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
-      </div>
-
-      {/* right options */}
-      <Loader className="w-full relative flex justify-end items-center gap-1">
-        <Loader.Item width="60px" height="26px" />
-        <Loader.Item width="40px" height="26px" />
-        <Loader.Item width="26px" height="26px" />
-        <Loader.Item width="26px" height="26px" />
-      </Loader>
-    </div>
-
-    {/* content */}
-    <div className="px-4 w-full h-full overflow-hidden relative flex">
-      {/* table of content loader */}
-      <div className="flex-shrink-0 w-[280px] pr-5 py-5">
-        <Loader className="w-full space-y-4">
-          <Loader.Item width="100%" height="24px" />
-          <div className="space-y-2">
-            <Loader.Item width="60%" height="12px" />
-            <div className="ml-6 space-y-2">
-              <Loader.Item width="80%" height="12px" />
-              <Loader.Item width="100%" height="12px" />
-            </div>
-            <Loader.Item width="60%" height="12px" />
-            <div className="ml-6 space-y-2">
-              <Loader.Item width="80%" height="12px" />
-              <Loader.Item width="100%" height="12px" />
-            </div>
-            <Loader.Item width="100%" height="12px" />
-            <Loader.Item width="60%" height="12px" />
-            <div className="ml-6 space-y-2">
-              <Loader.Item width="80%" height="12px" />
-              <Loader.Item width="100%" height="12px" />
-            </div>
-            <Loader.Item width="80%" height="12px" />
-            <Loader.Item width="100%" height="12px" />
-          </div>
-        </Loader>
-      </div>
-
-      {/* editor loader */}
-      <div className="w-full h-full py-5">
-        <Loader className="relative space-y-4">
-          <Loader.Item width="50%" height="36px" />
-          <div className="space-y-2">
-            <div className="py-2">
-              <Loader.Item width="100%" height="36px" />
-            </div>
-            <Loader.Item width="80%" height="22px" />
-            <div className="relative flex items-center gap-2">
-              <Loader.Item width="30px" height="30px" />
-              <Loader.Item width="30%" height="22px" />
-            </div>
-            <div className="py-2">
-              <Loader.Item width="60%" height="36px" />
-            </div>
-            <Loader.Item width="70%" height="22px" />
-            <Loader.Item width="30%" height="22px" />
-            <div className="relative flex items-center gap-2">
-              <Loader.Item width="30px" height="30px" />
-              <Loader.Item width="30%" height="22px" />
-            </div>
-            <div className="py-2">
-              <Loader.Item width="50%" height="30px" />
-            </div>
-            <Loader.Item width="100%" height="22px" />
-            <div className="py-2">
-              <Loader.Item width="30%" height="30px" />
-            </div>
-            <Loader.Item width="30%" height="22px" />
-            <div className="relative flex items-center gap-2">
-              <div className="py-2">
-                <Loader.Item width="30px" height="30px" />
-              </div>
-              <Loader.Item width="30%" height="22px" />
-            </div>
-          </div>
-        </Loader>
-      </div>
-    </div>
-  </div>
-);

web/components/pages/page-detail/root.tsx

@@ -1,54 +0,0 @@
-import { FC, Fragment } from "react";
-import { observer } from "mobx-react-lite";
-// hooks
-import { PageHead } from "@/components/core";
-import { useProjectPages, usePage } from "@/hooks/store";
-// components
-import { PageDetailRootLoader } from "./";
-
-type TPageDetailRoot = {
-  projectId: string;
-  pageId: string;
-};
-
-export const PageDetailRoot: FC<TPageDetailRoot> = observer((props) => {
-  const { projectId, pageId } = props;
-  // hooks
-  const { loader } = useProjectPages(projectId);
-  const { id, name } = usePage(pageId);
-
-  if (loader === "init-loader") return <PageDetailRootLoader />;
-
-  if (!id) return <div className="">No page is available.</div>;
-
-  return (
-    <Fragment>
-      <PageHead title={name || "Pages"} />
-
-      <div className="relative w-full h-full flex flex-col">
-        <div className="flex-shrink-0 px-4 relative flex items-center justify-between h-12 border-b border-custom-border-100">
-          {/* header left container */}
-          <div className="flex-shrink-0 w-[280px]">Icon</div>
-          {/* header editor tool container */}
-          <div className="w-full relative hidden md:flex items-center divide-x divide-custom-border-100 ">
-            Editor keys
-          </div>
-          {/* header right operations container */}
-          <div className="w-full relative flex justify-end">right saved</div>
-        </div>
-
-        {/* editor container for small screens */}
-        <div className="px-4 h-12 relative flex md:hidden items-center border-b border-custom-border-100">
-          Editor keys
-        </div>
-
-        <div className="px-4 w-full h-full overflow-hidden relative flex">
-          {/* editor table of content content container */}
-          <div className="flex-shrink-0 w-[280px] pr-5 py-5">Table of content</div>
-          {/* editor container */}
-          <div className="w-full h-full py-5">Editor Container</div>
-        </div>
-      </div>
-    </Fragment>
-  );
-});

web/components/project/card-list.tsx

@@ -16,9 +16,11 @@ export const ProjectCardList = observer(() => {
   // store hooks
   const { toggleCreateProjectModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
-  const { workspaceProjectIds, filteredProjectIds, getProjectById } = useProject();
+  const { workspaceProjectIds, filteredProjectIds, getProjectById, loader } = useProject();
   const { searchQuery, currentWorkspaceDisplayFilters } = useProjectFilter();
 
+  if (!filteredProjectIds || !workspaceProjectIds || loader) return <ProjectsLoader />;
+
   if (workspaceProjectIds?.length === 0 && !currentWorkspaceDisplayFilters?.archived_projects)
     return (
       <EmptyState
@@ -30,8 +32,6 @@ export const ProjectCardList = observer(() => {
       />
     );
 
-  if (!filteredProjectIds) return <ProjectsLoader />;
-
   if (filteredProjectIds.length === 0)
     return (
       <div className="grid h-full w-full place-items-center">

web/components/project/sidebar-list-item.tsx

@@ -1,8 +1,13 @@
-import { useRef, useState } from "react";
-import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { createRoot } from "react-dom/client";
 import {
   MoreVertical,
   PenSquare,
@@ -28,6 +33,7 @@ import {
   ContrastIcon,
   LayersIcon,
   setPromiseToast,
+  DropIndicator,
 } from "@plane/ui";
 import { LeaveProjectModal, ProjectLogo, PublishProjectModal } from "@/components/project";
 import { EUserProjectRoles } from "@/constants/project";
@@ -36,17 +42,23 @@ import { cn } from "@/helpers/common.helper";
 import { useAppTheme, useEventTracker, useProject } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+import { HIGHLIGHT_CLASS, highlightIssueOnDrop } from "../issues/issue-layouts/utils";
 // helpers
 
 // components
 
 type Props = {
   projectId: string;
-  provided?: DraggableProvided;
-  snapshot?: DraggableStateSnapshot;
   handleCopyText: () => void;
-  shortContextMenu?: boolean;
+  handleOnProjectDrop?: (
+    sourceId: string | undefined,
+    destinationId: string | undefined,
+    shouldDropAtEnd: boolean
+  ) => void;
+  projectListType: "JOINED" | "FAVORITES";
   disableDrag?: boolean;
+  disableDrop?: boolean;
+  isLastChild: boolean;
 };
 
 const navigation = (workspaceSlug: string, projectId: string) => [
@@ -89,7 +101,8 @@ const navigation = (workspaceSlug: string, projectId: string) => [
 
 export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { projectId, provided, snapshot, handleCopyText, shortContextMenu = false, disableDrag } = props;
+  const { projectId, handleCopyText, disableDrag, disableDrop, isLastChild, handleOnProjectDrop, projectListType } =
+    props;
   // store hooks
   const { sidebarCollapsed: isCollapsed, toggleSidebar } = useAppTheme();
   const { setTrackElement } = useEventTracker();
@@ -99,8 +112,12 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
   const [publishModalOpen, setPublishModal] = useState(false);
   const [isMenuActive, setIsMenuActive] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
   // refs
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
+  const projectRef = useRef<HTMLDivElement | null>(null);
+  const dragHandleRef = useRef<HTMLButtonElement | null>(null);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId: URLProjectId } = router.query;
@@ -160,7 +177,97 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
     }
   };
 
+  useEffect(() => {
+    const element = projectRef.current;
+    const dragHandleElement = dragHandleRef.current;
+
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => !disableDrag && !isCollapsed,
+        dragHandle: dragHandleElement ?? undefined,
+        getInitialData: () => ({ id: projectId, dragInstanceId: "PROJECTS" }),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          // Add a custom drag image
+          setCustomNativeDragPreview({
+            getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
+            render: ({ container }) => {
+              const root = createRoot(container);
+              root.render(
+                <div className="rounded flex items-center bg-custom-background-100 text-sm p-1 pr-2">
+                  <div className="flex items-center h-7 w-5 grid place-items-center flex-shrink-0">
+                    {project && <ProjectLogo logo={project?.logo_props} />}
+                  </div>
+                  <p className="truncate text-custom-sidebar-text-200">{project?.name}</p>
+                </div>
+              );
+              return () => root.unmount();
+            },
+            nativeSetDragImage,
+          });
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) =>
+          !disableDrop && source?.data?.id !== projectId && source?.data?.dragInstanceId === "PROJECTS",
+        getData: ({ input, element }) => {
+          const data = { id: projectId };
+
+          // attach instruction for last in list
+          return attachInstruction(data, {
+            input,
+            element,
+            currentLevel: 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+          });
+        },
+        onDrag: ({ self }) => {
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          // check if the highlight is to be shown above or below
+          setInstruction(
+            extractedInstruction
+              ? extractedInstruction === "reorder-below" && isLastChild
+                ? "DRAG_BELOW"
+                : "DRAG_OVER"
+              : undefined
+          );
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: ({ self, source }) => {
+          setInstruction(undefined);
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          const currentInstruction = extractedInstruction
+            ? extractedInstruction === "reorder-below" && isLastChild
+              ? "DRAG_BELOW"
+              : "DRAG_OVER"
+            : undefined;
+          if (!currentInstruction) return;
+
+          const sourceId = source?.data?.id as string | undefined;
+          const destinationId = self?.data?.id as string | undefined;
+
+          handleOnProjectDrop && handleOnProjectDrop(sourceId, destinationId, currentInstruction === "DRAG_BELOW");
+
+          highlightIssueOnDrop(`sidebar-${sourceId}-${projectListType}`);
+        },
+      })
+    );
+  }, [projectRef?.current, dragHandleRef?.current, projectId, isLastChild, projectListType, handleOnProjectDrop]);
+
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+  useOutsideClickDetector(projectRef, () => projectRef?.current?.classList?.remove(HIGHLIGHT_CLASS));
 
   if (!project) return null;
 
@@ -168,48 +275,48 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
     <>
       <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
       <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={handleLeaveProjectModalClose} />
-      <Disclosure key={`${project.id} ${URLProjectId}`} defaultOpen={URLProjectId === project.id}>
+      <Disclosure key={`${project.id}_${URLProjectId}`} ref={projectRef} defaultOpen={URLProjectId === project.id}>
         {({ open }) => (
-          <>
+          <div
+            id={`sidebar-${projectId}-${projectListType}`}
+            className={cn("rounded relative", { "bg-custom-sidebar-background-80 opacity-60": isDragging })}
+          >
+            <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
             <div
               className={cn(
-                "group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80",
+                "group relative flex w-full items-center rounded-md py-1 text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80",
                 {
-                  "opacity-60": snapshot?.isDragging,
                   "bg-custom-sidebar-background-80": isMenuActive,
+                  "pl-8": disableDrag,
                 }
               )}
             >
-              {provided && !disableDrag && (
+              {!disableDrag && (
                 <Tooltip
                   isMobile={isMobile}
                   tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
                   position="top-right"
+                  disabled={isDragging}
                 >
                   <button
                     type="button"
                     className={cn(
-                      "absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400",
+                      "flex opacity-0 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 ml-2",
                       {
-                        "group-hover:flex": !isCollapsed,
+                        "group-hover:opacity-100": !isCollapsed,
                         "cursor-not-allowed opacity-60": project.sort_order === null,
                         flex: isMenuActive,
+                        hidden: isCollapsed,
                       }
                     )}
-                    {...provided?.dragHandleProps}
+                    ref={dragHandleRef}
                   >
-                    <MoreVertical className="h-3.5" />
+                    <MoreVertical className="-ml-3 h-3.5" />
                     <MoreVertical className="-ml-5 h-3.5" />
                   </button>
                 </Tooltip>
               )}
-              <Tooltip
-                tooltipContent={`${project.name}`}
-                position="right"
-                className="ml-2"
-                disabled={!isCollapsed}
-                isMobile={isMobile}
-              >
+              <Tooltip tooltipContent={`${project.name}`} position="right" disabled={!isCollapsed} isMobile={isMobile}>
                 <Disclosure.Button
                   as="div"
                   className={cn(
@@ -220,11 +327,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   )}
                 >
                   <div
-                    className={cn("flex w-full flex-grow items-center gap-1 truncate", {
+                    className={cn("flex w-full flex-grow items-center gap-1 truncate -ml-1", {
                       "justify-center": isCollapsed,
                     })}
                   >
-                    <div className="grid h-7 w-7 place-items-center flex-shrink-0">
+                    <div className="h-7 w-5 grid place-items-center flex-shrink-0">
                       <ProjectLogo logo={project.logo_props} />
                     </div>
                     {!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
@@ -380,7 +487,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                 })}
               </Disclosure.Panel>
             </Transition>
-          </>
+            {isLastChild && <DropIndicator isVisible={instruction === "DRAG_BELOW"} />}
+          </div>
         )}
       </Disclosure>
     </>

web/components/project/sidebar-list.tsx

@@ -1,5 +1,6 @@
 import { useState, FC, useRef, useEffect } from "react";
-import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea/dnd";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { ChevronDown, ChevronRight, Plus } from "lucide-react";
@@ -54,21 +55,28 @@ export const ProjectSidebarList: FC = observer(() => {
     });
   };
 
-  const onDragEnd = (result: DropResult) => {
-    const { source, destination, draggableId } = result;
-    if (!destination || !workspaceSlug) return;
-    if (source.index === destination.index) return;
+  const handleOnProjectDrop = (
+    sourceId: string | undefined,
+    destinationId: string | undefined,
+    shouldDropAtEnd: boolean
+  ) => {
+    if (!sourceId || !destinationId || !workspaceSlug) return;
+    if (sourceId === destinationId) return;
 
     const joinedProjectsList: IProject[] = [];
     joinedProjects.map((projectId) => {
       const projectDetails = getProjectById(projectId);
       if (projectDetails) joinedProjectsList.push(projectDetails);
     });
+
+    const sourceIndex = joinedProjects.indexOf(sourceId);
+    const destinationIndex = shouldDropAtEnd ? joinedProjects.length : joinedProjects.indexOf(destinationId);
+
     if (joinedProjectsList.length <= 0) return;
 
-    const updatedSortOrder = orderJoinedProjects(source.index, destination.index, draggableId, joinedProjectsList);
+    const updatedSortOrder = orderJoinedProjects(sourceIndex, destinationIndex, sourceId, joinedProjectsList);
     if (updatedSortOrder != undefined)
-      updateProjectView(workspaceSlug.toString(), draggableId, { sort_order: updatedSortOrder }).catch(() => {
+      updateProjectView(workspaceSlug.toString(), sourceId, { sort_order: updatedSortOrder }).catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
@@ -98,7 +106,21 @@ export const ProjectSidebarList: FC = observer(() => {
         currentContainerRef.removeEventListener("scroll", handleScroll);
       }
     };
-  }, []);
+  }, [containerRef]);
+
+  useEffect(() => {
+    const element = containerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+        canScroll: ({ source }) => source?.data?.dragInstanceId === "PROJECTS",
+        getAllowedAxis: () => "vertical",
+      })
+    );
+  }, [containerRef]);
 
   return (
     <>
@@ -123,156 +145,117 @@ export const ProjectSidebarList: FC = observer(() => {
           }
         )}
       >
-        <DragDropContext onDragEnd={onDragEnd}>
-          <Droppable droppableId="favorite-projects">
-            {(provided) => (
-              <div ref={provided.innerRef} {...provided.droppableProps}>
-                {favoriteProjects && favoriteProjects.length > 0 && (
-                  <Disclosure as="div" className="flex flex-col" defaultOpen>
-                    {({ open }) => (
-                      <>
-                        {!isCollapsed && (
-                          <div className="group flex w-full items-center justify-between rounded p-1.5 text-xs text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80">
-                            <Disclosure.Button
-                              as="button"
-                              type="button"
-                              className="group flex w-full items-center gap-1 whitespace-nowrap rounded px-1.5 text-left text-sm font-semibold text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80"
-                            >
-                              Favorites
-                              {open ? (
-                                <ChevronDown className="h-3.5 w-3.5" />
-                              ) : (
-                                <ChevronRight className="h-3.5 w-3.5" />
-                              )}
-                            </Disclosure.Button>
-                            {isAuthorizedUser && (
-                              <button
-                                className="opacity-0 group-hover:opacity-100"
-                                onClick={() => {
-                                  setTrackElement("APP_SIDEBAR_FAVORITES_BLOCK");
-                                  setIsFavoriteProjectCreate(true);
-                                  setIsProjectModalOpen(true);
-                                }}
-                              >
-                                <Plus className="h-3 w-3" />
-                              </button>
-                            )}
-                          </div>
-                        )}
-                        <Transition
-                          enter="transition duration-100 ease-out"
-                          enterFrom="transform scale-95 opacity-0"
-                          enterTo="transform scale-100 opacity-100"
-                          leave="transition duration-75 ease-out"
-                          leaveFrom="transform scale-100 opacity-100"
-                          leaveTo="transform scale-95 opacity-0"
+        <div>
+          {favoriteProjects && favoriteProjects.length > 0 && (
+            <Disclosure as="div" className="flex flex-col" defaultOpen>
+              {({ open }) => (
+                <>
+                  {!isCollapsed && (
+                    <div className="group flex w-full items-center justify-between rounded p-1.5 text-xs text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80">
+                      <Disclosure.Button
+                        as="button"
+                        type="button"
+                        className="group flex w-full items-center gap-1 whitespace-nowrap rounded px-1.5 text-left text-sm font-semibold text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80"
+                      >
+                        Favorites
+                        {open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
+                      </Disclosure.Button>
+                      {isAuthorizedUser && (
+                        <button
+                          className="opacity-0 group-hover:opacity-100"
+                          onClick={() => {
+                            setTrackElement("APP_SIDEBAR_FAVORITES_BLOCK");
+                            setIsFavoriteProjectCreate(true);
+                            setIsProjectModalOpen(true);
+                          }}
                         >
-                          <Disclosure.Panel as="div" className="space-y-2">
-                            {favoriteProjects.map((projectId, index) => (
-                              <Draggable
-                                key={projectId}
-                                draggableId={projectId}
-                                index={index}
-                                // FIXME refactor the Draggable to a different component
-                                //isDragDisabled={!project.is_member}
-                              >
-                                {(provided, snapshot) => (
-                                  <div ref={provided.innerRef} {...provided.draggableProps}>
-                                    <ProjectSidebarListItem
-                                      key={projectId}
-                                      projectId={projectId}
-                                      provided={provided}
-                                      snapshot={snapshot}
-                                      handleCopyText={() => handleCopyText(projectId)}
-                                      shortContextMenu
-                                      disableDrag
-                                    />
-                                  </div>
-                                )}
-                              </Draggable>
-                            ))}
-                          </Disclosure.Panel>
-                        </Transition>
-                        {provided.placeholder}
-                      </>
-                    )}
-                  </Disclosure>
-                )}
-              </div>
-            )}
-          </Droppable>
-        </DragDropContext>
-        <DragDropContext onDragEnd={onDragEnd}>
-          <Droppable droppableId="joined-projects">
-            {(provided) => (
-              <div ref={provided.innerRef} {...provided.droppableProps}>
-                {joinedProjects && joinedProjects.length > 0 && (
-                  <Disclosure as="div" className="flex flex-col" defaultOpen>
-                    {({ open }) => (
-                      <>
-                        {!isCollapsed && (
-                          <div className="group flex w-full items-center justify-between rounded p-1.5 text-xs text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80">
-                            <Disclosure.Button
-                              as="button"
-                              type="button"
-                              className="group flex w-full items-center gap-1 whitespace-nowrap rounded px-1.5 text-left text-sm font-semibold text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80"
-                            >
-                              Your projects
-                              {open ? (
-                                <ChevronDown className="h-3.5 w-3.5" />
-                              ) : (
-                                <ChevronRight className="h-3.5 w-3.5" />
-                              )}
-                            </Disclosure.Button>
-                            {isAuthorizedUser && (
-                              <button
-                                className="opacity-0 group-hover:opacity-100"
-                                onClick={() => {
-                                  setTrackElement("Sidebar");
-                                  setIsFavoriteProjectCreate(false);
-                                  setIsProjectModalOpen(true);
-                                }}
-                              >
-                                <Plus className="h-3 w-3" />
-                              </button>
-                            )}
-                          </div>
-                        )}
-                        <Transition
-                          enter="transition duration-100 ease-out"
-                          enterFrom="transform scale-95 opacity-0"
-                          enterTo="transform scale-100 opacity-100"
-                          leave="transition duration-75 ease-out"
-                          leaveFrom="transform scale-100 opacity-100"
-                          leaveTo="transform scale-95 opacity-0"
+                          <Plus className="h-3 w-3" />
+                        </button>
+                      )}
+                    </div>
+                  )}
+                  <Transition
+                    enter="transition duration-100 ease-out"
+                    enterFrom="transform scale-95 opacity-0"
+                    enterTo="transform scale-100 opacity-100"
+                    leave="transition duration-75 ease-out"
+                    leaveFrom="transform scale-100 opacity-100"
+                    leaveTo="transform scale-95 opacity-0"
+                  >
+                    <Disclosure.Panel as="div" className="space-y-2">
+                      {favoriteProjects.map((projectId, index) => (
+                        <ProjectSidebarListItem
+                          key={projectId}
+                          projectId={projectId}
+                          handleCopyText={() => handleCopyText(projectId)}
+                          projectListType="FAVORITES"
+                          disableDrag
+                          disableDrop
+                          isLastChild={index === favoriteProjects.length - 1}
+                        />
+                      ))}
+                    </Disclosure.Panel>
+                  </Transition>
+                </>
+              )}
+            </Disclosure>
+          )}
+        </div>
+        <div>
+          {joinedProjects && joinedProjects.length > 0 && (
+            <Disclosure as="div" className="flex flex-col" defaultOpen>
+              {({ open }) => (
+                <>
+                  {!isCollapsed && (
+                    <div className="group flex w-full items-center justify-between rounded p-1.5 text-xs text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80">
+                      <Disclosure.Button
+                        as="button"
+                        type="button"
+                        className="group flex w-full items-center gap-1 whitespace-nowrap rounded px-1.5 text-left text-sm font-semibold text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80"
+                      >
+                        Your projects
+                        {open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
+                      </Disclosure.Button>
+                      {isAuthorizedUser && (
+                        <button
+                          className="opacity-0 group-hover:opacity-100"
+                          onClick={() => {
+                            setTrackElement("Sidebar");
+                            setIsFavoriteProjectCreate(false);
+                            setIsProjectModalOpen(true);
+                          }}
                         >
-                          <Disclosure.Panel as="div" className="space-y-2">
-                            {joinedProjects.map((projectId, index) => (
-                              <Draggable key={projectId} draggableId={projectId} index={index}>
-                                {(provided, snapshot) => (
-                                  <div ref={provided.innerRef} {...provided.draggableProps}>
-                                    <ProjectSidebarListItem
-                                      key={projectId}
-                                      projectId={projectId}
-                                      provided={provided}
-                                      snapshot={snapshot}
-                                      handleCopyText={() => handleCopyText(projectId)}
-                                    />
-                                  </div>
-                                )}
-                              </Draggable>
-                            ))}
-                          </Disclosure.Panel>
-                        </Transition>
-                        {provided.placeholder}
-                      </>
-                    )}
-                  </Disclosure>
-                )}
-              </div>
-            )}
-          </Droppable>
-        </DragDropContext>
+                          <Plus className="h-3 w-3" />
+                        </button>
+                      )}
+                    </div>
+                  )}
+                  <Transition
+                    enter="transition duration-100 ease-out"
+                    enterFrom="transform scale-95 opacity-0"
+                    enterTo="transform scale-100 opacity-100"
+                    leave="transition duration-75 ease-out"
+                    leaveFrom="transform scale-100 opacity-100"
+                    leaveTo="transform scale-95 opacity-0"
+                  >
+                    <Disclosure.Panel as="div">
+                      {joinedProjects.map((projectId, index) => (
+                        <ProjectSidebarListItem
+                          key={projectId}
+                          projectId={projectId}
+                          projectListType="JOINED"
+                          handleCopyText={() => handleCopyText(projectId)}
+                          isLastChild={index === joinedProjects.length - 1}
+                          handleOnProjectDrop={handleOnProjectDrop}
+                        />
+                      ))}
+                    </Disclosure.Panel>
+                  </Transition>
+                </>
+              )}
+            </Disclosure>
+          )}
+        </div>
 
         {isAuthorizedUser && joinedProjects && joinedProjects.length === 0 && (
           <button

web/components/ui/loader/index.ts

@@ -7,3 +7,4 @@ export * from "./cycle-module-list-loader";
 export * from "./view-list-loader";
 export * from "./projects-loader";
 export * from "./utils";
+export * from "./workspace-active-cycle";

web/components/ui/loader/workspace-active-cycle.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from "react";
+
+type Props = {
+  itemCount?: number;
+};
+
+const WorkspaceActiveCycleLoaderItem = () => (
+  <div className="px-5 pt-5 last:pb-5">
+    <div className="flex flex-col gap-4 p-4 rounded-xl border border-custom-border-200 bg-custom-background-100">
+      <div className="flex items-center gap-1.5">
+        <span className="size-7 bg-custom-background-80 rounded" />
+        <span className="h-7 w-20 bg-custom-background-80 rounded" />
+      </div>
+      <div className="flex items-center justify-between px-3 py-2 rounded border-[0.5px] border-custom-border-100 bg-custom-background-90">
+        <div className="flex items-center gap-2 cursor-default">
+          <span className="size-6 bg-custom-background-80 rounded" />
+          <span className="h-6 w-14 bg-custom-background-80 rounded" />
+          <span className="h-6 w-16 bg-custom-background-80 rounded" />
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="h-6 w-16 bg-custom-background-80 rounded" />
+          <span className="h-6 w-20 bg-custom-background-80 rounded" />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-3">
+        <span className="flex flex-col min-h-[17rem] border border-custom-border-200 rounded-lg bg-custom-background-80" />
+        <span className="flex flex-col min-h-[17rem] border border-custom-border-200 rounded-lg bg-custom-background-80" />
+        <span className="flex flex-col min-h-[17rem] border border-custom-border-200 rounded-lg bg-custom-background-80" />
+      </div>
+    </div>
+  </div>
+);
+
+export const WorkspaceActiveCycleLoader: FC<Props> = ({ itemCount = 2 }) => (
+  <div className="h-full w-full overflow-y-scroll bg-custom-background-90 vertical-scrollbar scrollbar-md animate-pulse">
+    {[...Array(itemCount)].map((_, index) => (
+      <WorkspaceActiveCycleLoaderItem key={index} />
+    ))}
+  </div>
+);

web/components/workspace/sidebar-dropdown.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { usePopper } from "react-popper";
 // icons
-import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react";
+import { Activity, Check, ChevronDown, LogOut, Mails, PlusSquare, Settings } from "lucide-react";
 // ui
 import { Menu, Transition } from "@headlessui/react";
 // types
@@ -27,7 +27,7 @@ const userLinks = (workspaceSlug: string, userId: string) => [
     key: "my_activity",
     name: "My activity",
     href: `/${workspaceSlug}/profile/${userId}`,
-    icon: CircleUserRound,
+    icon: Activity,
   },
   {
     key: "settings",
@@ -39,7 +39,7 @@ const userLinks = (workspaceSlug: string, userId: string) => [
 const profileLinks = (workspaceSlug: string, userId: string) => [
   {
     name: "My activity",
-    icon: UserCircle2,
+    icon: Activity,
     link: `/${workspaceSlug}/profile/${userId}`,
   },
   {

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

@@ -12,7 +12,7 @@ export const WorkspaceActiveCyclesList = observer(() => {
   // state
   const [pageCount, setPageCount] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
-  const [resultsCount, setResultsCount] = useState(0); // workspaceActiveCycles.results.length
+  const [resultsCount, setResultsCount] = useState<number | null>(null); // workspaceActiveCycles.results.length
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;

web/constants/spreadsheet.ts

@@ -1,7 +1,12 @@
 import { FC } from "react";
+// icons
+import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarCheck2, CalendarClock, Users } from "lucide-react";
+// types
+import { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types";
+// ui
+import { LayersIcon, DoubleCircleIcon, DiceIcon, ContrastIcon } from "@plane/ui";
 import { ISvgIcons } from "@plane/ui/src/icons/type";
-import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarCheck2, CalendarClock } from "lucide-react";
-import { LayersIcon, DoubleCircleIcon, UserGroupIcon, DiceIcon, ContrastIcon } from "@plane/ui";
+// components
 import {
   SpreadsheetAssigneeColumn,
   SpreadsheetAttachmentColumn,
@@ -18,7 +23,6 @@ import {
   SpreadsheetSubIssueColumn,
   SpreadsheetUpdatedOnColumn,
 } from "@/components/issues/issue-layouts/spreadsheet";
-import { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types";
 
 export const SPREADSHEET_PROPERTY_DETAILS: {
   [key: string]: {
@@ -42,7 +46,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "A",
     descendingOrderKey: "-assignees__first_name",
     descendingOrderTitle: "Z",
-    icon: UserGroupIcon,
+    icon: Users,
     Column: SpreadsheetAssigneeColumn,
   },
   created_on: {

web/helpers/project.helper.ts

@@ -29,23 +29,16 @@ export const orderJoinedProjects = (
     // updating project at the top of the project
     const currentSortOrder = joinedProjects[destinationIndex].sort_order || 0;
     updatedSortOrder = currentSortOrder - sortOrderDefaultValue;
-  } else if (destinationIndex === joinedProjects.length - 1) {
+  } else if (destinationIndex === joinedProjects.length) {
     // updating project at the bottom of the project
     const currentSortOrder = joinedProjects[destinationIndex - 1].sort_order || 0;
     updatedSortOrder = currentSortOrder + sortOrderDefaultValue;
   } else {
     // updating project in the middle of the project
-    if (sourceIndex > destinationIndex) {
-      const destinationTopProjectSortOrder = joinedProjects[destinationIndex - 1].sort_order || 0;
-      const destinationBottomProjectSortOrder = joinedProjects[destinationIndex].sort_order || 0;
-      const updatedValue = (destinationTopProjectSortOrder + destinationBottomProjectSortOrder) / 2;
-      updatedSortOrder = updatedValue;
-    } else {
-      const destinationTopProjectSortOrder = joinedProjects[destinationIndex].sort_order || 0;
-      const destinationBottomProjectSortOrder = joinedProjects[destinationIndex + 1].sort_order || 0;
-      const updatedValue = (destinationTopProjectSortOrder + destinationBottomProjectSortOrder) / 2;
-      updatedSortOrder = updatedValue;
-    }
+    const destinationTopProjectSortOrder = joinedProjects[destinationIndex - 1].sort_order || 0;
+    const destinationBottomProjectSortOrder = joinedProjects[destinationIndex].sort_order || 0;
+    const updatedValue = (destinationTopProjectSortOrder + destinationBottomProjectSortOrder) / 2;
+    updatedSortOrder = updatedValue;
   }
 
   return updatedSortOrder;

web/hooks/use-page-description.ts

@@ -0,0 +1,153 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import useSWR from "swr";
+// editor
+import { applyUpdates, mergeUpdates, proseMirrorJSONToBinaryString } from "@plane/document-editor";
+import { EditorRefApi, generateJSONfromHTML } from "@plane/editor-core";
+// hooks
+import useReloadConfirmations from "@/hooks/use-reload-confirmation";
+// services
+import { PageService } from "@/services/page.service";
+import { IPageStore } from "@/store/pages/page.store";
+const pageService = new PageService();
+
+type Props = {
+  editorRef: React.RefObject<EditorRefApi>;
+  page: IPageStore;
+  projectId: string | string[] | undefined;
+  workspaceSlug: string | string[] | undefined;
+};
+
+const AUTO_SAVE_TIME = 10000;
+
+export const usePageDescription = (props: Props) => {
+  const { editorRef, page, projectId, workspaceSlug } = props;
+  // states
+  const [isDescriptionReady, setIsDescriptionReady] = useState(false);
+  const [descriptionUpdates, setDescriptionUpdates] = useState<Uint8Array[]>([]);
+  // derived values
+  const { isContentEditable, isSubmitting, updateDescription, setIsSubmitting } = page;
+  const pageDescription = page.description_html;
+  const pageId = page.id;
+
+  const { data: descriptionYJS, mutate: mutateDescriptionYJS } = useSWR(
+    workspaceSlug && projectId && pageId ? `PAGE_DESCRIPTION_${workspaceSlug}_${projectId}_${pageId}` : null,
+    workspaceSlug && projectId && pageId
+      ? () => pageService.fetchDescriptionYJS(workspaceSlug.toString(), projectId.toString(), pageId.toString())
+      : null,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      revalidateIfStale: false,
+    }
+  );
+  // description in Uint8Array format
+  const pageDescriptionYJS = useMemo(
+    () => (descriptionYJS ? new Uint8Array(descriptionYJS) : undefined),
+    [descriptionYJS]
+  );
+
+  // push the new updates to the updates array
+  const handleDescriptionChange = useCallback((updates: Uint8Array) => {
+    setDescriptionUpdates((prev) => [...prev, updates]);
+  }, []);
+
+  // if description_binary field is empty, convert description_html to yDoc and update the DB
+  // TODO: this is a one-time operation, and needs to be removed once all the pages are updated
+  useEffect(() => {
+    const changeHTMLToBinary = async () => {
+      if (!pageDescriptionYJS || !pageDescription) return;
+      if (pageDescriptionYJS.byteLength === 0) {
+        const { contentJSON, editorSchema } = generateJSONfromHTML(pageDescription ?? "<p></p>");
+        const yDocBinaryString = proseMirrorJSONToBinaryString(contentJSON, "default", editorSchema);
+        await updateDescription(yDocBinaryString, pageDescription ?? "<p></p>");
+        await mutateDescriptionYJS();
+        setIsDescriptionReady(true);
+      } else setIsDescriptionReady(true);
+    };
+    changeHTMLToBinary();
+  }, [mutateDescriptionYJS, pageDescription, pageDescriptionYJS, updateDescription]);
+
+  const handleSaveDescription = useCallback(async () => {
+    if (!isContentEditable) return;
+
+    const applyUpdatesAndSave = async (latestDescription: any, updates: Uint8Array) => {
+      if (!workspaceSlug || !projectId || !pageId || !latestDescription) return;
+      // convert description to Uint8Array
+      const descriptionArray = new Uint8Array(latestDescription);
+      // apply the updates to the description
+      const combinedBinaryString = applyUpdates(descriptionArray, updates);
+      // get the latest html content
+      const descriptionHTML = editorRef.current?.getHTML() ?? "<p></p>";
+      // make a request to update the descriptions
+      await updateDescription(combinedBinaryString, descriptionHTML).finally(() => setIsSubmitting("saved"));
+    };
+
+    try {
+      setIsSubmitting("submitting");
+      // fetch the latest description
+      const latestDescription = await mutateDescriptionYJS();
+      // return if there are no updates
+      if (descriptionUpdates.length <= 0) {
+        setIsSubmitting("saved");
+        return;
+      }
+      // merge the updates array into one single update
+      const mergedUpdates = mergeUpdates(descriptionUpdates);
+      await applyUpdatesAndSave(latestDescription, mergedUpdates);
+      // reset the updates array to empty
+      setDescriptionUpdates([]);
+    } catch (error) {
+      setIsSubmitting("saved");
+      throw error;
+    }
+  }, [
+    descriptionUpdates,
+    editorRef,
+    isContentEditable,
+    mutateDescriptionYJS,
+    pageId,
+    projectId,
+    setIsSubmitting,
+    updateDescription,
+    workspaceSlug,
+  ]);
+
+  // auto-save updates every 10 seconds
+  // handle ctrl/cmd + S to save the description
+  useEffect(() => {
+    const intervalId = setInterval(handleSaveDescription, AUTO_SAVE_TIME);
+
+    const handleSave = (e: KeyboardEvent) => {
+      const { ctrlKey, metaKey, key } = e;
+      const cmdClicked = ctrlKey || metaKey;
+
+      if (cmdClicked && key.toLowerCase() === "s") {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSaveDescription();
+
+        // reset interval timer
+        clearInterval(intervalId);
+      }
+    };
+    window.addEventListener("keydown", handleSave);
+
+    return () => {
+      clearInterval(intervalId);
+      window.removeEventListener("keydown", handleSave);
+    };
+  }, [handleSaveDescription]);
+
+  // show a confirm dialog if there are any unsaved changes, or saving is going on
+  const { setShowAlert } = useReloadConfirmations(descriptionUpdates.length > 0 || isSubmitting === "submitting");
+  useEffect(() => {
+    if (descriptionUpdates.length > 0 || isSubmitting === "submitting") setShowAlert(true);
+    else setShowAlert(false);
+  }, [descriptionUpdates, isSubmitting, setShowAlert]);
+
+  return {
+    handleDescriptionChange,
+    isDescriptionReady,
+    pageDescriptionYJS,
+  };
+};