🔧 chore: Add HardBreak styling

- Updated "@tiptap/extension-hard-break" to version 2.1.16.
- Added HardBreak extension to CoreEditorExtensions in src/ui/extensions/index.tsx.

This commit updates the dependencies in `packages/editor/core/package.json` and adds the HardBreak extension from `@tiptap/extension-hard-break` to the `CoreEditorExtensions` in `src/ui/extensions/index.tsx`.

README.md

@@ -37,7 +37,7 @@ Meet [Plane](https://plane.so). An open-source software development tool to mana
 
 > Plane is still in its early days, not everything will be perfect yet, and hiccups may happen. Please let us know of any suggestions, ideas, or bugs that you encounter on our [Discord](https://discord.com/invite/A92xrEGCge) or GitHub issues, and we will use your feedback to improve on our upcoming releases.
 
-The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account. Plane Cloud offers a hosted solution for Plane. If you prefer to self-host Plane, please refer to our [deployment documentation](https://docs.plane.so/docker-compose). 
+The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account. Plane Cloud offers a hosted solution for Plane. If you prefer to self-host Plane, please refer to our [deployment documentation](https://docs.plane.so/self-hosting/docker-compose).
 
 ## ⚡️ Contributors Quick Start
 

apiserver/.env.example

@@ -8,11 +8,11 @@ SENTRY_DSN=""
 SENTRY_ENVIRONMENT="development"
 
 # Database Settings
-POSTGRES_USER="plane"
-POSTGRES_PASSWORD="plane"
-POSTGRES_HOST="plane-db"
-POSTGRES_DB="plane"
-DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}/${POSTGRES_DB}
+PGUSER="plane"
+PGPASSWORD="plane"
+PGHOST="plane-db"
+PGDATABASE="plane"
+DATABASE_URL=postgresql://${PGUSER}:${PGPASSWORD}@${PGHOST}/${PGDATABASE}
 
 # Oauth variables
 GOOGLE_CLIENT_ID=""

packages/editor/core/package.json

@@ -33,6 +33,7 @@
     "@tiptap/extension-code": "^2.1.13",
     "@tiptap/extension-code-block-lowlight": "^2.1.13",
     "@tiptap/extension-color": "^2.1.13",
+    "@tiptap/extension-hard-break": "^2.1.16",
     "@tiptap/extension-image": "^2.1.13",
     "@tiptap/extension-list-item": "^2.1.13",
     "@tiptap/extension-mention": "^2.1.13",

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

@@ -27,6 +27,7 @@ import { IMentionSuggestion } from "src/types/mention-suggestion";
 import { RestoreImage } from "src/types/restore-image";
 import { CustomLinkExtension } from "src/ui/extensions/custom-link";
 import { CustomCodeInlineExtension } from "./code-inline";
+import HardBreak from "@tiptap/extension-hard-break";
 
 export const CoreEditorExtensions = (
   mentionConfig: {
@@ -53,11 +54,6 @@ export const CoreEditorExtensions = (
         class: "leading-normal -mb-2",
       },
     },
-    hardBreak: {
-      HTMLAttributes: {
-        class: "p-2",
-      },
-    },
     code: false,
     codeBlock: false,
     horizontalRule: false,
@@ -70,6 +66,11 @@ export const CoreEditorExtensions = (
   CustomQuoteExtension.configure({
     HTMLAttributes: { className: "border-l-4 border-custom-border-300" },
   }),
+  HardBreak.configure({
+    HTMLAttributes: {
+      class: "p-2",
+    },
+  }),
   CustomKeymap,
   ListKeymap,
   CustomLinkExtension.configure({

web/components/command-palette/actions/workspace-settings-actions.tsx

@@ -1,10 +1,8 @@
 import { useRouter } from "next/router";
 import { Command } from "cmdk";
-// hooks
-import { useUser } from "hooks/store";
+// icons
+import { SettingIcon } from "components/icons";
 import Link from "next/link";
-// constants
-import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
 
 type Props = {
   closePalette: () => void;
@@ -12,40 +10,60 @@ type Props = {
 
 export const CommandPaletteWorkspaceSettingsActions: React.FC<Props> = (props) => {
   const { closePalette } = props;
-  // router
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // mobx store
-  const {
-    membership: { currentWorkspaceRole },
-  } = useUser();
-  // derived values
-  const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
-
-  const redirect = (path: string) => {
-    closePalette();
-    router.push(path);
-  };
 
   return (
     <>
-      {WORKSPACE_SETTINGS_LINKS.map(
-        (setting) =>
-          workspaceMemberInfo >= setting.access && (
-            <Command.Item
-              key={setting.key}
-              onSelect={() => redirect(`/${workspaceSlug}${setting.href}`)}
-              className="focus:outline-none"
-            >
-              <Link href={`/${workspaceSlug}${setting.href}`}>
-                <div className="flex items-center gap-2 text-custom-text-200">
-                  <setting.Icon className="h-4 w-4 text-custom-text-200" />
-                  {setting.label}
-                </div>
-              </Link>
-            </Command.Item>
-          )
-      )}
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            General
+          </div>
+        </Link>
+      </Command.Item>
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings/members`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            Members
+          </div>
+        </Link>
+      </Command.Item>
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings/billing`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            Billing and Plans
+          </div>
+        </Link>
+      </Command.Item>
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings/integrations`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            Integrations
+          </div>
+        </Link>
+      </Command.Item>
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings/imports`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            Import
+          </div>
+        </Link>
+      </Command.Item>
+      <Command.Item onSelect={closePalette} className="focus:outline-none">
+        <Link href={`/${workspaceSlug}/settings/exports`}>
+          <div className="flex items-center gap-2 text-custom-text-200">
+            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            Export
+          </div>
+        </Link>
+      </Command.Item>
     </>
   );
 };

web/components/headers/workspace-active-cycle.tsx

@@ -19,7 +19,13 @@ export const WorkspaceActiveCycleHeader = observer(() => {
               label="Active Cycles"
             />
           </Breadcrumbs>
-          <span className="flex items-center justify-center px-3.5 py-0.5 text-xs leading-4 rounded-xl text-orange-500 bg-orange-500/20">
+          <span
+            className="flex items-center justify-center px-3.5 py-0.5 text-xs leading-5 rounded-xl"
+            style={{
+              color: "#F59E0B",
+              backgroundColor: "#F59E0B20",
+            }}
+          >
             Beta
           </span>
         </div>

web/components/workspace/sidebar-menu.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { BarChart2, Briefcase, CheckCircle, LayoutGrid, SendToBack } from "lucide-react";
 // hooks
 import { useApplication, useUser } from "hooks/store";
 // components
@@ -10,7 +11,34 @@ import { NotificationPopover } from "components/notifications";
 import { Tooltip } from "@plane/ui";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
-import { SIDEBAR_MENU_ITEMS } from "constants/dashboard";
+
+const workspaceLinks = (workspaceSlug: string) => [
+  {
+    Icon: LayoutGrid,
+    name: "Dashboard",
+    href: `/${workspaceSlug}`,
+  },
+  {
+    Icon: BarChart2,
+    name: "Analytics",
+    href: `/${workspaceSlug}/analytics`,
+  },
+  {
+    Icon: Briefcase,
+    name: "Projects",
+    href: `/${workspaceSlug}/projects`,
+  },
+  {
+    Icon: CheckCircle,
+    name: "All Issues",
+    href: `/${workspaceSlug}/workspace-views/all-issues`,
+  },
+  {
+    Icon: SendToBack,
+    name: "Active cycles",
+    href: `/${workspaceSlug}/active-cycles`,
+  },
+];
 
 export const WorkspaceSidebarMenu = observer(() => {
   // store hooks
@@ -22,41 +50,48 @@ export const WorkspaceSidebarMenu = observer(() => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // computed
-  const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
+  const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
-    <div className="w-full cursor-pointer space-y-2 p-4">
-      {SIDEBAR_MENU_ITEMS.map(
-        (link) =>
-          workspaceMemberInfo >= link.access && (
-            <Link key={link.key} href={`/${workspaceSlug}${link.href}`}>
-              <span className="block w-full my-1">
-                <Tooltip
-                  tooltipContent={link.label}
-                  position="right"
-                  className="ml-2"
-                  disabled={!themeStore?.sidebarCollapsed}
+    <div className="w-full cursor-pointer space-y-1 p-4">
+      {workspaceLinks(workspaceSlug as string).map((link, index) => {
+        const isActive = link.name === "Settings" ? router.asPath.includes(link.href) : router.asPath === link.href;
+        if (!isAuthorizedUser && link.name === "Analytics") return;
+        return (
+          <Link key={index} href={link.href}>
+            <span className="block w-full">
+              <Tooltip
+                tooltipContent={link.name}
+                position="right"
+                className="ml-2"
+                disabled={!themeStore?.sidebarCollapsed}
+              >
+                <div
+                  className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
+                    isActive
+                      ? "bg-custom-primary-100/10 text-custom-primary-100"
+                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                  } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
                 >
-                  <div
-                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
-                      link.highlight(router.asPath, `/${workspaceSlug}`)
-                        ? "bg-custom-primary-100/10 text-custom-primary-100"
-                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                    } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
-                  >
-                    {<link.Icon className="h-4 w-4" />}
-                    {!themeStore?.sidebarCollapsed && link.label}
-                    {!themeStore?.sidebarCollapsed && link.key === "active-cycles" && (
-                      <span className="flex items-center justify-center px-3.5 py-0.5 text-xs leading-4 rounded-xl text-orange-500 bg-orange-500/20">
-                        Beta
-                      </span>
-                    )}
-                  </div>
-                </Tooltip>
-              </span>
-            </Link>
-          )
-      )}
+                  {<link.Icon className="h-4 w-4" />}
+                  {!themeStore?.sidebarCollapsed && link.name}
+                  {link.name === "Active Cycles" && (
+                    <span
+                      className="flex items-center justify-center px-3.5 py-0.5 text-xs leading-4 rounded-xl"
+                      style={{
+                        color: "#F59E0B",
+                        backgroundColor: "#F59E0B20",
+                      }}
+                    >
+                      Beta
+                    </span>
+                  )}
+                </div>
+              </Tooltip>
+            </span>
+          </Link>
+        );
+      })}
       <NotificationPopover />
     </div>
   );

web/constants/dashboard.ts

@@ -14,11 +14,6 @@ import CompletedCreatedIssuesDark from "public/empty-state/dashboard/dark/comple
 import CompletedCreatedIssuesLight from "public/empty-state/dashboard/light/completed-created-issues.svg";
 // types
 import { TDurationFilterOptions, TIssuesListTypes, TStateGroups } from "@plane/types";
-import { Props } from "components/icons/types";
-// constants
-import { EUserWorkspaceRoles } from "./workspace";
-// icons
-import { BarChart2, Briefcase, CheckCircle, LayoutGrid, SendToBack } from "lucide-react";
 
 // gradients for issues by priority widget graph bars
 export const PRIORITY_GRAPH_GRADIENTS = [
@@ -251,53 +246,3 @@ export const CREATED_ISSUES_EMPTY_STATES = {
     lightImage: CompletedCreatedIssuesLight,
   },
 };
-
-export const SIDEBAR_MENU_ITEMS: {
-  key: string;
-  label: string;
-  href: string;
-  access: EUserWorkspaceRoles;
-  highlight: (pathname: string, baseUrl: string) => boolean;
-  Icon: React.FC<Props>;
-}[] = [
-  {
-    key: "dashboard",
-    label: "Dashboard",
-    href: ``,
-    access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}`,
-    Icon: LayoutGrid,
-  },
-  {
-    key: "analytics",
-    label: "Analytics",
-    href: `/analytics`,
-    access: EUserWorkspaceRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/analytics`,
-    Icon: BarChart2,
-  },
-  {
-    key: "projects",
-    label: "Projects",
-    href: `/projects`,
-    access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/projects`,
-    Icon: Briefcase,
-  },
-  {
-    key: "all-issues",
-    label: "All Issues",
-    href: `/workspace-views/all-issues`,
-    access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/workspace-views/all-issues`,
-    Icon: CheckCircle,
-  },
-  {
-    key: "active-cycles",
-    label: "Active cycles",
-    href: `/active-cycles`,
-    access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/active-cycles`,
-    Icon: SendToBack,
-  },
-];

web/constants/profile.ts

@@ -1,40 +0,0 @@
-import React from "react";
-// icons
-import { Activity, CircleUser, KeyRound, LucideProps, Settings2 } from "lucide-react";
-
-export const PROFILE_ACTION_LINKS: {
-  key: string;
-  label: string;
-  href: string;
-  highlight: (pathname: string) => boolean;
-  Icon: React.FC<LucideProps>;
-}[] = [
-  {
-    key: "profile",
-    label: "Profile",
-    href: `/profile`,
-    highlight: (pathname: string) => pathname === "/profile",
-    Icon: CircleUser,
-  },
-  {
-    key: "change-password",
-    label: "Change password",
-    href: `/profile/change-password`,
-    highlight: (pathname: string) => pathname === "/profile/change-password",
-    Icon: KeyRound,
-  },
-  {
-    key: "activity",
-    label: "Activity",
-    href: `/profile/activity`,
-    highlight: (pathname: string) => pathname === "/profile/activity",
-    Icon: Activity,
-  },
-  {
-    key: "preferences",
-    label: "Preferences",
-    href: `/profile/preferences`,
-    highlight: (pathname: string) => pathname.includes("/profile/preferences"),
-    Icon: Settings2,
-  },
-];

web/constants/project.ts

@@ -1,8 +1,4 @@
-// icons
 import { Globe2, Lock, LucideIcon } from "lucide-react";
-import { SettingIcon } from "components/icons";
-// types
-import { Props } from "components/icons/types";
 
 export enum EUserProjectRoles {
   GUEST = 5,
@@ -75,77 +71,3 @@ export const PROJECT_UNSPLASH_COVERS = [
   "https://images.unsplash.com/photo-1691230995681-480d86cbc135?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
   "https://images.unsplash.com/photo-1675351066828-6fc770b90dd2?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
 ];
-
-export const PROJECT_SETTINGS_LINKS: {
-  key: string;
-  label: string;
-  href: string;
-  access: EUserProjectRoles;
-  highlight: (pathname: string, baseUrl: string) => boolean;
-  Icon: React.FC<Props>;
-}[] = [
-  {
-    key: "general",
-    label: "General",
-    href: `/settings`,
-    access: EUserProjectRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings`,
-    Icon: SettingIcon,
-  },
-  {
-    key: "members",
-    label: "Members",
-    href: `/settings/members`,
-    access: EUserProjectRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members`,
-    Icon: SettingIcon,
-  },
-  {
-    key: "features",
-    label: "Features",
-    href: `/settings/features`,
-    access: EUserProjectRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/features`,
-    Icon: SettingIcon,
-  },
-  {
-    key: "states",
-    label: "States",
-    href: `/settings/states`,
-    access: EUserProjectRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/states`,
-    Icon: SettingIcon,
-  },
-  {
-    key: "labels",
-    label: "Labels",
-    href: `/settings/labels`,
-    access: EUserProjectRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/labels`,
-    Icon: SettingIcon,
-  },
-  {
-    key: "integrations",
-    label: "Integrations",
-    href: `/settings/integrations`,
-    access: EUserProjectRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/integrations`,
-    Icon: SettingIcon,
-  },
-  {
-    key: "estimates",
-    label: "Estimates",
-    href: `/settings/estimates`,
-    access: EUserProjectRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/estimates`,
-    Icon: SettingIcon,
-  },
-  {
-    key: "automations",
-    label: "Automations",
-    href: `/settings/automations`,
-    access: EUserProjectRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/automations`,
-    Icon: SettingIcon,
-  },
-];

web/constants/workspace.ts

@@ -6,9 +6,6 @@ import ExcelLogo from "public/services/excel.svg";
 import JSONLogo from "public/services/json.svg";
 // types
 import { TStaticViewTypes } from "@plane/types";
-import { Props } from "components/icons/types";
-// icons
-import { SettingIcon } from "components/icons";
 
 export enum EUserWorkspaceRoles {
   GUEST = 5,
@@ -118,75 +115,48 @@ export const RESTRICTED_URLS = [
 ];
 
 export const WORKSPACE_SETTINGS_LINKS: {
-  key: string;
   label: string;
   href: string;
   access: EUserWorkspaceRoles;
-  highlight: (pathname: string, baseUrl: string) => boolean;
-  Icon: React.FC<Props>;
 }[] = [
   {
-    key: "general",
     label: "General",
     href: `/settings`,
     access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings`,
-    Icon: SettingIcon,
   },
   {
-    key: "members",
     label: "Members",
     href: `/settings/members`,
     access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members`,
-    Icon: SettingIcon,
   },
   {
-    key: "billing-and-plans",
     label: "Billing and plans",
     href: `/settings/billing`,
     access: EUserWorkspaceRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing`,
-    Icon: SettingIcon,
   },
   {
-    key: "integrations",
     label: "Integrations",
     href: `/settings/integrations`,
     access: EUserWorkspaceRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/integrations`,
-    Icon: SettingIcon,
   },
   {
-    key: "import",
     label: "Imports",
     href: `/settings/imports`,
     access: EUserWorkspaceRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/imports`,
-    Icon: SettingIcon,
   },
   {
-    key: "export",
     label: "Exports",
     href: `/settings/exports`,
     access: EUserWorkspaceRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports`,
-    Icon: SettingIcon,
   },
   {
-    key: "webhooks",
     label: "Webhooks",
     href: `/settings/webhooks`,
     access: EUserWorkspaceRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks`,
-    Icon: SettingIcon,
   },
   {
-    key: "api-tokens",
     label: "API tokens",
     href: `/settings/api-tokens`,
     access: EUserWorkspaceRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/api-tokens`,
-    Icon: SettingIcon,
   },
 ];

web/layouts/settings-layout/profile/sidebar.tsx

@@ -4,14 +4,39 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useTheme } from "next-themes";
-import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react";
+import { Activity, ChevronLeft, CircleUser, KeyRound, LogOut, MoveLeft, Plus, Settings2, UserPlus } from "lucide-react";
 // hooks
 import { useApplication, useUser, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Tooltip } from "@plane/ui";
-// constants
-import { PROFILE_ACTION_LINKS } from "constants/profile";
+
+const PROFILE_ACTION_LINKS = [
+  {
+    key: "profile",
+    label: "Profile",
+    href: `/profile`,
+    Icon: CircleUser,
+  },
+  {
+    key: "change-password",
+    label: "Change password",
+    href: `/profile/change-password`,
+    Icon: KeyRound,
+  },
+  {
+    key: "activity",
+    label: "Activity",
+    href: `/profile/activity`,
+    Icon: Activity,
+  },
+  {
+    key: "preferences",
+    label: "Preferences",
+    href: `/profile/preferences`,
+    Icon: Settings2,
+  },
+];
 
 const WORKSPACE_ACTION_LINKS = [
   {
@@ -105,7 +130,7 @@ export const ProfileLayoutSidebar = observer(() => {
                   <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                     <div
                       className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
-                        link.highlight(router.pathname)
+                        router.pathname === link.href
                           ? "bg-custom-primary-100/10 text-custom-primary-100"
                           : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
                       } ${sidebarCollapsed ? "justify-center" : ""}`}

web/layouts/settings-layout/project/sidebar.tsx

@@ -1,42 +1,66 @@
 import React from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
-// hooks
-import { useUser } from "hooks/store";
-// constants
-import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "constants/project";
 
 export const ProjectSettingsSidebar = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // mobx store
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
-
-  const projectMemberInfo = currentProjectRole || EUserProjectRoles.GUEST;
 
+  const projectLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "General",
+      href: `/${workspaceSlug}/projects/${projectId}/settings`,
+    },
+    {
+      label: "Members",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
+    },
+    {
+      label: "Features",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
+    },
+    {
+      label: "States",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
+    },
+    {
+      label: "Labels",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
+    },
+    {
+      label: "Integrations",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
+    },
+    {
+      label: "Estimates",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
+    },
+    {
+      label: "Automations",
+      href: `/${workspaceSlug}/projects/${projectId}/settings/automations`,
+    },
+  ];
   return (
     <div className="flex w-80 flex-col gap-6 px-5">
       <div className="flex flex-col gap-2">
         <span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
         <div className="flex w-full flex-col gap-1">
-          {PROJECT_SETTINGS_LINKS.map(
-            (link) =>
-              projectMemberInfo >= link.access && (
-                <Link key={link.key} href={`/${workspaceSlug}/projects/${projectId}${link.href}`}>
-                  <div
-                    className={`rounded-md px-4 py-2 text-sm font-medium ${
-                      link.highlight(router.asPath, `/${workspaceSlug}/projects/${projectId}`)
-                        ? "bg-custom-primary-100/10 text-custom-primary-100"
-                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                    }`}
-                  >
-                    {link.label}
-                  </div>
-                </Link>
-              )
-          )}
+          {projectLinks.map((link) => (
+            <Link key={link.href} href={link.href}>
+              <div
+                className={`rounded-md px-4 py-2 text-sm font-medium ${
+                  (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
+                    ? "bg-custom-primary-100/10 text-custom-primary-100"
+                    : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                }`}
+              >
+                {link.label}
+              </div>
+            </Link>
+          ))}
         </div>
       </div>
     </div>

web/layouts/settings-layout/workspace/sidebar.tsx

@@ -25,11 +25,11 @@ export const WorkspaceSettingsSidebar = () => {
           {WORKSPACE_SETTINGS_LINKS.map(
             (link) =>
               workspaceMemberInfo >= link.access && (
-                <Link key={link.key} href={`/${workspaceSlug}${link.href}`}>
+                <Link key={link.href} href={`/${workspaceSlug}${link.href}`}>
                   <span>
                     <div
                       className={`rounded-md px-4 py-2 text-sm font-medium ${
-                        link.highlight(router.asPath, `/${workspaceSlug}`)
+                        router.pathname.split("/")?.[3] === link.href.split("/")?.[2]
                           ? "bg-custom-primary-100/10 text-custom-primary-100"
                           : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
                       }`}

yarn.lock

@@ -2406,6 +2406,13 @@
     lodash.merge "^4.6.2"
     postcss-selector-parser "6.0.10"
 
+"@tippyjs/react@^4.2.6":
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
+  integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==
+  dependencies:
+    tippy.js "^6.3.1"
+
 "@tiptap/core@^2.1.13":
   version "2.1.13"
   resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.1.13.tgz#e21f566e81688c826c6f26d2940886734189e193"
@@ -2480,6 +2487,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.1.13.tgz#fc84d0ff7e2fe861bf421bc8000194ecc26979b0"
   integrity sha512-TGkMzMQayuKg+vN4du0x1ahEItBLcCT1jdWeRsjdM8gHfzbPLdo4PQhVsvm1I0xaZmbJZelhnVsUwRZcIu1WNA==
 
+"@tiptap/extension-hard-break@^2.1.16":
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.1.16.tgz#532618d9607fc328c25ea486b64656b8f6841b04"
+  integrity sha512-H3Bk8Gu5pV7xH8TrzH0WAoXrJVEKsDA6Evyl7H7aCAMAvotQL0ehuuX88bjPMCSAvBXZE39wYnJCJshGbVx0BA==
+
 "@tiptap/extension-heading@^2.1.13":
   version "2.1.13"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.1.13.tgz#94a6219448d97ffed0915fa1bf411074c39f4103"
@@ -2808,7 +2820,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.2.42", "@types/react@^18.2.42":
+"@types/react@*", "@types/react@^18.2.42":
   version "18.2.42"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.42.tgz#6f6b11a904f6d96dda3c2920328a97011a00aba7"
   integrity sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==
@@ -6617,16 +6629,6 @@ mkdirp@^0.5.5:
   dependencies:
     minimist "^1.2.6"
 
-mobx-devtools-mst@^0.9.30:
-  version "0.9.30"
-  resolved "https://registry.yarnpkg.com/mobx-devtools-mst/-/mobx-devtools-mst-0.9.30.tgz#0d1cad8b3d97e1f3f94bb9afb701cd9c8b5b164d"
-  integrity sha512-6fIYeFG4xT4syIeKddmK55zQbc3ZZZr/272/cCbfaAAM5YiuFdteGZGUgdsz8wxf/mGxWZbFOM3WmASAnpwrbw==
-
-mobx-react-devtools@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/mobx-react-devtools/-/mobx-react-devtools-6.1.1.tgz#a462b944085cf11ff96fc937d12bf31dab4c8984"
-  integrity sha512-nc5IXLdEUFLn3wZal65KF3/JFEFd+mbH4KTz/IG5BOPyw7jo8z29w/8qm7+wiCyqVfUIgJ1gL4+HVKmcXIOgqA==
-
 mobx-react-lite@^4.0.3, mobx-react-lite@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.5.tgz#e2cb98f813e118917bcc463638f5bf6ea053a67b"
@@ -6641,11 +6643,6 @@ mobx-react@^9.1.0:
   dependencies:
     mobx-react-lite "^4.0.4"
 
-mobx-state-tree@^5.4.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/mobx-state-tree/-/mobx-state-tree-5.4.0.tgz#d41b7fd90b8d4b063bc32526758417f1100751df"
-  integrity sha512-2VuUhAqFklxgGqFNqaZUXYYSQINo8C2SUEP9YfCQrwatHWHqJLlEC7Xb+5WChkev7fubzn3aVuby26Q6h+JeBg==
-
 mobx@^6.10.0:
   version "6.12.0"
   resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.12.0.tgz#72b2685ca5af031aaa49e77a4d76ed67fcbf9135"
@@ -8540,7 +8537,7 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
-tippy.js@^6.3.7:
+tippy.js@^6.3.1, tippy.js@^6.3.7:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
   integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==