chore: deactivate user option added (#2841)

* dev: deactivate user option added

* chore: new layout for profile settings

* fix: build errors

* fix: user profile activity

web/layouts/admin-layout/sidebar.tsx

@@ -13,7 +13,6 @@ export const InstanceAdminSidebar: FC<IInstanceAdminSidebar> = observer(() => {
 
   return (
     <div
-      id="app-sidebar"
       className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
         themStore?.sidebarCollapsed ? "" : "md:w-[280px]"
       } ${themStore?.sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}

web/layouts/app-layout/sidebar.tsx

@@ -19,7 +19,6 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
 
   return (
     <div
-      id="app-sidebar"
       className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
         themStore?.sidebarCollapsed ? "" : "md:w-[280px]"
       } ${themStore?.sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}

web/layouts/settings-layout/index.ts

@@ -1,2 +1,3 @@
+export * from "./profile";
 export * from "./project";
 export * from "./workspace";

web/layouts/settings-layout/profile/index.ts

@@ -0,0 +1,3 @@
+export * from "./layout";
+export * from "./settings-sidebar";
+export * from "./sidebar";

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

@@ -0,0 +1,35 @@
+import { FC, ReactNode } from "react";
+// layout
+import { UserAuthWrapper } from "layouts/auth-layout";
+// components
+import { ProfileLayoutSidebar, ProfileSettingsSidebar } from "layouts/settings-layout";
+import { CommandPalette } from "components/command-palette";
+
+interface IProfileSettingsLayout {
+  children: ReactNode;
+  header: ReactNode;
+}
+
+export const ProfileSettingsLayout: FC<IProfileSettingsLayout> = (props) => {
+  const { children, header } = props;
+
+  return (
+    <>
+      <CommandPalette />
+      <UserAuthWrapper>
+        <div className="relative flex h-screen w-full overflow-hidden">
+          <ProfileLayoutSidebar />
+          <main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
+            {header}
+            <div className="flex gap-2 h-full w-full overflow-x-hidden overflow-y-scroll">
+              <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
+                <ProfileSettingsSidebar />
+              </div>
+              {children}
+            </div>
+          </main>
+        </div>
+      </UserAuthWrapper>
+    </>
+  );
+};

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+const PROFILE_LINKS: Array<{
+  label: string;
+  href: string;
+}> = [
+  {
+    label: "Profile",
+    href: `/me/profile`,
+  },
+  {
+    label: "Activity",
+    href: `/me/profile/activity`,
+  },
+  {
+    label: "Preferences",
+    href: `/me/profile/preferences`,
+  },
+];
+
+export const ProfileSettingsSidebar = () => {
+  const router = useRouter();
+
+  return (
+    <div className="flex flex-col gap-2 w-80 px-5">
+      <span className="text-xs text-custom-sidebar-text-400 font-semibold">My Account</span>
+      <div className="flex flex-col gap-1 w-full">
+        {PROFILE_LINKS.map((link) => (
+          <Link key={link.href} href={link.href}>
+            <a>
+              <div
+                className={`px-4 py-2 text-sm font-medium rounded-md ${
+                  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>
+            </a>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,119 @@
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { MoveLeft, Plus, UserPlus } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Tooltip } from "@plane/ui";
+
+const SIDEBAR_LINKS = [
+  {
+    key: "create-workspace",
+    Icon: Plus,
+    name: "Create workspace",
+    href: "/create-workspace",
+  },
+  {
+    key: "invitations",
+    Icon: UserPlus,
+    name: "Invitations",
+    href: "/invitations",
+  },
+];
+
+export const ProfileLayoutSidebar = observer(() => {
+  const {
+    theme: { sidebarCollapsed, toggleSidebar },
+    workspace: { workspaces },
+  } = useMobxStore();
+
+  return (
+    <div
+      className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
+        sidebarCollapsed ? "" : "md:w-[280px]"
+      } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
+    >
+      <div className="h-full w-full flex flex-col">
+        <div className="w-full cursor-pointer space-y-1 p-4 flex-shrink-0">
+          {SIDEBAR_LINKS.map((link) => (
+            <Link key={link.key} href={link.href}>
+              <a className="block w-full">
+                <Tooltip tooltipContent={link.name} 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 text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
+                      sidebarCollapsed ? "justify-center" : ""
+                    }`}
+                  >
+                    {<link.Icon className="h-4 w-4" />}
+                    {!sidebarCollapsed && link.name}
+                  </div>
+                </Tooltip>
+              </a>
+            </Link>
+          ))}
+        </div>
+        {workspaces && workspaces.length > 0 && (
+          <div className="flex flex-col px-4 flex-shrink-0">
+            {!sidebarCollapsed && (
+              <div className="rounded text-custom-sidebar-text-400 px-1.5 text-sm font-semibold">Your workspaces</div>
+            )}
+            <div className="space-y-2 mt-2">
+              {workspaces.map((workspace) => (
+                <Link
+                  key={workspace.id}
+                  href={`/${workspace.slug}`}
+                  className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
+                    sidebarCollapsed ? "justify-center" : `justify-between`
+                  }`}
+                >
+                  <a
+                    className={`flex items-center flex-grow w-full truncate gap-x-2 px-2 py-1 hover:bg-custom-sidebar-background-80 rounded-md ${
+                      sidebarCollapsed ? "justify-center" : ""
+                    }`}
+                  >
+                    <span
+                      className={`relative flex h-6 w-6 items-center justify-center  p-2 text-xs uppercase flex-shrink-0 ${
+                        !workspace?.logo && "rounded bg-custom-primary-500 text-white"
+                      }`}
+                    >
+                      {workspace?.logo && workspace.logo !== "" ? (
+                        <img
+                          src={workspace.logo}
+                          className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                          alt="Workspace Logo"
+                        />
+                      ) : (
+                        workspace?.name?.charAt(0) ?? "..."
+                      )}
+                    </span>
+                    {!sidebarCollapsed && (
+                      <p className="truncate text-custom-sidebar-text-200 text-sm">{workspace.name}</p>
+                    )}
+                  </a>
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+        <div className="flex-grow flex items-end px-4 py-2">
+          <button
+            type="button"
+            className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
+            onClick={() => toggleSidebar()}
+          >
+            <MoveLeft className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ml-auto ${
+              sidebarCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => toggleSidebar()}
+          >
+            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});

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

@@ -64,31 +64,6 @@ export const WorkspaceSettingsSidebar = () => {
     },
   ];
 
-  const profileLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "Profile",
-      href: `/${workspaceSlug}/me/profile`,
-    },
-    {
-      label: "Activity",
-      href: `/${workspaceSlug}/me/profile/activity`,
-    },
-    {
-      label: "Preferences",
-      href: `/${workspaceSlug}/me/profile/preferences`,
-    },
-  ];
-
-  function highlightSetting(label: string, link: string): boolean {
-    if (router.asPath.startsWith(link) && (label === "Imports" || label === "Api tokens")) {
-      return true;
-    }
-    return link === router.asPath;
-  }
-
   return (
     <div className="flex flex-col gap-6 w-80 px-5">
       <div className="flex flex-col gap-2">
@@ -114,26 +89,6 @@ export const WorkspaceSettingsSidebar = () => {
           )}
         </div>
       </div>
-      <div className="flex flex-col gap-2">
-        <span className="text-xs text-custom-sidebar-text-400 font-semibold">My Account</span>
-        <div className="flex flex-col gap-1 w-full">
-          {profileLinks.map((link) => (
-            <Link key={link.href} href={link.href}>
-              <a>
-                <div
-                  className={`px-4 py-2 text-sm font-medium rounded-md ${
-                    (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>
-              </a>
-            </Link>
-          ))}
-        </div>
-      </div>
     </div>
   );
 };