fix: speed variability adjusted

* refactor: created a generic base page instance

* refactor: project store hooks

* chore: add missing prop declaration

* refactor: editor page root and body

* refactor: issue embed hook

* chore: update search entity types

* fix: version editor component

* fix: add page to favorites action

---------

Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>

README.md

@@ -5,9 +5,7 @@
   <img src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_logo_.webp" alt="Plane Logo" width="70">
 </a>
 </p>
-
-<h3 align="center"><b>Plane</b></h3>
-<p align="center"><b>Open-source project management that unlocks customer value</b></p>
+<h1 align="center"><b>Plane</b></h1>
 
 <p align="center">
 <a href="https://discord.com/invite/A92xrEGCge">
@@ -44,79 +42,85 @@ Meet [Plane](https://dub.sh/plane-website-readme), an open-source project manage
 
 > Plane is evolving every day. Your suggestions, ideas, and reported bugs help us immensely. Do not hesitate to join in the conversation on [Discord](https://discord.com/invite/A92xrEGCge) or raise a GitHub issue. We read everything and respond to most.
 
-## ⚡ Installation
+## 🚀 Installation
 
-The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account.
+Getting started with Plane is simple. Choose the setup that works best for you:
 
-If you would like to self-host Plane, please see our [deployment guide](https://docs.plane.so/docker-compose).
+- **Plane Cloud**   
+Sign up for a free account on [Plane Cloud](https://app.plane.so)—it's the fastest way to get up and running without worrying about infrastructure.
+
+- **Self-host Plane**  
+Prefer full control over your data and infrastructure? Install and run Plane on your own servers. Follow our detailed [deployment guides](https://developers.plane.so/self-hosting/overview) to get started.
 
 | Installation methods | Docs link                                                                                                                                          |
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://docs.plane.so/self-hosting/methods/docker-compose)         |
-| Kubernetes           | [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://docs.plane.so/kubernetes) |
+| Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://developers.plane.so/self-hosting/methods/docker-compose)         |
+| Kubernetes           | [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://developers.plane.so/self-hosting/methods/kubernetes) |
 
-`Instance admins` can configure instance settings with [God-mode](https://docs.plane.so/instance-admin).
+`Instance admins` can manage and customize settings using [God mode](https://developers.plane.so/self-hosting/govern/instance-admin).
 
-## 🚀 Features
+## 🌟 Features
 
-- **Issues**: Quickly create issues and add details using a powerful rich text editor that supports file uploads. Add sub-properties and references to problems for better organization and tracking.
+- **Issues**  
+Efficiently create and manage tasks with a robust rich text editor that supports file uploads. Enhance organization and tracking by adding sub-properties and referencing related issues.
 
-- **Cycles**:
-  Keep up your team's momentum with Cycles. Gain insights into your project's progress with burn-down charts and other valuable features.
+- **Cycles**   
+Maintain your team’s momentum with Cycles. Track progress effortlessly using burn-down charts and other insightful tools.
 
-- **Modules**: Break down your large projects into smaller, more manageable modules. Assign modules between teams to track and plan your project's progress easily.
+- **Modules**  
+Simplify complex projects by dividing them into smaller, manageable modules. 
 
-- **Views**: Create custom filters to display only the issues that matter to you. Save and share your filters in just a few clicks.
+- **Views**  
+Customize your workflow by creating filters to display only the most relevant issues. Save and share these views with ease.
 
-- **Pages**: Plane pages, equipped with AI and a rich text editor, let you jot down your thoughts on the fly. Format your text, upload images, hyperlink, or sync your existing ideas into an actionable item or issue.
+- **Pages**  
+Capture and organize ideas using Plane Pages, complete with AI capabilities and a rich text editor. Format text, insert images, add hyperlinks, or convert your notes into actionable items.
 
-- **Analytics**: Get insights into all your Plane data in real-time. Visualize issue data to spot trends, remove blockers, and progress your work.
+- **Analytics**  
+Access real-time insights across all your Plane data. Visualize trends, remove blockers, and keep your projects moving forward.
 
 - **Drive** (_coming soon_): The drive helps you share documents, images, videos, or any other files that make sense to you or your team and align on the problem/solution.
 
-## 🛠️ Quick start for contributors
 
-> Development system must have docker engine installed and running.
+## 🛠️ Local development
 
-Setting up local environment is extremely easy and straight forward. Follow the below step and you will be ready to contribute - 
+### Pre-requisites
+- Ensure Docker Engine is installed and running.
 
-1. Clone the code locally using:
+###  Development setup
+Setting up your local environment is simple and straightforward. Follow these steps to get started:
+
+1. Clone the repository:
    ```
    git clone https://github.com/makeplane/plane.git
    ```
-2. Switch to the code folder:
+2. Navigate to the project folder:
    ```
    cd plane
    ```
-3. Create your feature or fix branch you plan to work on using:
+3. Create a new branch for your feature or fix:
    ```
    git checkout -b <feature-branch-name>
    ```
-4. Open terminal and run:
+4. Run the setup script in the terminal:
    ```
    ./setup.sh
    ```
-5. Open the code on VSCode or similar equivalent IDE.
-6. Review the `.env` files available in various folders.
-   Visit [Environment Setup](./ENV_SETUP.md) to know about various environment variables used in system.
-7. Run the docker command to initiate services:
+5. Open the project in an IDE such as VS Code.
+
+6. Review the `.env` files in the relevant folders. Refer to [Environment Setup](./ENV_SETUP.md) for details on the environment variables used.
+
+7. Start the services using Docker:
    ```
    docker compose -f docker-compose-local.yml up -d
    ```
 
-You are ready to make changes to the code. Do not forget to refresh the browser (in case it does not auto-reload).
+That’s it! You’re all set to begin coding. Remember to refresh your browser if changes don’t auto-reload. Happy contributing! 🎉
 
-Thats it!
-
-## ❤️ Community
-
-The Plane community can be found on [GitHub Discussions](https://github.com/orgs/makeplane/discussions), and our [Discord server](https://discord.com/invite/A92xrEGCge). Our [Code of conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CONDUCT.md) applies to all Plane community chanels.
-
-Ask questions, report bugs, join discussions, voice ideas, make feature requests, or share your projects.
-
-### Repo Activity
-
-![Plane Repo Activity](https://repobeats.axiom.co/api/embed/2523c6ed2f77c082b7908c33e2ab208981d76c39.svg "Repobeats analytics image")
+## Built with
+[![Next JS](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org/)<br/>
+[![Django](https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=green)](https://www.djangoproject.com/)<br/>
+[![Node JS](https://img.shields.io/badge/node.js-339933?style=for-the-badge&logo=Node.js&logoColor=white)](https://nodejs.org/en)
 
 ## 📸 Screenshots
 
@@ -165,7 +169,7 @@ Ask questions, report bugs, join discussions, voice ideas, make feature requests
     </a>
   </p>
 </p>
-   <p>
+<p>
     <a href="https://plane.so" target="_blank">
       <img
         src="https://ik.imagekit.io/w2okwbtu2/Drive_LlfeY4xn3.png?updatedAt=1709298837917"
@@ -176,23 +180,42 @@ Ask questions, report bugs, join discussions, voice ideas, make feature requests
   </p>
 </p>
 
-## ⛓️ Security
+## 📝 Documentation
+Explore Plane's [product documentation](https://docs.plane.so/) and [developer documentation](https://developers.plane.so/) to learn about features, setup, and usage.
 
-If you believe you have found a security vulnerability in Plane, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports.
+## ❤️ Community
 
-Email squawk@plane.so to disclose any security vulnerabilities.
+Join the Plane community on [GitHub Discussions](https://github.com/orgs/makeplane/discussions) and our [Discord server](https://discord.com/invite/A92xrEGCge). We follow a [Code of conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CONDUCT.md) in all our community channels.
 
-## ❤️ Contribute
+Feel free to ask questions, report bugs, participate in discussions, share ideas, request features, or showcase your projects. We’d love to hear from you!
 
-There are many ways to contribute to Plane, including:
+## 🛡️ Security
 
-- Submitting [bugs](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%F0%9F%90%9Bbug&projects=&template=--bug-report.yaml&title=%5Bbug%5D%3A+) and [feature requests](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%E2%9C%A8feature&projects=&template=--feature-request.yaml&title=%5Bfeature%5D%3A+) for various components.
-- Reviewing [the documentation](https://docs.plane.so/) and submitting [pull requests](https://github.com/makeplane/plane), from fixing typos to adding new features.
-- Speaking or writing about Plane or any other ecosystem integration and [letting us know](https://discord.com/invite/A92xrEGCge)!
-- Upvoting [popular feature requests](https://github.com/makeplane/plane/issues) to show your support.
+If you discover a security vulnerability in Plane, please report it responsibly instead of opening a public issue. We take all legitimate reports seriously and will investigate them promptly. See [Security policy](https://github.com/makeplane/plane/blob/master/SECURITY.md) for more info.
+
+To disclose any security issues, please email us at security@plane.so. 
+
+## 🤝 Contributing
+
+There are many ways you can contribute to Plane:
+
+- Report [bugs](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%F0%9F%90%9Bbug&projects=&template=--bug-report.yaml&title=%5Bbug%5D%3A+) or submit [feature requests](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%E2%9C%A8feature&projects=&template=--feature-request.yaml&title=%5Bfeature%5D%3A+).
+- Review the [documentation](https://docs.plane.so/) and submit [pull requests](https://github.com/makeplane/docs) to improve it—whether it's fixing typos or adding new content.
+- Talk or write about Plane or any other ecosystem integration and [let us know](https://discord.com/invite/A92xrEGCge)!
+- Show your support by upvoting [popular feature requests](https://github.com/makeplane/plane/issues).
+
+Please read [CONTRIBUTING.md](https://github.com/makeplane/plane/blob/master/CONTRIBUTING.md) for details on the process for submitting pull requests to us.
+
+### Repo activity
+
+![Plane Repo Activity](https://repobeats.axiom.co/api/embed/2523c6ed2f77c082b7908c33e2ab208981d76c39.svg "Repobeats analytics image")
 
 ### We couldn't have done this without you.
 
 <a href="https://github.com/makeplane/plane/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=makeplane/plane" />
 </a>
+
+
+## License
+This project is licensed under the [GNU Affero General Public License v3.0](https://github.com/makeplane/plane/blob/master/LICENSE.txt).

admin/app/authentication/github/form.tsx

@@ -4,10 +4,11 @@ import { FC, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-// types
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
 import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
-// ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import {
   CodeBlock,
@@ -17,8 +18,6 @@ import {
   TControllerInputFormField,
   TCopyField,
 } from "@/components/common";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -103,8 +102,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
       url: originURL,
       description: (
         <>
-          We will auto-generate this. Paste this into the{" "}
-          <CodeBlock darkerShade>Authorized origin URL</CodeBlock> field{" "}
+          We will auto-generate this. Paste this into the <CodeBlock darkerShade>Authorized origin URL</CodeBlock> field{" "}
           <a
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
@@ -123,8 +121,8 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
       url: `${originURL}/auth/github/callback/`,
       description: (
         <>
-          We will auto-generate this. Paste this into your{" "}
-          <CodeBlock darkerShade>Authorized Callback URI</CodeBlock> field{" "}
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Callback URI</CodeBlock>{" "}
+          field{" "}
           <a
             tabIndex={-1}
             href="https://github.com/settings/applications/new"

admin/app/authentication/github/page.tsx

@@ -5,12 +5,12 @@ import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
+// plane internal packages
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
 // components
 import { AuthenticationMethodCard } from "@/components/authentication";
 import { PageHeader } from "@/components/common";
-// helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons

admin/app/authentication/gitlab/form.tsx

@@ -2,10 +2,11 @@ import { FC, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-// types
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
 import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
-// ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import {
   CodeBlock,
@@ -15,8 +16,6 @@ import {
   TControllerInputFormField,
   TCopyField,
 } from "@/components/common";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -117,8 +116,7 @@ export const InstanceGitlabConfigForm: FC<Props> = (props) => {
       url: `${originURL}/auth/gitlab/callback/`,
       description: (
         <>
-          We will auto-generate this. Paste this into the{" "}
-          <CodeBlock darkerShade>Redirect URI</CodeBlock> field of your{" "}
+          We will auto-generate this. Paste this into the <CodeBlock darkerShade>Redirect URI</CodeBlock> field of your{" "}
           <a
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"

admin/app/authentication/google/form.tsx

@@ -3,10 +3,11 @@ import { FC, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-// types
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
 import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
-// ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import {
   CodeBlock,
@@ -16,8 +17,6 @@ import {
   TControllerInputFormField,
   TCopyField,
 } from "@/components/common";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
 

admin/app/authentication/page.tsx

@@ -3,10 +3,10 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
+// plane internal packages
 import { TInstanceConfigurationKeys } from "@plane/types";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
 // plane admin components

admin/app/layout.tsx

@@ -4,11 +4,11 @@ import { ReactNode } from "react";
 import { ThemeProvider, useTheme } from "next-themes";
 import { SWRConfig } from "swr";
 // ui
+import { ADMIN_BASE_PATH, DEFAULT_SWR_CONFIG } from "@plane/constants";
 import { Toast } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
 // constants
-import { SWR_CONFIG } from "@/constants/swr-config";
 // helpers
-import { ASSET_PREFIX, resolveGeneralTheme } from "@/helpers/common.helper";
 // lib
 import { InstanceProvider } from "@/lib/instance-provider";
 import { StoreProvider } from "@/lib/store-provider";
@@ -22,6 +22,7 @@ const ToastWithTheme = () => {
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {
+  const ASSET_PREFIX = ADMIN_BASE_PATH;
   return (
     <html lang="en">
       <head>
@@ -34,7 +35,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <body className={`antialiased`}>
         <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
           <ToastWithTheme />
-          <SWRConfig value={SWR_CONFIG}>
+          <SWRConfig value={DEFAULT_SWR_CONFIG}>
             <StoreProvider>
               <InstanceProvider>
                 <UserProvider>{children}</UserProvider>

admin/app/workspace/create/form.tsx

@@ -3,13 +3,11 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 // constants
-import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
+import { WEB_BASE_URL, ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 // types
 import { IWorkspace } from "@plane/types";
 // components
 import { Button, CustomSelect, getButtonStyling, Input, setToast, TOAST_TYPE } from "@plane/ui";
-// helpers
-import { WEB_BASE_URL } from "@/helpers/common.helper";
 // hooks
 import { useWorkspace } from "@/hooks/store";
 // services

admin/app/workspace/page.tsx

@@ -7,12 +7,10 @@ import useSWR from "swr";
 import { Loader as LoaderIcon } from "lucide-react";
 // types
 import { TInstanceConfigurationKeys } from "@plane/types";
-// ui
 import { Button, getButtonStyling, Loader, setPromiseToast, ToggleSwitch } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import { WorkspaceListItem } from "@/components/workspace";
-// helpers
-import { cn } from "@/helpers/common.helper";
 // hooks
 import { useInstance, useWorkspace } from "@/hooks/store";
 

admin/ce/components/authentication/authentication-modes.tsx

@@ -10,7 +10,7 @@ import {
 // components
 import { AuthenticationMethodCard } from "@/components/authentication";
 // helpers
-import { getBaseAuthenticationModes } from "@/helpers/authentication.helper";
+import { getBaseAuthenticationModes } from "@/lib/auth-helpers";
 // plane admin components
 import { UpgradeButton } from "@/plane-admin/components/common";
 // images

admin/ce/components/common/upgrade-button.tsx

@@ -3,10 +3,9 @@
 import React from "react";
 // icons
 import { SquareArrowOutUpRight } from "lucide-react";
-// ui
+// plane internal packages
 import { getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 
 export const UpgradeButton: React.FC = () => (
   <a href="https://plane.so/pricing?mode=self-hosted" target="_blank" className={cn(getButtonStyling("primary", "sm"))}>

admin/core/components/admin-sidebar/help-section.tsx

@@ -5,13 +5,14 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
 import { Transition } from "@headlessui/react";
-// ui
+// plane internal packages
+import { WEB_BASE_URL } from "@plane/constants";
 import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
-// helpers
-import { WEB_BASE_URL, cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 // hooks
 import { useTheme } from "@/hooks/store";
 // assets
+// eslint-disable-next-line import/order
 import packageJson from "package.json";
 
 const helpOptions = [

admin/core/components/admin-sidebar/sidebar-dropdown.tsx

@@ -5,11 +5,10 @@ import { observer } from "mobx-react";
 import { useTheme as useNextTheme } from "next-themes";
 import { LogOut, UserCog2, Palette } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
-// plane ui
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
 import { Avatar } from "@plane/ui";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-import { getFileURL } from "@/helpers/file.helper";
+import { getFileURL, cn } from "@plane/utils";
 // hooks
 import { useTheme, useUser } from "@/hooks/store";
 // services

admin/core/components/admin-sidebar/sidebar-menu.tsx

@@ -4,11 +4,11 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
+// plane internal packages
 import { Tooltip, WorkspaceIcon } from "@plane/ui";
+import { cn } from "@plane/utils";
 // hooks
-import { cn } from "@/helpers/common.helper";
 import { useTheme } from "@/hooks/store";
-// helpers
 
 const INSTANCE_ADMIN_LINKS = [
   {

admin/core/components/authentication/auth-banner.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { Info, X } from "lucide-react";
-// helpers
-import { TAuthErrorInfo } from "@/helpers/authentication.helper";
+// plane constants
+import { TAuthErrorInfo } from "@plane/constants";
 
 type TAuthBanner = {
   bannerData: TAuthErrorInfo | undefined;

admin/core/components/authentication/authentication-method-card.tsx

@@ -2,7 +2,7 @@
 
 import { FC } from "react";
 // helpers
-import { cn } from "helpers/common.helper";
+import { cn } from "@plane/utils";
 
 type Props = {
   name: string;

admin/core/components/authentication/github-config.tsx

@@ -5,12 +5,10 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";
-// types
+// plane internal packages
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
 import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
 

admin/core/components/authentication/gitlab-config.tsx

@@ -5,12 +5,10 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";
-// types
+// plane internal packages
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
 import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
 

admin/core/components/authentication/google-config.tsx

@@ -5,12 +5,10 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";
-// types
+// plane internal packages
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
 import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
 

admin/core/components/common/code-block.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 
 type TProps = {
   children: React.ReactNode;

admin/core/components/common/controller-input.tsx

@@ -4,10 +4,9 @@ import React, { useState } from "react";
 import { Controller, Control } from "react-hook-form";
 // icons
 import { Eye, EyeOff } from "lucide-react";
-// ui
+// plane internal packages
 import { Input } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 
 type Props = {
   control: Control<any>;
@@ -37,9 +36,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-300">
-        {label}
-      </h4>
+      <h4 className="text-sm text-custom-text-300">{label}</h4>
       <div className="relative">
         <Controller
           control={control}

admin/core/components/common/password-strength-meter.tsx

@@ -1,14 +1,9 @@
 "use client";
 
 import { FC, useMemo } from "react";
-// import { CircleCheck } from "lucide-react";
-// helpers
-import { cn } from "@/helpers/common.helper";
-import {
-  E_PASSWORD_STRENGTH,
-  // PASSWORD_CRITERIA,
-  getPasswordStrength,
-} from "@/helpers/password.helper";
+// plane internal packages
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
+import { cn, getPasswordStrength } from "@plane/utils";
 
 type TPasswordStrengthMeter = {
   password: string;

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

@@ -4,13 +4,12 @@ import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 // icons
 import { Eye, EyeOff } from "lucide-react";
-// ui
+// plane internal packages
+import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { Button, Checkbox, Input, Spinner } from "@plane/ui";
+import { getPasswordStrength } from "@plane/utils";
 // components
 import { Banner, PasswordStrengthMeter } from "@/components/common";
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
-import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
 // services
 import { AuthService } from "@/services/auth.service";
 

admin/core/components/login/sign-in-form.tsx

@@ -2,24 +2,18 @@
 
 import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
-// services
 import { Eye, EyeOff } from "lucide-react";
+// plane internal packages
+import { API_BASE_URL, EAdminAuthErrorCodes, TAuthErrorInfo } from "@plane/constants";
 import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common";
 // helpers
-import {
-  authErrorHandler,
-  EAuthenticationErrorCodes,
-  EErrorAlertType,
-  TAuthErrorInfo,
-} from "@/helpers/authentication.helper";
-
-import { API_BASE_URL } from "@/helpers/common.helper";
+import { authErrorHandler } from "@/lib/auth-helpers";
+// services
 import { AuthService } from "@/services/auth.service";
+// local components
 import { AuthBanner } from "../authentication";
-// ui
-// icons
 
 // service initialization
 const authService = new AuthService();
@@ -102,7 +96,7 @@ export const InstanceSignInForm: FC = (props) => {
 
   useEffect(() => {
     if (errorCode) {
-      const errorDetail = authErrorHandler(errorCode?.toString() as EAuthenticationErrorCodes);
+      const errorDetail = authErrorHandler(errorCode?.toString() as EAdminAuthErrorCodes);
       if (errorDetail) {
         setErrorInfo(errorDetail);
       }

admin/core/components/new-user-popup.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import React from "react";
-import { resolveGeneralTheme } from "helpers/common.helper";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useTheme as nextUseTheme } from "next-themes";
 // ui
 import { Button, getButtonStyling } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
 // hooks
 import { useTheme } from "@/hooks/store";
 // icons

admin/core/components/workspace/list-item.tsx

@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 import { ExternalLink } from "lucide-react";
-// helpers
+// plane internal packages
+import { WEB_BASE_URL } from "@plane/constants";
 import { Tooltip } from "@plane/ui";
-import { WEB_BASE_URL } from "@/helpers/common.helper";
-import { getFileURL } from "@/helpers/file.helper";
+import { getFileURL } from "@plane/utils";
 // hooks
 import { useWorkspace } from "@/hooks/store";
 

admin/core/constants/seo.ts

@@ -1,8 +0,0 @@
-export const SITE_NAME = "Plane | Simple, extensible, open-source project management tool.";
-export const SITE_TITLE = "Plane | Simple, extensible, open-source project management tool.";
-export const SITE_DESCRIPTION =
-  "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.";
-export const SITE_KEYWORDS =
-  "software development, plan, ship, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration";
-export const SITE_URL = "https://app.plane.so/";
-export const TWITTER_USER_NAME = "Plane | Simple, extensible, open-source project management tool.";

admin/core/lib/auth-helpers.tsx

@@ -0,0 +1,164 @@
+import { ReactNode } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { KeyRound, Mails } from "lucide-react";
+// plane packages
+import { SUPPORT_EMAIL, EAdminAuthErrorCodes, TAuthErrorInfo } from "@plane/constants";
+import { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
+import { resolveGeneralTheme } from "@plane/utils";
+// components
+import {
+  EmailCodesConfiguration,
+  GithubConfiguration,
+  GitlabConfiguration,
+  GoogleConfiguration,
+  PasswordLoginConfiguration,
+} from "@/components/authentication";
+// images
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+import GoogleLogo from "@/public/logos/google-logo.svg";
+
+export enum EErrorAlertType {
+  BANNER_ALERT = "BANNER_ALERT",
+  INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
+  INLINE_EMAIL = "INLINE_EMAIL",
+  INLINE_PASSWORD = "INLINE_PASSWORD",
+  INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
+}
+
+const errorCodeMessages: {
+  [key in EAdminAuthErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
+} = {
+  // admin
+  [EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST]: {
+    title: `Admin already exists`,
+    message: () => `Admin already exists. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
+    title: `Email, password and first name required`,
+    message: () => `Email, password and first name required. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.INVALID_ADMIN_EMAIL]: {
+    title: `Invalid admin email`,
+    message: () => `Invalid admin email. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.INVALID_ADMIN_PASSWORD]: {
+    title: `Invalid admin password`,
+    message: () => `Invalid admin password. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
+    title: `Admin user already exists`,
+    message: () => (
+      <div>
+        Admin user already exists.&nbsp;
+        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+          Sign In
+        </Link>
+        &nbsp;now.
+      </div>
+    ),
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
+    title: `Admin user does not exist`,
+    message: () => (
+      <div>
+        Admin user does not exist.&nbsp;
+        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+          Sign In
+        </Link>
+        &nbsp;now.
+      </div>
+    ),
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_DEACTIVATED]: {
+    title: `User account deactivated`,
+    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
+  },
+};
+
+export const authErrorHandler = (
+  errorCode: EAdminAuthErrorCodes,
+  email?: string | undefined
+): TAuthErrorInfo | undefined => {
+  const bannerAlertErrorCodes = [
+    EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST,
+    EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
+    EAdminAuthErrorCodes.INVALID_ADMIN_EMAIL,
+    EAdminAuthErrorCodes.INVALID_ADMIN_PASSWORD,
+    EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
+    EAdminAuthErrorCodes.ADMIN_AUTHENTICATION_FAILED,
+    EAdminAuthErrorCodes.ADMIN_USER_ALREADY_EXIST,
+    EAdminAuthErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
+    EAdminAuthErrorCodes.ADMIN_USER_DEACTIVATED,
+  ];
+
+  if (bannerAlertErrorCodes.includes(errorCode))
+    return {
+      type: EErrorAlertType.BANNER_ALERT,
+      code: errorCode,
+      title: errorCodeMessages[errorCode]?.title || "Error",
+      message: errorCodeMessages[errorCode]?.message(email) || "Something went wrong. Please try again.",
+    };
+
+  return undefined;
+};
+
+export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
+  disabled,
+  updateConfig,
+  resolvedTheme,
+}) => [
+  {
+    key: "unique-codes",
+    name: "Unique codes",
+    description:
+      "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
+    icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "passwords-login",
+    name: "Passwords",
+    description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
+    icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "google",
+    name: "Google",
+    description: "Allow members to log in or sign up for Plane with their Google accounts.",
+    icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+    config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "github",
+    name: "GitHub",
+    description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
+    icon: (
+      <Image
+        src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+        height={20}
+        width={20}
+        alt="GitHub Logo"
+      />
+    ),
+    config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "gitlab",
+    name: "GitLab",
+    description: "Allow members to log in or sign up to plane with their GitLab accounts.",
+    icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+    config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+];

admin/core/services/auth.service.ts

@@ -1,5 +1,4 @@
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
+import { API_BASE_URL } from "@plane/constants";
 // services
 import { APIService } from "@/services/api.service";
 

admin/core/services/instance.service.ts

@@ -1,4 +1,5 @@
-// types
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
 import type {
   IFormattedInstanceConfiguration,
   IInstance,
@@ -7,7 +8,6 @@ import type {
   IInstanceInfo,
 } from "@plane/types";
 // helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
 import { APIService } from "@/services/api.service";
 
 export class InstanceService extends APIService {

admin/core/services/user.service.ts

@@ -1,7 +1,6 @@
-// types
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
 import type { IUser } from "@plane/types";
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
 // services
 import { APIService } from "@/services/api.service";
 

admin/core/services/workspace.service.ts

@@ -1,7 +1,6 @@
-// types
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
 import type { IWorkspace, TWorkspacePaginationInfo } from "@plane/types";
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
 // services
 import { APIService } from "@/services/api.service";
 

admin/core/store/instance.store.ts

@@ -1,5 +1,7 @@
 import set from "lodash/set";
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// plane internal packages
+import { EInstanceStatus, TInstanceStatus } from "@plane/constants";
 import {
   IInstance,
   IInstanceAdmin,
@@ -8,8 +10,6 @@ import {
   IInstanceInfo,
   IInstanceConfig,
 } from "@plane/types";
-// helpers
-import { EInstanceStatus, TInstanceStatus } from "@/helpers/instance.helper";
 // services
 import { InstanceService } from "@/services/instance.service";
 // root store

admin/core/store/user.store.ts

@@ -1,7 +1,7 @@
 import { action, observable, runInAction, makeObservable } from "mobx";
+// plane internal packages
+import { EUserStatus, TUserStatus } from "@plane/constants";
 import { IUser } from "@plane/types";
-// helpers
-import { EUserStatus, TUserStatus } from "@/helpers/user.helper";
 // services
 import { AuthService } from "@/services/auth.service";
 import { UserService } from "@/services/user.service";

admin/helpers/authentication.helper.tsx

@@ -1,203 +0,0 @@
-import { ReactNode } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { KeyRound, Mails } from "lucide-react";
-// types
-import { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
-// components
-import {
-  EmailCodesConfiguration,
-  GithubConfiguration,
-  GitlabConfiguration,
-  GoogleConfiguration,
-  PasswordLoginConfiguration,
-} from "@/components/authentication";
-// helpers
-import { SUPPORT_EMAIL, resolveGeneralTheme } from "@/helpers/common.helper";
-// images
-import githubLightModeImage from "@/public/logos/github-black.png";
-import githubDarkModeImage from "@/public/logos/github-white.png";
-import GitlabLogo from "@/public/logos/gitlab-logo.svg";
-import GoogleLogo from "@/public/logos/google-logo.svg";
-
-export enum EPageTypes {
-  PUBLIC = "PUBLIC",
-  NON_AUTHENTICATED = "NON_AUTHENTICATED",
-  SET_PASSWORD = "SET_PASSWORD",
-  ONBOARDING = "ONBOARDING",
-  AUTHENTICATED = "AUTHENTICATED",
-}
-
-export enum EAuthModes {
-  SIGN_IN = "SIGN_IN",
-  SIGN_UP = "SIGN_UP",
-}
-
-export enum EAuthSteps {
-  EMAIL = "EMAIL",
-  PASSWORD = "PASSWORD",
-  UNIQUE_CODE = "UNIQUE_CODE",
-}
-
-export enum EErrorAlertType {
-  BANNER_ALERT = "BANNER_ALERT",
-  INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
-  INLINE_EMAIL = "INLINE_EMAIL",
-  INLINE_PASSWORD = "INLINE_PASSWORD",
-  INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
-}
-
-export enum EAuthenticationErrorCodes {
-  // Admin
-  ADMIN_ALREADY_EXIST = "5150",
-  REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME = "5155",
-  INVALID_ADMIN_EMAIL = "5160",
-  INVALID_ADMIN_PASSWORD = "5165",
-  REQUIRED_ADMIN_EMAIL_PASSWORD = "5170",
-  ADMIN_AUTHENTICATION_FAILED = "5175",
-  ADMIN_USER_ALREADY_EXIST = "5180",
-  ADMIN_USER_DOES_NOT_EXIST = "5185",
-  ADMIN_USER_DEACTIVATED = "5190",
-}
-
-export type TAuthErrorInfo = {
-  type: EErrorAlertType;
-  code: EAuthenticationErrorCodes;
-  title: string;
-  message: ReactNode;
-};
-
-const errorCodeMessages: {
-  [key in EAuthenticationErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
-} = {
-  // admin
-  [EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST]: {
-    title: `Admin already exists`,
-    message: () => `Admin already exists. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
-    title: `Email, password and first name required`,
-    message: () => `Email, password and first name required. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL]: {
-    title: `Invalid admin email`,
-    message: () => `Invalid admin email. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD]: {
-    title: `Invalid admin password`,
-    message: () => `Invalid admin password. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
-    title: `Email and password required`,
-    message: () => `Email and password required. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
-    title: `Authentication failed`,
-    message: () => `Authentication failed. Please try again.`,
-  },
-  [EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
-    title: `Admin user already exists`,
-    message: () => (
-      <div>
-        Admin user already exists.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
-          Sign In
-        </Link>
-        &nbsp;now.
-      </div>
-    ),
-  },
-  [EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
-    title: `Admin user does not exist`,
-    message: () => (
-      <div>
-        Admin user does not exist.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
-          Sign In
-        </Link>
-        &nbsp;now.
-      </div>
-    ),
-  },
-  [EAuthenticationErrorCodes.ADMIN_USER_DEACTIVATED]: {
-    title: `User account deactivated`,
-    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
-  },
-};
-
-export const authErrorHandler = (
-  errorCode: EAuthenticationErrorCodes,
-  email?: string | undefined
-): TAuthErrorInfo | undefined => {
-  const bannerAlertErrorCodes = [
-    EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST,
-    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
-    EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL,
-    EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD,
-    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
-    EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED,
-    EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST,
-    EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
-    EAuthenticationErrorCodes.ADMIN_USER_DEACTIVATED,
-  ];
-
-  if (bannerAlertErrorCodes.includes(errorCode))
-    return {
-      type: EErrorAlertType.BANNER_ALERT,
-      code: errorCode,
-      title: errorCodeMessages[errorCode]?.title || "Error",
-      message: errorCodeMessages[errorCode]?.message(email) || "Something went wrong. Please try again.",
-    };
-
-  return undefined;
-};
-
-export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
-  disabled,
-  updateConfig,
-  resolvedTheme,
-}) => [
-    {
-      key: "unique-codes",
-      name: "Unique codes",
-      description:
-        "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
-      icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
-      config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-    {
-      key: "passwords-login",
-      name: "Passwords",
-      description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
-      icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
-      config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-    {
-      key: "google",
-      name: "Google",
-      description: "Allow members to log in or sign up for Plane with their Google accounts.",
-      icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
-      config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-    {
-      key: "github",
-      name: "GitHub",
-      description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
-      icon: (
-        <Image
-          src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
-          height={20}
-          width={20}
-          alt="GitHub Logo"
-        />
-      ),
-      config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-    {
-      key: "gitlab",
-      name: "GitLab",
-      description: "Allow members to log in or sign up to plane with their GitLab accounts.",
-      icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
-      config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-  ];

admin/helpers/common.helper.ts

@@ -1,20 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "";
-
-export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "";
-
-export const SPACE_BASE_URL = process.env.NEXT_PUBLIC_SPACE_BASE_URL || "";
-export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_SPACE_BASE_PATH || "";
-
-export const WEB_BASE_URL = process.env.NEXT_PUBLIC_WEB_BASE_URL || "";
-
-export const SUPPORT_EMAIL = process.env.NEXT_PUBLIC_SUPPORT_EMAIL || "";
-
-export const ASSET_PREFIX = ADMIN_BASE_PATH;
-
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
-
-export const resolveGeneralTheme = (resolvedTheme: string | undefined) =>
-  resolvedTheme?.includes("light") ? "light" : resolvedTheme?.includes("dark") ? "dark" : "system";

admin/helpers/file.helper.ts

@@ -1,14 +0,0 @@
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
-
-/**
- * @description combine the file path with the base URL
- * @param {string} path
- * @returns {string} final URL with the base URL
- */
-export const getFileURL = (path: string): string | undefined => {
-  if (!path) return undefined;
-  const isValidURL = path.startsWith("http");
-  if (isValidURL) return path;
-  return `${API_BASE_URL}${path}`;
-};

admin/helpers/index.ts

@@ -1,2 +0,0 @@
-export * from "./instance.helper";
-export * from "./user.helper";

admin/helpers/password.helper.ts

@@ -1,67 +0,0 @@
-import zxcvbn from "zxcvbn";
-
-export enum E_PASSWORD_STRENGTH {
-  EMPTY = "empty",
-  LENGTH_NOT_VALID = "length_not_valid",
-  STRENGTH_NOT_VALID = "strength_not_valid",
-  STRENGTH_VALID = "strength_valid",
-}
-
-const PASSWORD_MIN_LENGTH = 8;
-// const PASSWORD_NUMBER_REGEX = /\d/;
-// const PASSWORD_CHAR_CAPS_REGEX = /[A-Z]/;
-// const PASSWORD_SPECIAL_CHAR_REGEX = /[`!@#$%^&*()_\-+=\[\]{};':"\\|,.<>\/?~ ]/;
-
-export const PASSWORD_CRITERIA = [
-  {
-    key: "min_8_char",
-    label: "Min 8 characters",
-    isCriteriaValid: (password: string) => password.length >= PASSWORD_MIN_LENGTH,
-  },
-  // {
-  //   key: "min_1_upper_case",
-  //   label: "Min 1 upper-case letter",
-  //   isCriteriaValid: (password: string) => PASSWORD_NUMBER_REGEX.test(password),
-  // },
-  // {
-  //   key: "min_1_number",
-  //   label: "Min 1 number",
-  //   isCriteriaValid: (password: string) => PASSWORD_CHAR_CAPS_REGEX.test(password),
-  // },
-  // {
-  //   key: "min_1_special_char",
-  //   label: "Min 1 special character",
-  //   isCriteriaValid: (password: string) => PASSWORD_SPECIAL_CHAR_REGEX.test(password),
-  // },
-];
-
-export const getPasswordStrength = (password: string): E_PASSWORD_STRENGTH => {
-  let passwordStrength: E_PASSWORD_STRENGTH = E_PASSWORD_STRENGTH.EMPTY;
-
-  if (!password || password === "" || password.length <= 0) {
-    return passwordStrength;
-  }
-
-  if (password.length >= PASSWORD_MIN_LENGTH) {
-    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
-  } else {
-    passwordStrength = E_PASSWORD_STRENGTH.LENGTH_NOT_VALID;
-    return passwordStrength;
-  }
-
-  const passwordCriteriaValidation = PASSWORD_CRITERIA.map((criteria) => criteria.isCriteriaValid(password)).every(
-    (criterion) => criterion
-  );
-  const passwordStrengthScore = zxcvbn(password).score;
-
-  if (passwordCriteriaValidation === false || passwordStrengthScore <= 2) {
-    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
-    return passwordStrength;
-  }
-
-  if (passwordCriteriaValidation === true && passwordStrengthScore >= 3) {
-    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_VALID;
-  }
-
-  return passwordStrength;
-};

admin/helpers/string.helper.ts

@@ -1,21 +0,0 @@
-/**
- * @description
- * This function test whether a URL is valid or not.
- *
- * It accepts URLs with or without the protocol.
- * @param {string} url
- * @returns {boolean}
- * @example
- * checkURLValidity("https://example.com") => true
- * checkURLValidity("example.com") => true
- * checkURLValidity("example") => false
- */
-export const checkURLValidity = (url: string): boolean => {
-  if (!url) return false;
-
-  // regex to support complex query parameters and fragments
-  const urlPattern =
-    /^(https?:\/\/)?((([a-z\d-]+\.)*[a-z\d-]+\.[a-z]{2,6})|(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))(:\d+)?(\/[\w.-]*)*(\?[^#\s]*)?(#[\w-]*)?$/i;
-
-  return urlPattern.test(url);
-};

admin/tsconfig.json

@@ -5,7 +5,6 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["core/*"],
-      "@/helpers/*": ["helpers/*"],
       "@/public/*": ["public/*"],
       "@/plane-admin/*": ["ce/*"]
     }

apiserver/plane/api/serializers/issue.py

@@ -237,17 +237,37 @@ class IssueSerializer(BaseSerializer):
                 from .user import UserLiteSerializer
 
                 data["assignees"] = UserLiteSerializer(
-                    instance.assignees.all(), many=True
+                    User.objects.filter(
+                        pk__in=IssueAssignee.objects.filter(issue=instance).values_list(
+                            "assignee_id", flat=True
+                        )
+                    ),
+                    many=True,
                 ).data
             else:
                 data["assignees"] = [
-                    str(assignee.id) for assignee in instance.assignees.all()
+                    str(assignee)
+                    for assignee in IssueAssignee.objects.filter(
+                        issue=instance
+                    ).values_list("assignee_id", flat=True)
                 ]
         if "labels" in self.fields:
             if "labels" in self.expand:
-                data["labels"] = LabelSerializer(instance.labels.all(), many=True).data
+                data["labels"] = LabelSerializer(
+                    Label.objects.filter(
+                        pk__in=IssueLabel.objects.filter(issue=instance).values_list(
+                            "label_id", flat=True
+                        )
+                    ),
+                    many=True,
+                ).data
             else:
-                data["labels"] = [str(label.id) for label in instance.labels.all()]
+                data["labels"] = [
+                    str(label)
+                    for label in IssueLabel.objects.filter(issue=instance).values_list(
+                        "label_id", flat=True
+                    )
+                ]
 
         return data
 

apiserver/plane/api/views/intake.py

@@ -109,16 +109,6 @@ class IntakeIssueAPIEndpoint(BaseAPIView):
                 {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-        # Create or get state
-        state, _ = State.objects.get_or_create(
-            name="Triage",
-            group="triage",
-            description="Default state for managing all Intake Issues",
-            project_id=project_id,
-            color="#ff7700",
-            is_triage=True,
-        )
-
         # create an issue
         issue = Issue.objects.create(
             name=request.data.get("issue", {}).get("name"),
@@ -128,7 +118,6 @@ class IntakeIssueAPIEndpoint(BaseAPIView):
             ),
             priority=request.data.get("issue", {}).get("priority", "none"),
             project_id=project_id,
-            state=state,
         )
 
         # create an intake issue

apiserver/plane/api/views/project.py

@@ -258,7 +258,9 @@ class ProjectAPIEndpoint(BaseAPIView):
                 ProjectSerializer(project).data, cls=DjangoJSONEncoder
             )
 
-            intake_view = request.data.get("inbox_view", project.intake_view)
+            intake_view = request.data.get(
+                "inbox_view", request.data.get("intake_view", project.intake_view)
+            )
 
             if project.archived_at:
                 return Response(

apiserver/plane/app/serializers/webhook.py

@@ -116,7 +116,7 @@ class WebhookSerializer(DynamicBaseSerializer):
     class Meta:
         model = Webhook
         fields = "__all__"
-        read_only_fields = ["workspace", "secret_key"]
+        read_only_fields = ["workspace", "secret_key", "deleted_at"]
 
 
 class WebhookLogSerializer(DynamicBaseSerializer):

apiserver/plane/app/urls/__init__.py

@@ -17,6 +17,7 @@ from .user import urlpatterns as user_urls
 from .views import urlpatterns as view_urls
 from .webhook import urlpatterns as webhook_urls
 from .workspace import urlpatterns as workspace_urls
+from .timezone import urlpatterns as timezone_urls
 
 urlpatterns = [
     *analytic_urls,
@@ -38,4 +39,5 @@ urlpatterns = [
     *workspace_urls,
     *api_urls,
     *webhook_urls,
+    *timezone_urls,
 ]

apiserver/plane/app/urls/search.py

@@ -1,7 +1,7 @@
 from django.urls import path
 
 
-from plane.app.views import GlobalSearchEndpoint, IssueSearchEndpoint
+from plane.app.views import GlobalSearchEndpoint, IssueSearchEndpoint, SearchEndpoint
 
 
 urlpatterns = [
@@ -15,4 +15,9 @@ urlpatterns = [
         IssueSearchEndpoint.as_view(),
         name="project-issue-search",
     ),
+    path(
+        "workspaces/<str:slug>/entity-search/",
+        SearchEndpoint.as_view(),
+        name="entity-search",
+    ),
 ]

apiserver/plane/app/urls/timezone.py

@@ -0,0 +1,8 @@
+from django.urls import path
+
+from plane.app.views import TimezoneEndpoint
+
+urlpatterns = [
+    # timezone endpoint
+    path("timezones/", TimezoneEndpoint.as_view(), name="timezone-list")
+]

apiserver/plane/app/views/__init__.py

@@ -158,7 +158,7 @@ from .page.base import (
 )
 from .page.version import PageVersionEndpoint
 
-from .search.base import GlobalSearchEndpoint
+from .search.base import GlobalSearchEndpoint, SearchEndpoint
 from .search.issue import IssueSearchEndpoint
 
 
@@ -204,3 +204,5 @@ from .error_404 import custom_404_view
 
 from .notification.base import MarkAllReadNotificationViewSet
 from .user.base import AccountEndpoint, ProfileEndpoint, UserSessionEndpoint
+
+from .timezone.base import TimezoneEndpoint

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

@@ -126,7 +126,13 @@ class UserAssetsV2Endpoint(BaseAPIView):
             )
 
         # Check if the file type is allowed
-        allowed_types = ["image/jpeg", "image/png", "image/webp", "image/jpg"]
+        allowed_types = [
+            "image/jpeg",
+            "image/png",
+            "image/webp",
+            "image/jpg",
+            "image/gif",
+        ]
         if type not in allowed_types:
             return Response(
                 {

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

@@ -2,10 +2,21 @@
 import re
 
 # Django imports
-from django.db.models import Q, OuterRef, Subquery, Value, UUIDField, CharField
+from django.db import models
+from django.db.models import (
+    Q,
+    OuterRef,
+    Subquery,
+    Value,
+    UUIDField,
+    CharField,
+    When,
+    Case,
+)
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
-from django.db.models.functions import Coalesce
+from django.db.models.functions import Coalesce, Concat
+from django.utils import timezone
 
 # Third party imports
 from rest_framework import status
@@ -21,7 +32,9 @@ from plane.db.models import (
     Module,
     Page,
     IssueView,
+    ProjectMember,
     ProjectPage,
+    WorkspaceMember,
 )
 
 
@@ -237,3 +250,459 @@ class GlobalSearchEndpoint(BaseAPIView):
             func = MODELS_MAPPER.get(model, None)
             results[model] = func(query, slug, project_id, workspace_search)
         return Response({"results": results}, status=status.HTTP_200_OK)
+
+
+class SearchEndpoint(BaseAPIView):
+    def get(self, request, slug):
+        query = request.query_params.get("query", False)
+        query_types = request.query_params.get("query_type", "user_mention").split(",")
+        query_types = [qt.strip() for qt in query_types]
+        count = int(request.query_params.get("count", 5))
+        project_id = request.query_params.get("project_id", None)
+        issue_id = request.query_params.get("issue_id", None)
+
+        response_data = {}
+
+        if project_id:
+            for query_type in query_types:
+                if query_type == "user_mention":
+                    fields = [
+                        "member__first_name",
+                        "member__last_name",
+                        "member__display_name",
+                    ]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    base_filters = Q(
+                        q,
+                        is_active=True,
+                        workspace__slug=slug,
+                        member__is_bot=False,
+                        project_id=project_id,
+                        role__gt=10,
+                    )
+                    if issue_id:
+                        issue_created_by = (
+                            Issue.objects.filter(id=issue_id)
+                            .values_list("created_by_id", flat=True)
+                            .first()
+                        )
+                        # Add condition to include `issue_created_by` in the query
+                        filters = Q(member_id=issue_created_by) | base_filters
+                    else:
+                        filters = base_filters
+
+                    # Query to fetch users
+                    users = (
+                        ProjectMember.objects.filter(filters)
+                        .annotate(
+                            member__avatar_url=Case(
+                                When(
+                                    member__avatar_asset__isnull=False,
+                                    then=Concat(
+                                        Value("/api/assets/v2/static/"),
+                                        "member__avatar_asset",
+                                        Value("/"),
+                                    ),
+                                ),
+                                When(
+                                    member__avatar_asset__isnull=True,
+                                    then="member__avatar",
+                                ),
+                                default=Value(None),
+                                output_field=CharField(),
+                            )
+                        )
+                        .order_by("-created_at")
+                        .values(
+                            "member__avatar_url",
+                            "member__display_name",
+                            "member__id",
+                        )[:count]
+                    )
+
+                    response_data["user_mention"] = list(users)
+
+                elif query_type == "project":
+                    fields = ["name", "identifier"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+                    projects = (
+                        Project.objects.filter(
+                            q,
+                            Q(project_projectmember__member=self.request.user)
+                            | Q(network=2),
+                            workspace__slug=slug,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name", "id", "identifier", "logo_props", "workspace__slug"
+                        )[:count]
+                    )
+                    response_data["project"] = list(projects)
+
+                elif query_type == "issue":
+                    fields = ["name", "sequence_id", "project__identifier"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            if field == "sequence_id":
+                                sequences = re.findall(r"\b\d+\b", query)
+                                for sequence_id in sequences:
+                                    q |= Q(**{"sequence_id": sequence_id})
+                            else:
+                                q |= Q(**{f"{field}__icontains": query})
+
+                    issues = (
+                        Issue.issue_objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                            project_id=project_id,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "sequence_id",
+                            "project__identifier",
+                            "project_id",
+                            "priority",
+                            "state_id",
+                            "type_id",
+                        )[:count]
+                    )
+                    response_data["issue"] = list(issues)
+
+                elif query_type == "cycle":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    cycles = (
+                        Cycle.objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                            project_id=project_id,
+                        )
+                        .annotate(
+                            status=Case(
+                                When(
+                                    Q(start_date__lte=timezone.now())
+                                    & Q(end_date__gte=timezone.now()),
+                                    then=Value("CURRENT"),
+                                ),
+                                When(
+                                    start_date__gt=timezone.now(),
+                                    then=Value("UPCOMING"),
+                                ),
+                                When(
+                                    end_date__lt=timezone.now(), then=Value("COMPLETED")
+                                ),
+                                When(
+                                    Q(start_date__isnull=True)
+                                    & Q(end_date__isnull=True),
+                                    then=Value("DRAFT"),
+                                ),
+                                default=Value("DRAFT"),
+                                output_field=CharField(),
+                            )
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "project_id",
+                            "project__identifier",
+                            "status",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["cycle"] = list(cycles)
+
+                elif query_type == "module":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    modules = (
+                        Module.objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                            project_id=project_id,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "project_id",
+                            "project__identifier",
+                            "status",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["module"] = list(modules)
+
+                elif query_type == "page":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    pages = (
+                        Page.objects.filter(
+                            q,
+                            projects__project_projectmember__member=self.request.user,
+                            projects__project_projectmember__is_active=True,
+                            projects__id=project_id,
+                            workspace__slug=slug,
+                            access=0,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "logo_props",
+                            "projects__id",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["page"] = list(pages)
+            return Response(response_data, status=status.HTTP_200_OK)
+
+        else:
+            for query_type in query_types:
+                if query_type == "user_mention":
+                    fields = [
+                        "member__first_name",
+                        "member__last_name",
+                        "member__display_name",
+                    ]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+                    users = (
+                        WorkspaceMember.objects.filter(
+                            q,
+                            is_active=True,
+                            workspace__slug=slug,
+                            member__is_bot=False,
+                        )
+                        .annotate(
+                            member__avatar_url=Case(
+                                When(
+                                    member__avatar_asset__isnull=False,
+                                    then=Concat(
+                                        Value("/api/assets/v2/static/"),
+                                        "member__avatar_asset",
+                                        Value("/"),
+                                    ),
+                                ),
+                                When(
+                                    member__avatar_asset__isnull=True,
+                                    then="member__avatar",
+                                ),
+                                default=Value(None),
+                                output_field=models.CharField(),
+                            )
+                        )
+                        .order_by("-created_at")
+                        .values(
+                            "member__avatar_url", "member__display_name", "member__id"
+                        )[:count]
+                    )
+                    response_data["user_mention"] = list(users)
+
+                elif query_type == "project":
+                    fields = ["name", "identifier"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+                    projects = (
+                        Project.objects.filter(
+                            q,
+                            Q(project_projectmember__member=self.request.user)
+                            | Q(network=2),
+                            workspace__slug=slug,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name", "id", "identifier", "logo_props", "workspace__slug"
+                        )[:count]
+                    )
+                    response_data["project"] = list(projects)
+
+                elif query_type == "issue":
+                    fields = ["name", "sequence_id", "project__identifier"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            if field == "sequence_id":
+                                sequences = re.findall(r"\b\d+\b", query)
+                                for sequence_id in sequences:
+                                    q |= Q(**{"sequence_id": sequence_id})
+                            else:
+                                q |= Q(**{f"{field}__icontains": query})
+
+                    issues = (
+                        Issue.issue_objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "sequence_id",
+                            "project__identifier",
+                            "project_id",
+                            "priority",
+                            "state_id",
+                            "type_id",
+                        )[:count]
+                    )
+                    response_data["issue"] = list(issues)
+
+                elif query_type == "cycle":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    cycles = (
+                        Cycle.objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                        )
+                        .annotate(
+                            status=Case(
+                                When(
+                                    Q(start_date__lte=timezone.now())
+                                    & Q(end_date__gte=timezone.now()),
+                                    then=Value("CURRENT"),
+                                ),
+                                When(
+                                    start_date__gt=timezone.now(),
+                                    then=Value("UPCOMING"),
+                                ),
+                                When(
+                                    end_date__lt=timezone.now(), then=Value("COMPLETED")
+                                ),
+                                When(
+                                    Q(start_date__isnull=True)
+                                    & Q(end_date__isnull=True),
+                                    then=Value("DRAFT"),
+                                ),
+                                default=Value("DRAFT"),
+                                output_field=CharField(),
+                            )
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "project_id",
+                            "project__identifier",
+                            "status",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["cycle"] = list(cycles)
+
+                elif query_type == "module":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    modules = (
+                        Module.objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "project_id",
+                            "project__identifier",
+                            "status",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["module"] = list(modules)
+
+                elif query_type == "page":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    pages = (
+                        Page.objects.filter(
+                            q,
+                            projects__project_projectmember__member=self.request.user,
+                            projects__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                            access=0,
+                            is_global=True,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "logo_props",
+                            "projects__id",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["page"] = list(pages)
+            return Response(response_data, status=status.HTTP_200_OK)

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

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

apiserver/plane/bgtasks/notification_task.py

@@ -32,7 +32,6 @@ from bs4 import BeautifulSoup
 
 def update_mentions_for_issue(issue, project, new_mentions, removed_mention):
     aggregated_issue_mentions = []
-
     for mention_id in new_mentions:
         aggregated_issue_mentions.append(
             IssueMention(
@@ -125,7 +124,9 @@ def extract_mentions(issue_instance):
         data = json.loads(issue_instance)
         html = data.get("description_html")
         soup = BeautifulSoup(html, "html.parser")
-        mention_tags = soup.find_all("mention-component", attrs={"target": "users"})
+        mention_tags = soup.find_all(
+            "mention-component", attrs={"entity_name": "user_mention"}
+        )
 
         mentions = [mention_tag["entity_identifier"] for mention_tag in mention_tags]
 
@@ -139,7 +140,9 @@ def extract_comment_mentions(comment_value):
     try:
         mentions = []
         soup = BeautifulSoup(comment_value, "html.parser")
-        mentions_tags = soup.find_all("mention-component", attrs={"target": "users"})
+        mentions_tags = soup.find_all(
+            "mention-component", attrs={"entity_name": "user_mention"}
+        )
         for mention_tag in mentions_tags:
             mentions.append(mention_tag["entity_identifier"])
         return list(set(mentions))
@@ -255,12 +258,9 @@ def notifications(
             new_mentions = get_new_mentions(
                 requested_instance=requested_data, current_instance=current_instance
             )
-
-            new_mentions = [
-                str(mention)
-                for mention in new_mentions
-                if mention in set(project_members)
-            ]
+            new_mentions = list(
+                set(new_mentions) & {str(member) for member in project_members}
+            )
             removed_mention = get_removed_mentions(
                 requested_instance=requested_data, current_instance=current_instance
             )

apiserver/plane/db/migrations/0088_sticky_sort_order_workspaceuserlink.py

@@ -0,0 +1,124 @@
+# Generated by Django 4.2.15 on 2024-12-24 14:57
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0087_remove_issueversion_description_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="sticky",
+            name="sort_order",
+            field=models.FloatField(default=65535),
+        ),
+        migrations.CreateModel(
+            name="WorkspaceUserLink",
+            fields=[
+                (
+                    "created_at",
+                    models.DateTimeField(auto_now_add=True, verbose_name="Created At"),
+                ),
+                (
+                    "updated_at",
+                    models.DateTimeField(
+                        auto_now=True, verbose_name="Last Modified At"
+                    ),
+                ),
+                (
+                    "deleted_at",
+                    models.DateTimeField(
+                        blank=True, null=True, verbose_name="Deleted At"
+                    ),
+                ),
+                (
+                    "id",
+                    models.UUIDField(
+                        db_index=True,
+                        default=uuid.uuid4,
+                        editable=False,
+                        primary_key=True,
+                        serialize=False,
+                        unique=True,
+                    ),
+                ),
+                ("title", models.CharField(blank=True, max_length=255, null=True)),
+                ("url", models.TextField()),
+                ("metadata", models.JSONField(default=dict)),
+                (
+                    "created_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_created_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Created By",
+                    ),
+                ),
+                (
+                    "owner",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="owner_workspace_user_link",
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+                (
+                    "project",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="project_%(class)s",
+                        to="db.project",
+                    ),
+                ),
+                (
+                    "updated_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_updated_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Last Modified By",
+                    ),
+                ),
+                (
+                    "workspace",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="workspace_%(class)s",
+                        to="db.workspace",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Workspace User Link",
+                "verbose_name_plural": "Workspace User Links",
+                "db_table": "workspace_user_links",
+                "ordering": ("-created_at",),
+            },
+        ),
+        migrations.AlterField(
+            model_name="pagelog",
+            name="entity_name",
+            field=models.CharField(max_length=30, verbose_name="Transaction Type"),
+        ),
+        migrations.AlterUniqueTogether(
+            name="webhook",
+            unique_together={("workspace", "url", "deleted_at")},
+        ),
+        migrations.AddConstraint(
+            model_name="webhook",
+            constraint=models.UniqueConstraint(
+                condition=models.Q(("deleted_at__isnull", True)),
+                fields=("workspace", "url"),
+                name="webhook_url_unique_url_when_deleted_at_null",
+            ),
+        ),
+    ]

apiserver/plane/db/models/__init__.py

@@ -68,6 +68,7 @@ from .workspace import (
     WorkspaceMemberInvite,
     WorkspaceTheme,
     WorkspaceUserProperties,
+    WorkspaceUserLink,
 )
 
 from .favorite import UserFavorite

apiserver/plane/db/models/page.py

@@ -90,7 +90,7 @@ class PageLog(BaseModel):
     page = models.ForeignKey(Page, related_name="page_log", on_delete=models.CASCADE)
     entity_identifier = models.UUIDField(null=True)
     entity_name = models.CharField(
-        max_length=30, choices=TYPE_CHOICES, verbose_name="Transaction Type"
+        max_length=30, verbose_name="Transaction Type"
     )
     workspace = models.ForeignKey(
         "db.Workspace", on_delete=models.CASCADE, related_name="workspace_page_log"

apiserver/plane/db/models/sticky.py

@@ -24,9 +24,25 @@ class Sticky(BaseModel):
     owner = models.ForeignKey(
         settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="stickies"
     )
+    sort_order = models.FloatField(default=65535)
 
     class Meta:
         verbose_name = "Sticky"
         verbose_name_plural = "Stickies"
         db_table = "stickies"
         ordering = ("-created_at",)
+
+    def save(self, *args, **kwargs):
+        if self._state.adding:
+            # Get the maximum sequence value from the database
+            last_id = Sticky.objects.filter(workspace=self.workspace).aggregate(
+                largest=models.Max("sort_order")
+            )["largest"]
+            # if last_id is not None
+            if last_id is not None:
+                self.sort_order = last_id + 10000
+
+        super(Sticky, self).save(*args, **kwargs)
+
+    def __str__(self):
+        return str(self.name)

apiserver/plane/db/models/webhook.py

@@ -47,11 +47,18 @@ class Webhook(BaseModel):
         return f"{self.workspace.slug} {self.url}"
 
     class Meta:
-        unique_together = ["workspace", "url"]
+        unique_together = ["workspace", "url", "deleted_at"]
         verbose_name = "Webhook"
         verbose_name_plural = "Webhooks"
         db_table = "webhooks"
         ordering = ("-created_at",)
+        constraints = [
+            models.UniqueConstraint(
+                fields=["workspace", "url"],
+                condition=models.Q(deleted_at__isnull=True),
+                name="webhook_url_unique_url_when_deleted_at_null",
+            )
+        ]
 
 
 class WebhookLog(BaseModel):

apiserver/plane/db/models/workspace.py

@@ -322,3 +322,23 @@ class WorkspaceUserProperties(BaseModel):
 
     def __str__(self):
         return f"{self.workspace.name} {self.user.email}"
+
+
+class WorkspaceUserLink(WorkspaceBaseModel):
+    title = models.CharField(max_length=255, null=True, blank=True)
+    url = models.TextField()
+    metadata = models.JSONField(default=dict)
+    owner = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="owner_workspace_user_link",
+    )
+
+    class Meta:
+        verbose_name = "Workspace User Link"
+        verbose_name_plural = "Workspace User Links"
+        db_table = "workspace_user_links"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.workspace.id} {self.url}"

apiserver/plane/space/utils/grouper.py

@@ -91,6 +91,7 @@ def issue_on_results(issues, group_by, sub_group_by):
             Case(
                 When(
                     votes__isnull=False,
+                    votes__deleted_at__isnull=True,
                     then=JSONObject(
                         vote=F("votes__vote"),
                         actor_details=JSONObject(
@@ -117,13 +118,14 @@ def issue_on_results(issues, group_by, sub_group_by):
                 default=None,
                 output_field=JSONField(),
             ),
-            filter=Q(votes__isnull=False),
+            filter=Q(votes__isnull=False,votes__deleted_at__isnull=True),
             distinct=True,
         ),
         reaction_items=ArrayAgg(
             Case(
                 When(
                     issue_reactions__isnull=False,
+                    issue_reactions__deleted_at__isnull=True,
                     then=JSONObject(
                         reaction=F("issue_reactions__reaction"),
                         actor_details=JSONObject(
@@ -150,7 +152,7 @@ def issue_on_results(issues, group_by, sub_group_by):
                 default=None,
                 output_field=JSONField(),
             ),
-            filter=Q(issue_reactions__isnull=False),
+            filter=Q(issue_reactions__isnull=False, issue_reactions__deleted_at__isnull=True),
             distinct=True,
         ),
     ).values(*required_fields, "vote_items", "reaction_items")

apiserver/plane/space/views/asset.py

@@ -86,7 +86,13 @@ class EntityAssetEndpoint(BaseAPIView):
             )
 
         # Check if the file type is allowed
-        allowed_types = ["image/jpeg", "image/png", "image/webp"]
+        allowed_types = [
+            "image/jpeg",
+            "image/png",
+            "image/webp",
+            "image/jpg",
+            "image/gif",
+        ]
         if type not in allowed_types:
             return Response(
                 {

apiserver/plane/space/views/issue.py

@@ -701,6 +701,7 @@ class IssueRetrievePublicEndpoint(BaseAPIView):
                     Case(
                         When(
                             votes__isnull=False,
+                            votes__deleted_at__isnull=True,
                             then=JSONObject(
                                 vote=F("votes__vote"),
                                 actor_details=JSONObject(
@@ -732,7 +733,11 @@ class IssueRetrievePublicEndpoint(BaseAPIView):
                         output_field=JSONField(),
                     ),
                     filter=Case(
-                        When(votes__isnull=False, then=True),
+                        When(
+                            votes__isnull=False,
+                            votes__deleted_at__isnull=True,
+                            then=True,
+                        ),
                         default=False,
                         output_field=JSONField(),
                     ),
@@ -742,6 +747,7 @@ class IssueRetrievePublicEndpoint(BaseAPIView):
                     Case(
                         When(
                             issue_reactions__isnull=False,
+                            issue_reactions__deleted_at__isnull=True,
                             then=JSONObject(
                                 reaction=F("issue_reactions__reaction"),
                                 actor_details=JSONObject(
@@ -775,7 +781,11 @@ class IssueRetrievePublicEndpoint(BaseAPIView):
                         output_field=JSONField(),
                     ),
                     filter=Case(
-                        When(issue_reactions__isnull=False, then=True),
+                        When(
+                            issue_reactions__isnull=False,
+                            issue_reactions__deleted_at__isnull=True,
+                            then=True,
+                        ),
                         default=False,
                         output_field=JSONField(),
                     ),

live/.prettierignore

@@ -0,0 +1,6 @@
+.next
+.turbo
+out/
+dist/
+build/
+node_modules/

live/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

live/package.json

@@ -20,6 +20,7 @@
     "@hocuspocus/extension-logger": "^2.11.3",
     "@hocuspocus/extension-redis": "^2.13.5",
     "@hocuspocus/server": "^2.11.3",
+    "@plane/constants": "*",
     "@plane/editor": "*",
     "@plane/types": "*",
     "@sentry/node": "^8.28.0",

packages/constants/src/ai.ts

@@ -0,0 +1,3 @@
+export enum AI_EDITOR_TASKS {
+  ASK_ANYTHING = "ASK_ANYTHING",
+}

packages/constants/src/auth.ts

@@ -1,3 +1,36 @@
+export enum E_PASSWORD_STRENGTH {
+  EMPTY = "empty",
+  LENGTH_NOT_VALID = "length_not_valid",
+  STRENGTH_NOT_VALID = "strength_not_valid",
+  STRENGTH_VALID = "strength_valid",
+}
+
+export const PASSWORD_MIN_LENGTH = 8;
+
+export const SPACE_PASSWORD_CRITERIA = [
+  {
+    key: "min_8_char",
+    label: "Min 8 characters",
+    isCriteriaValid: (password: string) =>
+      password.length >= PASSWORD_MIN_LENGTH,
+  },
+  // {
+  //   key: "min_1_upper_case",
+  //   label: "Min 1 upper-case letter",
+  //   isCriteriaValid: (password: string) => PASSWORD_NUMBER_REGEX.test(password),
+  // },
+  // {
+  //   key: "min_1_number",
+  //   label: "Min 1 number",
+  //   isCriteriaValid: (password: string) => PASSWORD_CHAR_CAPS_REGEX.test(password),
+  // },
+  // {
+  //   key: "min_1_special_char",
+  //   label: "Min 1 special character",
+  //   isCriteriaValid: (password: string) => PASSWORD_SPECIAL_CHAR_REGEX.test(password),
+  // },
+];
+
 export enum EAuthPageTypes {
   PUBLIC = "PUBLIC",
   NON_AUTHENTICATED = "NON_AUTHENTICATED",
@@ -6,6 +39,14 @@ export enum EAuthPageTypes {
   AUTHENTICATED = "AUTHENTICATED",
 }
 
+export enum EPageTypes {
+  INIT = "INIT",
+  PUBLIC = "PUBLIC",
+  NON_AUTHENTICATED = "NON_AUTHENTICATED",
+  ONBOARDING = "ONBOARDING",
+  AUTHENTICATED = "AUTHENTICATED",
+}
+
 export enum EAuthModes {
   SIGN_IN = "SIGN_IN",
   SIGN_UP = "SIGN_UP",
@@ -17,15 +58,35 @@ export enum EAuthSteps {
   UNIQUE_CODE = "UNIQUE_CODE",
 }
 
-// TODO: remove this
 export enum EErrorAlertType {
   BANNER_ALERT = "BANNER_ALERT",
+  TOAST_ALERT = "TOAST_ALERT",
   INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
   INLINE_EMAIL = "INLINE_EMAIL",
   INLINE_PASSWORD = "INLINE_PASSWORD",
   INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
 }
 
+export type TAuthErrorInfo = {
+  type: EErrorAlertType;
+  code: EAdminAuthErrorCodes;
+  title: string;
+  message: any;
+};
+
+export enum EAdminAuthErrorCodes {
+  // Admin
+  ADMIN_ALREADY_EXIST = "5150",
+  REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME = "5155",
+  INVALID_ADMIN_EMAIL = "5160",
+  INVALID_ADMIN_PASSWORD = "5165",
+  REQUIRED_ADMIN_EMAIL_PASSWORD = "5170",
+  ADMIN_AUTHENTICATION_FAILED = "5175",
+  ADMIN_USER_ALREADY_EXIST = "5180",
+  ADMIN_USER_DOES_NOT_EXIST = "5185",
+  ADMIN_USER_DEACTIVATED = "5190",
+}
+
 export enum EAuthErrorCodes {
   // Global
   INSTANCE_NOT_CONFIGURED = "5000",
@@ -74,7 +135,7 @@ export enum EAuthErrorCodes {
   INCORRECT_OLD_PASSWORD = "5135",
   MISSING_PASSWORD = "5138",
   INVALID_NEW_PASSWORD = "5140",
-  // set passowrd
+  // set password
   PASSWORD_ALREADY_SET = "5145",
   // Admin
   ADMIN_ALREADY_EXIST = "5150",

packages/constants/src/endpoints.ts

@@ -1,18 +1,25 @@
 export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "";
-// PI Base Url
-export const PI_BASE_URL = process.env.NEXT_PUBLIC_PI_BASE_URL || "";
+export const API_BASE_PATH = process.env.NEXT_PUBLIC_API_BASE_PATH || "/";
+export const API_URL = encodeURI(`${API_BASE_URL}${API_BASE_PATH}`);
 // God Mode Admin App Base Url
 export const ADMIN_BASE_URL = process.env.NEXT_PUBLIC_ADMIN_BASE_URL || "";
-export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "";
-export const GOD_MODE_URL = encodeURI(`${ADMIN_BASE_URL}${ADMIN_BASE_PATH}/`);
+export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "/";
+export const GOD_MODE_URL = encodeURI(`${ADMIN_BASE_URL}${ADMIN_BASE_PATH}`);
 // Publish App Base Url
 export const SPACE_BASE_URL = process.env.NEXT_PUBLIC_SPACE_BASE_URL || "";
-export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_SPACE_BASE_PATH || "";
-export const SITES_URL = encodeURI(`${SPACE_BASE_URL}${SPACE_BASE_PATH}/`);
+export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_SPACE_BASE_PATH || "/";
+export const SITES_URL = encodeURI(`${SPACE_BASE_URL}${SPACE_BASE_PATH}`);
 // Live App Base Url
 export const LIVE_BASE_URL = process.env.NEXT_PUBLIC_LIVE_BASE_URL || "";
-export const LIVE_BASE_PATH = process.env.NEXT_PUBLIC_LIVE_BASE_PATH || "";
-export const LIVE_URL = encodeURI(`${LIVE_BASE_URL}${LIVE_BASE_PATH}/`);
+export const LIVE_BASE_PATH = process.env.NEXT_PUBLIC_LIVE_BASE_PATH || "/";
+export const LIVE_URL = encodeURI(`${LIVE_BASE_URL}${LIVE_BASE_PATH}`);
+// Web App Base Url
+export const WEB_BASE_URL = process.env.NEXT_PUBLIC_WEB_BASE_URL || "";
+export const WEB_BASE_PATH = process.env.NEXT_PUBLIC_WEB_BASE_PATH || "/";
+export const WEB_URL = encodeURI(`${WEB_BASE_URL}${WEB_BASE_PATH}`);
 // plane website url
 export const WEBSITE_URL =
   process.env.NEXT_PUBLIC_WEBSITE_URL || "https://plane.so";
+// support email
+export const SUPPORT_EMAIL =
+  process.env.NEXT_PUBLIC_SUPPORT_EMAIL || "support@plane.so";

packages/constants/src/index.ts

@@ -1,4 +1,11 @@
+export * from "./ai";
 export * from "./auth";
 export * from "./endpoints";
+export * from "./file";
+export * from "./instance";
 export * from "./issue";
+export * from "./metadata";
+export * from "./state";
+export * from "./swr";
+export * from "./user";
 export * from "./workspace";

packages/constants/src/issue.ts

@@ -1,5 +1,25 @@
+import { List, Kanban } from "lucide-react";
+
 export const ALL_ISSUES = "All Issues";
 
+export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
+
+export type TIssueFilterKeys = "priority" | "state" | "labels";
+
+export type TIssueLayout =
+  | "list"
+  | "kanban"
+  | "calendar"
+  | "spreadsheet"
+  | "gantt";
+
+export type TIssueFilterPriorityObject = {
+  key: TIssuePriorities;
+  title: string;
+  className: string;
+  icon: string;
+};
+
 export enum EIssueGroupByToServerOptions {
   "state" = "state_id",
   "priority" = "priority",
@@ -39,3 +59,127 @@ export enum EServerGroupByToFilterOptions {
   "project_id" = "project",
   "created_by" = "created_by",
 }
+
+export enum EIssueServiceType {
+  ISSUES = "issues",
+  EPICS = "epics",
+}
+
+export enum EIssueLayoutTypes {
+  LIST = "list",
+  KANBAN = "kanban",
+  CALENDAR = "calendar",
+  GANTT = "gantt_chart",
+  SPREADSHEET = "spreadsheet",
+}
+
+export enum EIssuesStoreType {
+  GLOBAL = "GLOBAL",
+  PROFILE = "PROFILE",
+  TEAM = "TEAM",
+  PROJECT = "PROJECT",
+  CYCLE = "CYCLE",
+  MODULE = "MODULE",
+  TEAM_VIEW = "TEAM_VIEW",
+  PROJECT_VIEW = "PROJECT_VIEW",
+  ARCHIVED = "ARCHIVED",
+  DRAFT = "DRAFT",
+  DEFAULT = "DEFAULT",
+  WORKSPACE_DRAFT = "WORKSPACE_DRAFT",
+  EPIC = "EPIC",
+}
+
+export enum EIssueFilterType {
+  FILTERS = "filters",
+  DISPLAY_FILTERS = "display_filters",
+  DISPLAY_PROPERTIES = "display_properties",
+  KANBAN_FILTERS = "kanban_filters",
+}
+
+export enum EIssueCommentAccessSpecifier {
+  EXTERNAL = "EXTERNAL",
+  INTERNAL = "INTERNAL",
+}
+
+export enum EIssueListRow {
+  HEADER = "HEADER",
+  ISSUE = "ISSUE",
+  NO_ISSUES = "NO_ISSUES",
+  QUICK_ADD = "QUICK_ADD",
+}
+
+export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
+  [key in TIssueLayout]: Record<"filters", TIssueFilterKeys[]>;
+} = {
+  list: {
+    filters: ["priority", "state", "labels"],
+  },
+  kanban: {
+    filters: ["priority", "state", "labels"],
+  },
+  calendar: {
+    filters: ["priority", "state", "labels"],
+  },
+  spreadsheet: {
+    filters: ["priority", "state", "labels"],
+  },
+  gantt: {
+    filters: ["priority", "state", "labels"],
+  },
+};
+
+export const ISSUE_PRIORITIES: {
+  key: TIssuePriorities;
+  title: string;
+}[] = [
+  { key: "urgent", title: "Urgent" },
+  { key: "high", title: "High" },
+  { key: "medium", title: "Medium" },
+  { key: "low", title: "Low" },
+  { key: "none", title: "None" },
+];
+
+export const ISSUE_PRIORITY_FILTERS: TIssueFilterPriorityObject[] = [
+  {
+    key: "urgent",
+    title: "Urgent",
+    className: "bg-red-500 border-red-500 text-white",
+    icon: "error",
+  },
+  {
+    key: "high",
+    title: "High",
+    className: "text-orange-500 border-custom-border-300",
+    icon: "signal_cellular_alt",
+  },
+  {
+    key: "medium",
+    title: "Medium",
+    className: "text-yellow-500 border-custom-border-300",
+    icon: "signal_cellular_alt_2_bar",
+  },
+  {
+    key: "low",
+    title: "Low",
+    className: "text-green-500 border-custom-border-300",
+    icon: "signal_cellular_alt_1_bar",
+  },
+  {
+    key: "none",
+    title: "None",
+    className: "text-gray-500 border-custom-border-300",
+    icon: "block",
+  },
+];
+
+export const SITES_ISSUE_LAYOUTS: {
+  key: TIssueLayout;
+  title: string;
+  icon: any;
+}[] = [
+  { key: "list", title: "List", icon: List },
+  { key: "kanban", title: "Kanban", icon: Kanban },
+  // { key: "calendar", title: "Calendar", icon: Calendar },
+  // { key: "spreadsheet", title: "Spreadsheet", icon: Sheet },
+  // { key: "gantt", title: "Gantt chart", icon: GanttChartSquare },
+];

packages/constants/src/metadata.ts

@@ -0,0 +1,23 @@
+export const SITE_NAME =
+  "Plane | Simple, extensible, open-source project management tool.";
+export const SITE_TITLE =
+  "Plane | Simple, extensible, open-source project management tool.";
+export const SITE_DESCRIPTION =
+  "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.";
+export const SITE_KEYWORDS =
+  "software development, plan, ship, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration";
+export const SITE_URL = "https://app.plane.so/";
+export const TWITTER_USER_NAME =
+  "Plane | Simple, extensible, open-source project management tool.";
+
+// Plane Sites Metadata
+export const SPACE_SITE_NAME =
+  "Plane Publish | Make your Plane boards and roadmaps pubic with just one-click. ";
+export const SPACE_SITE_TITLE =
+  "Plane Publish | Make your Plane boards public with one-click";
+export const SPACE_SITE_DESCRIPTION =
+  "Plane Publish is a customer feedback management tool built on top of plane.so";
+export const SPACE_SITE_KEYWORDS =
+  "software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration";
+export const SPACE_SITE_URL = "https://app.plane.so/";
+export const SPACE_TWITTER_USER_NAME = "planepowers";

packages/constants/src/state.ts

@@ -1,4 +1,9 @@
-import { TStateGroups } from "@plane/types";
+export type TStateGroups =
+  | "backlog"
+  | "unstarted"
+  | "started"
+  | "completed"
+  | "cancelled";
 
 export const STATE_GROUPS: {
   [key in TStateGroups]: {
@@ -34,4 +39,7 @@ export const STATE_GROUPS: {
   },
 };
 
-export const ARCHIVABLE_STATE_GROUPS = [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key];
+export const ARCHIVABLE_STATE_GROUPS = [
+  STATE_GROUPS.completed.key,
+  STATE_GROUPS.cancelled.key,
+];

packages/constants/src/swr.ts

@@ -1,4 +1,4 @@
-export const SWR_CONFIG = {
+export const DEFAULT_SWR_CONFIG = {
   refreshWhenHidden: false,
   revalidateIfStale: false,
   revalidateOnFocus: false,

packages/editor/package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.4",
     "@hocuspocus/provider": "^2.13.5",
+    "@plane/types": "*",
     "@plane/ui": "*",
     "@plane/utils": "*",
     "@tiptap/core": "^2.1.13",
@@ -57,7 +58,6 @@
     "@tiptap/starter-kit": "^2.1.13",
     "@tiptap/suggestion": "^2.0.13",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^1.2.1",
     "highlight.js": "^11.8.0",
     "jsx-dom-cjs": "^8.0.3",
     "linkifyjs": "^4.1.3",
@@ -66,7 +66,6 @@
     "prosemirror-codemark": "^0.4.2",
     "prosemirror-utils": "^1.2.2",
     "react-moveable": "^0.54.2",
-    "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.9",
     "uuid": "^10.0.0",

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

@@ -19,6 +19,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     containerClassName,
     disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
+    editable,
     editorClassName = "",
     embedHandler,
     fileHandler,
@@ -44,8 +45,8 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
 
   // use document editor
   const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
-    onTransaction,
     disabledExtensions,
+    editable,
     editorClassName,
     embedHandler,
     extensions,
@@ -54,6 +55,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     handleEditorReady,
     id,
     mentionHandler,
+    onTransaction,
     placeholder,
     realtimeConfig,
     serverHandler,

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

@@ -1,81 +0,0 @@
-import { forwardRef, MutableRefObject } from "react";
-// components
-import { DocumentContentLoader, PageRenderer } from "@/components/editors";
-// constants
-import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
-// extensions
-import { IssueWidget } from "@/extensions";
-// helpers
-import { getEditorClassNames } from "@/helpers/common";
-// hooks
-import { useReadOnlyCollaborativeEditor } from "@/hooks/use-read-only-collaborative-editor";
-// types
-import { EditorReadOnlyRefApi, ICollaborativeDocumentReadOnlyEditor } from "@/types";
-
-const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOnlyEditor) => {
-  const {
-    containerClassName,
-    disabledExtensions,
-    displayConfig = DEFAULT_DISPLAY_CONFIG,
-    editorClassName = "",
-    embedHandler,
-    fileHandler,
-    forwardedRef,
-    handleEditorReady,
-    id,
-    mentionHandler,
-    realtimeConfig,
-    serverHandler,
-    user,
-  } = props;
-  const extensions = [];
-  if (embedHandler?.issue) {
-    extensions.push(
-      IssueWidget({
-        widgetCallback: embedHandler.issue.widgetCallback,
-      })
-    );
-  }
-
-  const { editor, hasServerConnectionFailed, hasServerSynced } = useReadOnlyCollaborativeEditor({
-    disabledExtensions,
-    editorClassName,
-    extensions,
-    fileHandler,
-    forwardedRef,
-    handleEditorReady,
-    id,
-    mentionHandler,
-    realtimeConfig,
-    serverHandler,
-    user,
-  });
-
-  const editorContainerClassName = getEditorClassNames({
-    containerClassName,
-  });
-
-  if (!editor) return null;
-
-  if (!hasServerSynced && !hasServerConnectionFailed) return <DocumentContentLoader />;
-
-  return (
-    <PageRenderer
-      displayConfig={displayConfig}
-      id={id}
-      editor={editor}
-      editorContainerClassName={editorContainerClassName}
-    />
-  );
-};
-
-const CollaborativeDocumentReadOnlyEditorWithRef = forwardRef<
-  EditorReadOnlyRefApi,
-  ICollaborativeDocumentReadOnlyEditor
->((props, ref) => (
-  <CollaborativeDocumentReadOnlyEditor {...props} forwardedRef={ref as MutableRefObject<EditorReadOnlyRefApi | null>} />
-));
-
-CollaborativeDocumentReadOnlyEditorWithRef.displayName = "CollaborativeDocumentReadOnlyEditorWithRef";
-
-export { CollaborativeDocumentReadOnlyEditorWithRef };

packages/editor/src/core/components/editors/document/index.ts

@@ -1,5 +1,4 @@
 export * from "./collaborative-editor";
-export * from "./collaborative-read-only-editor";
 export * from "./loader";
 export * from "./page-renderer";
 export * from "./read-only-editor";

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

@@ -140,10 +140,10 @@ export const PageRenderer = (props: IPageRenderer) => {
         >
           <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
           {editor.isEditable && (
-            <>
+            <div>
               <BlockMenu editor={editor} />
               <AIFeaturesMenu menu={aiHandler?.menu} />
-            </>
+            </div>
           )}
         </EditorContainer>
       </div>

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

@@ -10,7 +10,7 @@ import { getEditorClassNames } from "@/helpers/common";
 // hooks
 import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
 // types
-import { EditorReadOnlyRefApi, IMentionHighlight, TDisplayConfig, TExtensions, TFileHandler } from "@/types";
+import { EditorReadOnlyRefApi, TDisplayConfig, TExtensions, TFileHandler, TReadOnlyMentionHandler } from "@/types";
 
 interface IDocumentReadOnlyEditor {
   disabledExtensions: TExtensions[];
@@ -23,9 +23,7 @@ interface IDocumentReadOnlyEditor {
   fileHandler: Pick<TFileHandler, "getAssetSrc">;
   tabIndex?: number;
   handleEditorReady?: (value: boolean) => void;
-  mentionHandler: {
-    highlights: () => Promise<IMentionHighlight[]>;
-  };
+  mentionHandler: TReadOnlyMentionHandler;
   forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
 }
 

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

@@ -1,9 +1,9 @@
 import { FC, ReactNode } from "react";
 import { Editor } from "@tiptap/react";
+// plane utils
+import { cn } from "@plane/utils";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
-// helpers
-import { cn } from "@/helpers/common";
 // types
 import { TDisplayConfig } from "@/types";
 

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

@@ -1,4 +1,4 @@
-import { Editor, Extension } from "@tiptap/core";
+import { Editor, Extensions } from "@tiptap/core";
 // components
 import { EditorContainer } from "@/components/editors";
 // constants
@@ -12,7 +12,7 @@ import { EditorContentWrapper } from "./editor-content";
 
 type Props = IEditorProps & {
   children?: (editor: Editor) => React.ReactNode;
-  extensions: Extension<any, any>[];
+  extensions: Extensions;
 };
 
 export const EditorWrapper: React.FC<Props> = (props) => {
@@ -38,6 +38,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
   } = props;
 
   const editor = useEditor({
+    editable: true,
     disabledExtensions,
     editorClassName,
     enableHistory: true,

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import tippy, { Instance } from "tippy.js";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // types
 import { TAIHandler } from "@/types";
 

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

@@ -1,9 +1,9 @@
 import { Editor } from "@tiptap/core";
 import { AlignCenter, AlignLeft, AlignRight, LucideIcon } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { TextAlignItem } from "@/components/menus";
-// helpers
-import { cn } from "@/helpers/common";
 // types
 import { TEditorCommands } from "@/types";
 

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

@@ -1,10 +1,11 @@
 import { Dispatch, FC, SetStateAction } from "react";
 import { Editor } from "@tiptap/react";
 import { ALargeSmall, Ban } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // constants
 import { COLORS_LIST } from "@/constants/common";
 // helpers
-import { cn } from "@/helpers/common";
 import { BackgroundColorItem, TextColorItem } from "../menu-items";
 
 type Props = {

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

@@ -1,8 +1,10 @@
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
 import { Editor } from "@tiptap/core";
 import { Check, Link, Trash } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // helpers
-import { cn, isValidHttpUrl } from "@/helpers/common";
+import { isValidHttpUrl } from "@/helpers/common";
 import { setLinkEditor, unsetLinkEditor } from "@/helpers/editor-commands";
 
 type Props = {

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

@@ -1,6 +1,8 @@
 import { Dispatch, FC, SetStateAction } from "react";
 import { Editor } from "@tiptap/react";
 import { Check, ChevronDown } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import {
   BulletListItem,
@@ -17,8 +19,6 @@ import {
   HeadingSixItem,
   EditorMenuItem,
 } from "@/components/menus";
-// helpers
-import { cn } from "@/helpers/common";
 // types
 import { TEditorCommands } from "@/types";
 

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

@@ -1,5 +1,7 @@
 import { FC, useEffect, useState } from "react";
 import { BubbleMenu, BubbleMenuProps, Editor, isNodeSelection } from "@tiptap/react";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import {
   BoldItem,
@@ -13,8 +15,6 @@ import {
 } from "@/components/menus";
 // extensions
 import { isCellSelection } from "@/extensions/table/table/utilities/is-cell-selection";
-// helpers
-import { cn } from "@/helpers/common";
 // local components
 import { TextAlignmentSelector } from "./alignment-selector";
 

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

@@ -1,3 +1,185 @@
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  CaseSensitive,
+  Code2,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
+  Image,
+  Italic,
+  List,
+  ListOrdered,
+  ListTodo,
+  LucideIcon,
+  Strikethrough,
+  Table,
+  TextQuote,
+  Underline,
+} from "lucide-react";
+import { TCommandExtraProps, TEditorCommands } from "@/types/editor";
+
+export type TEditorTypes = "lite" | "document";
+
+// Utility type to enforce the necessary extra props or make extraProps optional
+export type ExtraPropsForCommand<T extends TEditorCommands> = T extends keyof TCommandExtraProps
+  ? TCommandExtraProps[T]
+  : object; // Default to empty object for commands without extra props
+
+export type ToolbarMenuItem<T extends TEditorCommands = TEditorCommands> = {
+  itemKey: T;
+  renderKey: string;
+  name: string;
+  icon: LucideIcon;
+  shortcut?: string[];
+  editors: TEditorTypes[];
+  extraProps?: ExtraPropsForCommand<T>;
+};
+
+export const TYPOGRAPHY_ITEMS: ToolbarMenuItem<"text" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6">[] = [
+  { itemKey: "text", renderKey: "text", name: "Text", icon: CaseSensitive, editors: ["document"] },
+  { itemKey: "h1", renderKey: "h1", name: "Heading 1", icon: Heading1, editors: ["document"] },
+  { itemKey: "h2", renderKey: "h2", name: "Heading 2", icon: Heading2, editors: ["document"] },
+  { itemKey: "h3", renderKey: "h3", name: "Heading 3", icon: Heading3, editors: ["document"] },
+  { itemKey: "h4", renderKey: "h4", name: "Heading 4", icon: Heading4, editors: ["document"] },
+  { itemKey: "h5", renderKey: "h5", name: "Heading 5", icon: Heading5, editors: ["document"] },
+  { itemKey: "h6", renderKey: "h6", name: "Heading 6", icon: Heading6, editors: ["document"] },
+];
+
+export const TEXT_ALIGNMENT_ITEMS: ToolbarMenuItem<"text-align">[] = [
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-left",
+    name: "Left align",
+    icon: AlignLeft,
+    shortcut: ["Cmd", "Shift", "L"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "left",
+    },
+  },
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-center",
+    name: "Center align",
+    icon: AlignCenter,
+    shortcut: ["Cmd", "Shift", "E"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "center",
+    },
+  },
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-right",
+    name: "Right align",
+    icon: AlignRight,
+    shortcut: ["Cmd", "Shift", "R"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "right",
+    },
+  },
+];
+
+const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strikethrough">[] = [
+  {
+    itemKey: "bold",
+    renderKey: "bold",
+    name: "Bold",
+    icon: Bold,
+    shortcut: ["Cmd", "B"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "italic",
+    renderKey: "italic",
+    name: "Italic",
+    icon: Italic,
+    shortcut: ["Cmd", "I"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "underline",
+    renderKey: "underline",
+    name: "Underline",
+    icon: Underline,
+    shortcut: ["Cmd", "U"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "strikethrough",
+    renderKey: "strikethrough",
+    name: "Strikethrough",
+    icon: Strikethrough,
+    shortcut: ["Cmd", "Shift", "S"],
+    editors: ["lite", "document"],
+  },
+];
+
+const LIST_ITEMS: ToolbarMenuItem<"bulleted-list" | "numbered-list" | "to-do-list">[] = [
+  {
+    itemKey: "bulleted-list",
+    renderKey: "bulleted-list",
+    name: "Bulleted list",
+    icon: List,
+    shortcut: ["Cmd", "Shift", "7"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "numbered-list",
+    renderKey: "numbered-list",
+    name: "Numbered list",
+    icon: ListOrdered,
+    shortcut: ["Cmd", "Shift", "8"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "to-do-list",
+    renderKey: "to-do-list",
+    name: "To-do list",
+    icon: ListTodo,
+    shortcut: ["Cmd", "Shift", "9"],
+    editors: ["lite", "document"],
+  },
+];
+
+export const USER_ACTION_ITEMS: ToolbarMenuItem<"quote" | "code">[] = [
+  { itemKey: "quote", renderKey: "quote", name: "Quote", icon: TextQuote, editors: ["lite", "document"] },
+  { itemKey: "code", renderKey: "code", name: "Code", icon: Code2, editors: ["lite", "document"] },
+];
+
+export const COMPLEX_ITEMS: ToolbarMenuItem<"table" | "image">[] = [
+  { itemKey: "table", renderKey: "table", name: "Table", icon: Table, editors: ["document"] },
+  { itemKey: "image", renderKey: "image", name: "Image", icon: Image, editors: ["lite", "document"] },
+];
+
+export const TOOLBAR_ITEMS: {
+  [editorType in TEditorTypes]: {
+    [key: string]: ToolbarMenuItem[];
+  };
+} = {
+  lite: {
+    basic: BASIC_MARK_ITEMS.filter((item) => item.editors.includes("lite")),
+    alignment: TEXT_ALIGNMENT_ITEMS.filter((item) => item.editors.includes("lite")),
+    list: LIST_ITEMS.filter((item) => item.editors.includes("lite")),
+    userAction: USER_ACTION_ITEMS.filter((item) => item.editors.includes("lite")),
+    complex: COMPLEX_ITEMS.filter((item) => item.editors.includes("lite")),
+  },
+  document: {
+    basic: BASIC_MARK_ITEMS.filter((item) => item.editors.includes("document")),
+    alignment: TEXT_ALIGNMENT_ITEMS.filter((item) => item.editors.includes("document")),
+    list: LIST_ITEMS.filter((item) => item.editors.includes("document")),
+    userAction: USER_ACTION_ITEMS.filter((item) => item.editors.includes("document")),
+    complex: COMPLEX_ITEMS.filter((item) => item.editors.includes("document")),
+  },
+};
+
 export const COLORS_LIST: {
   key: string;
   label: string;

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

@@ -5,3 +5,6 @@ export const DEFAULT_DISPLAY_CONFIG: TDisplayConfig = {
   fontSize: "large-font",
   fontStyle: "sans-serif",
 };
+
+export const ACCEPTED_FILE_MIME_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif"];
+export const ACCEPTED_FILE_EXTENSIONS = ACCEPTED_FILE_MIME_TYPES.map((type) => `.${type.split("/")[1]}`);

packages/editor/src/core/extensions/callout/color-selector.tsx

@@ -1,8 +1,8 @@
 import { Ban, ChevronDown } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // constants
 import { COLORS_LIST } from "@/constants/common";
-// helpers
-import { cn } from "@/helpers/common";
 
 type Props = {
   disabled: boolean;

packages/editor/src/core/extensions/callout/logo-selector.tsx

@@ -2,8 +2,8 @@
 import { convertHexEmojiToDecimal } from "@plane/utils";
 // plane ui
 import { EmojiIconPicker, EmojiIconPickerTypes, Logo, TEmojiLogoProps } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // types
 import { TCalloutBlockAttributes } from "./types";
 // utils

packages/editor/src/core/extensions/code/code-block-node-view.tsx

@@ -8,8 +8,8 @@ import { common, createLowlight } from "lowlight";
 import { CopyIcon, CheckIcon } from "lucide-react";
 // ui
 import { Tooltip } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 
 // we just have ts support for now
 const lowlight = createLowlight(common);

packages/editor/src/core/extensions/core-without-props.ts

@@ -13,7 +13,7 @@ import { CustomHorizontalRule } from "./horizontal-rule";
 import { ImageExtensionWithoutProps } from "./image";
 import { CustomImageComponentWithoutProps } from "./image/image-component-without-props";
 import { IssueWidgetWithoutProps } from "./issue-embed/issue-embed-without-props";
-import { CustomMentionWithoutProps } from "./mentions/mentions-without-props";
+import { CustomMentionExtensionConfig } from "./mentions/extension-config";
 import { CustomQuoteExtension } from "./quote";
 import { TableHeader, TableCell, TableRow, Table } from "./table";
 import { CustomTextAlignExtension } from "./text-align";
@@ -97,7 +97,7 @@ export const CoreEditorExtensionsWithoutProps = [
   TableHeader,
   TableCell,
   TableRow,
-  CustomMentionWithoutProps(),
+  CustomMentionExtensionConfig,
   CustomTextAlignExtension,
   CustomCalloutExtensionConfig,
   CustomColorExtension,

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

@@ -1,9 +1,9 @@
 import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
 import { NodeSelection } from "@tiptap/pm/state";
+// plane utils
+import { cn } from "@plane/utils";
 // extensions
 import { CustoBaseImageNodeViewProps, ImageToolbarRoot } from "@/extensions/custom-image";
-// helpers
-import { cn } from "@/helpers/common";
 
 const MIN_SIZE = 100;
 

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

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
 import { Editor, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { useEffect, useRef, useState } from "react";
 // extensions
 import { CustomImageBlock, CustomImageUploader, ImageAttributes } from "@/extensions/custom-image";
 

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

@@ -1,7 +1,9 @@
 import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react";
 import { ImageIcon } from "lucide-react";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
+// constants
+import { ACCEPTED_FILE_EXTENSIONS } from "@/constants/config";
 // hooks
 import { useUploader, useDropZone, uploadFirstImageAndInsertRemaining } from "@/hooks/use-file-upload";
 // extensions
@@ -127,7 +129,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
       return "Uploading...";
     }
 
-    if (draggedInside) {
+    if (draggedInside && editor.isEditable) {
       return "Drop image here";
     }
 
@@ -137,14 +139,16 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   return (
     <div
       className={cn(
-        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 hover:text-custom-text-200 bg-custom-background-90 hover:bg-custom-background-80 border border-dashed border-custom-border-300 transition-all duration-200 ease-in-out cursor-default",
+        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 bg-custom-background-90 border border-dashed border-custom-border-300 transition-all duration-200 ease-in-out cursor-default",
         {
-          "hover:text-custom-text-200 cursor-pointer": editor.isEditable,
-          "bg-custom-background-80 text-custom-text-200": draggedInside,
-          "text-custom-primary-200 bg-custom-primary-100/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200 border-custom-primary-200/10":
-            selected,
-          "text-red-500 cursor-default hover:text-red-500": failedToLoadImage,
-          "bg-red-500/10 hover:bg-red-500/10": failedToLoadImage && selected,
+          "hover:text-custom-text-200 hover:bg-custom-background-80 cursor-pointer": editor.isEditable,
+          "bg-custom-background-80 text-custom-text-200": draggedInside && editor.isEditable,
+          "text-custom-primary-200 bg-custom-primary-100/10 border-custom-primary-200/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200":
+            selected && editor.isEditable,
+          "text-red-500 cursor-default": failedToLoadImage,
+          "hover:text-red-500": failedToLoadImage && editor.isEditable,
+          "bg-red-500/10": failedToLoadImage && selected,
+          "hover:bg-red-500/10": failedToLoadImage && selected && editor.isEditable,
         }
       )}
       onDrop={onDrop}
@@ -164,7 +168,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
         ref={fileInputRef}
         hidden
         type="file"
-        accept=".jpg,.jpeg,.png,.webp"
+        accept={ACCEPTED_FILE_EXTENSIONS.join(",")}
         onChange={onFileChange}
         multiple
       />

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

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ExternalLink, Maximize, Minus, Plus, X } from "lucide-react";
-// helpers
-import { cn } from "@/helpers/common";
+import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+// plane utils
+import { cn } from "@plane/utils";
 
 type Props = {
   image: {
@@ -14,46 +14,77 @@ type Props = {
   toggleFullScreenMode: (val: boolean) => void;
 };
 
-const MAGNIFICATION_VALUES = [0.5, 0.75, 1, 1.5, 1.75, 2];
+const MIN_ZOOM = 0.5;
+const MAX_ZOOM = 2;
+const ZOOM_SPEED = 0.05;
+const ZOOM_STEPS = [0.5, 1, 1.5, 2];
 
 export const ImageFullScreenAction: React.FC<Props> = (props) => {
   const { image, isOpen: isFullScreenEnabled, toggleFullScreenMode } = props;
   const { src, width, aspectRatio } = image;
-  // states
-  const [magnification, setMagnification] = useState(1);
-  // refs
+
+  const [magnification, setMagnification] = useState<number>(1);
+  const [initialMagnification, setInitialMagnification] = useState(1);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const dragOffset = useRef({ x: 0, y: 0 });
   const modalRef = useRef<HTMLDivElement>(null);
-  // derived values
+  const imgRef = useRef<HTMLImageElement>(null);
+
   const widthInNumber = useMemo(() => Number(width?.replace("px", "")), [width]);
-  // close handler
-  const handleClose = useCallback(() => {
-    toggleFullScreenMode(false);
-    setTimeout(() => {
+
+  const setImageRef = useCallback(
+    (node: HTMLImageElement | null) => {
+      if (!node || !isFullScreenEnabled) return;
+
+      imgRef.current = node;
+
+      const viewportWidth = window.innerWidth * 0.9;
+      const viewportHeight = window.innerHeight * 0.75;
+      const imageWidth = widthInNumber;
+      const imageHeight = imageWidth / aspectRatio;
+
+      const widthRatio = viewportWidth / imageWidth;
+      const heightRatio = viewportHeight / imageHeight;
+
+      setInitialMagnification(Math.min(widthRatio, heightRatio));
       setMagnification(1);
-    }, 200);
-  }, [toggleFullScreenMode]);
-  // download handler
-  const handleOpenInNewTab = () => {
-    const link = document.createElement("a");
-    link.href = src;
-    link.target = "_blank";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-  // magnification decrease handler
-  const handleDecreaseMagnification = useCallback(() => {
-    const currentIndex = MAGNIFICATION_VALUES.indexOf(magnification);
-    if (currentIndex === 0) return;
-    setMagnification(MAGNIFICATION_VALUES[currentIndex - 1]);
-  }, [magnification]);
-  // magnification increase handler
-  const handleIncreaseMagnification = useCallback(() => {
-    const currentIndex = MAGNIFICATION_VALUES.indexOf(magnification);
-    if (currentIndex === MAGNIFICATION_VALUES.length - 1) return;
-    setMagnification(MAGNIFICATION_VALUES[currentIndex + 1]);
-  }, [magnification]);
-  // keydown handler
+
+      // Reset image position
+      node.style.left = "0px";
+      node.style.top = "0px";
+    },
+    [isFullScreenEnabled, widthInNumber, aspectRatio]
+  );
+
+  const handleClose = useCallback(() => {
+    if (isDragging) return;
+    toggleFullScreenMode(false);
+    setMagnification(1);
+    setInitialMagnification(1);
+  }, [isDragging, toggleFullScreenMode]);
+
+  const handleMagnification = useCallback((direction: "increase" | "decrease") => {
+    setMagnification((prev) => {
+      // Find the appropriate target zoom level based on current magnification
+      let targetZoom: number;
+      if (direction === "increase") {
+        targetZoom = ZOOM_STEPS.find((step) => step > prev) ?? MAX_ZOOM;
+      } else {
+        // Reverse the array to find the next lower step
+        targetZoom = [...ZOOM_STEPS].reverse().find((step) => step < prev) ?? MIN_ZOOM;
+      }
+
+      // Reset position when zoom matches initial magnification
+      if (targetZoom === 1 && imgRef.current) {
+        imgRef.current.style.left = "0px";
+        imgRef.current.style.top = "0px";
+      }
+
+      return targetZoom;
+    });
+  }, []);
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === "Escape" || e.key === "+" || e.key === "=" || e.key === "-") {
@@ -61,43 +92,113 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
         e.stopPropagation();
 
         if (e.key === "Escape") handleClose();
-        if (e.key === "+" || e.key === "=") handleIncreaseMagnification();
-        if (e.key === "-") handleDecreaseMagnification();
+        if (e.key === "+" || e.key === "=") handleMagnification("increase");
+        if (e.key === "-") handleMagnification("decrease");
       }
     },
-    [handleClose, handleDecreaseMagnification, handleIncreaseMagnification]
+    [handleClose, handleMagnification]
   );
-  // click outside handler
-  const handleClickOutside = useCallback(
-    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      if (modalRef.current && e.target === modalRef.current) {
-        handleClose();
-      }
-    },
-    [handleClose]
-  );
-  // register keydown listener
-  useEffect(() => {
-    if (isFullScreenEnabled) {
-      document.addEventListener("keydown", handleKeyDown);
 
-      return () => {
-        document.removeEventListener("keydown", handleKeyDown);
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!imgRef.current) return;
+
+    const imgWidth = imgRef.current.offsetWidth * magnification;
+    const imgHeight = imgRef.current.offsetHeight * magnification;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    if (imgWidth > viewportWidth || imgHeight > viewportHeight) {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(true);
+      dragStart.current = { x: e.clientX, y: e.clientY };
+      dragOffset.current = {
+        x: parseInt(imgRef.current.style.left || "0"),
+        y: parseInt(imgRef.current.style.top || "0"),
       };
     }
-  }, [handleKeyDown, isFullScreenEnabled]);
+  };
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging || !imgRef.current) return;
+
+      const dx = e.clientX - dragStart.current.x;
+      const dy = e.clientY - dragStart.current.y;
+
+      // Apply the scale factor to the drag movement
+      const scaledDx = dx / magnification;
+      const scaledDy = dy / magnification;
+
+      imgRef.current.style.left = `${dragOffset.current.x + scaledDx}px`;
+      imgRef.current.style.top = `${dragOffset.current.y + scaledDy}px`;
+    },
+    [isDragging, magnification]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (!isDragging || !imgRef.current) return;
+    setIsDragging(false);
+  }, [isDragging]);
+
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      if (!imgRef.current || !isFullScreenEnabled) return;
+
+      e.preventDefault();
+
+      // Handle pinch-to-zoom
+      if (e.ctrlKey) {
+        const delta = e.deltaY;
+        setMagnification((prev) => {
+          const newZoom = prev * (1 - delta * ZOOM_SPEED);
+          const clampedZoom = Math.min(Math.max(newZoom, MIN_ZOOM), MAX_ZOOM);
+
+          // Reset position when zoom matches initial magnification
+          if (clampedZoom === 1 && imgRef.current) {
+            imgRef.current.style.left = "0px";
+            imgRef.current.style.top = "0px";
+          }
+
+          return clampedZoom;
+        });
+        return;
+      }
+    },
+    [isFullScreenEnabled, magnification]
+  );
+
+  // Event listeners
+  useEffect(() => {
+    if (!isFullScreenEnabled) return;
+
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("wheel", handleWheel, { passive: false });
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("wheel", handleWheel);
+    };
+  }, [isFullScreenEnabled, handleKeyDown, handleMouseMove, handleMouseUp, handleWheel]);
 
   return (
     <>
       <div
-        className={cn(
-          "fixed inset-0 size-full z-20 bg-black/90 opacity-0 pointer-events-none cursor-default transition-opacity",
-          {
-            "opacity-100 pointer-events-auto": isFullScreenEnabled,
-          }
-        )}
+        className={cn("fixed inset-0 size-full z-20 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
+          "opacity-100 pointer-events-auto": isFullScreenEnabled,
+          "cursor-default": !isDragging,
+          "cursor-grabbing": isDragging,
+        })}
       >
-        <div ref={modalRef} onClick={handleClickOutside} className="relative size-full grid place-items-center">
+        <div
+          ref={modalRef}
+          onMouseDown={(e) => e.target === modalRef.current && handleClose()}
+          className="relative size-full grid place-items-center overflow-hidden"
+        >
           <button
             type="button"
             onClick={handleClose}
@@ -106,41 +207,49 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
             <X className="size-8 text-white/60 hover:text-white transition-colors" />
           </button>
           <img
+            ref={setImageRef}
             src={src}
-            className="read-only-image rounded-lg transition-all duration-200"
+            className="read-only-image rounded-lg"
             style={{
-              width: `${widthInNumber * magnification}px`,
+              width: `${widthInNumber * initialMagnification}px`,
+              maxWidth: "none",
+              maxHeight: "none",
               aspectRatio,
+              position: "relative",
+              transform: `scale(${magnification})`,
+              transformOrigin: "center",
+              transition: "width 0.2s ease, transform 0.2s ease",
             }}
+            onMouseDown={handleMouseDown}
           />
-        </div>
-        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-white/20 py-2 divide-x divide-white/20 bg-black">
-          <div className="flex items-center">
+          <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-white/20 py-2 divide-x divide-white/20 bg-black">
+            <div className="flex items-center">
+              <button
+                type="button"
+                onClick={() => handleMagnification("decrease")}
+                className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+                disabled={magnification <= MIN_ZOOM}
+              >
+                <Minus className="size-4" />
+              </button>
+              <span className="text-sm w-12 text-center text-white">{Math.round(100 * magnification)}%</span>
+              <button
+                type="button"
+                onClick={() => handleMagnification("increase")}
+                className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+                disabled={magnification >= MAX_ZOOM}
+              >
+                <Plus className="size-4" />
+              </button>
+            </div>
             <button
               type="button"
-              onClick={handleDecreaseMagnification}
-              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
-              disabled={magnification === MAGNIFICATION_VALUES[0]}
+              onClick={() => window.open(src, "_blank")}
+              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
             >
-              <Minus className="size-4" />
-            </button>
-            <span className="text-sm w-12 text-center text-white">{(100 * magnification).toFixed(0)}%</span>
-            <button
-              type="button"
-              onClick={handleIncreaseMagnification}
-              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
-              disabled={magnification === MAGNIFICATION_VALUES[MAGNIFICATION_VALUES.length - 1]}
-            >
-              <Plus className="size-4" />
+              <ExternalLink className="size-4" />
             </button>
           </div>
-          <button
-            type="button"
-            onClick={handleOpenInNewTab}
-            className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
-          >
-            <ExternalLink className="size-4" />
-          </button>
         </div>
       </div>
       <button