chore: layout refactor (#2532)

* chore: layout refactor

* fix: profile auth issue

* chore: project setting layout refactor

* chore: workspace layout refactor

* chore: profile layout refactor

* chore: layout import refactor

web/components/headers/index.ts

@@ -18,3 +18,4 @@ export * from "./project-draft-issues";
 export * from "./project-archived-issue-details";
 export * from "./project-archived-issues";
 export * from "./project-issue-details";
+export * from "./user-profile";

web/components/headers/user-profile.tsx

@@ -0,0 +1,25 @@
+import { FC } from "react";
+
+import { useRouter } from "next/router";
+
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "@plane/ui";
+// hooks
+import { observer } from "mobx-react-lite";
+
+export const UserProfileHeader: FC = observer(() => {
+  const router = useRouter();
+  return (
+    <div
+      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+    >
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div>
+          <Breadcrumbs onBack={() => router.back()}>
+            <BreadcrumbItem title="User Profile" unshrinkTitle />
+          </Breadcrumbs>
+        </div>
+      </div>
+    </div>
+  );
+});

web/components/profile/navbar.tsx

@@ -5,11 +5,9 @@ import Link from "next/link";
 
 // components
 import { ProfileIssuesFilter } from "components/profile";
-// types
-import { UserAuth } from "types";
 
 type Props = {
-  memberRole: UserAuth;
+  isAuthorized: boolean;
 };
 
 const viewerTabs = [
@@ -38,12 +36,11 @@ const adminTabs = [
   },
 ];
 
-export const ProfileNavbar: React.FC<Props> = ({ memberRole }) => {
+export const ProfileNavbar: React.FC<Props> = ({ isAuthorized }) => {
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
 
-  const tabsList =
-    memberRole.isOwner || memberRole.isMember || memberRole.isViewer ? [...viewerTabs, ...adminTabs] : viewerTabs;
+  const tabsList = isAuthorized ? [...viewerTabs, ...adminTabs] : viewerTabs;
 
   return (
     <div className="sticky -top-0.5 z-[1] md:static px-4 sm:px-5 flex items-center justify-between gap-4 bg-custom-background-100 border-b border-custom-border-300">