[WEB-2025] chore: profile page enhancements (#5209)

* chore: user layout and header updated * chore: user page sidebar improvement * fix: your work redirection * fix: profile section mobile navigation dropdown * chore: profile layout improvement * chore: profile header improvement * fix: profile section header improvement * fix: app sidebar your work active indicator * chore: profile sidebar improvement * chore: user menu code refactor * chore: header code refactor * chore: user menu code refactor * fix: build error
2024-07-24 17:52:12 +05:30 · 2024-07-24 17:52:12 +05:30 · 4d978c1a8c
commit 4d978c1a8c
parent 58f203dd38
8 changed files with 117 additions and 78 deletions
--- a/packages/types/src/issues/issue.d.ts
+++ b/packages/types/src/issues/issue.d.ts
@ -1,7 +1,7 @@
-import {TIssuePriorities} from "../issues";
-import {TIssueAttachment} from "./issue_attachment";
-import {TIssueLink} from "./issue_link";
-import {TIssueReaction} from "./issue_reaction";
+import { TIssuePriorities } from "../issues";
+import { TIssueAttachment } from "./issue_attachment";
+import { TIssueLink } from "./issue_link";
+import { TIssueReaction } from "./issue_reaction";

 // new issue structure types

@ -42,7 +42,7 @@ export type TBaseIssue = {
 export type TIssue = TBaseIssue & {
  description_html?: string;
  is_subscribed?: boolean;
-  parent?: Partial<TIssue>;
+  parent?: partial<TIssue>;
  issue_reactions?: TIssueReaction[];
  issue_attachment?: TIssueAttachment[];
  issue_link?: TIssueLink[];
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@ -6,44 +6,53 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { ChevronDown, PanelRight } from "lucide-react";
+import { IUserProfileProjectSegregation } from "@plane/types";
 import { Breadcrumbs, CustomMenu } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 // components
+import { ProfileIssuesFilter } from "@/components/profile";
 import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
 import { cn } from "@/helpers/common.helper";
 import { useAppTheme, useUser } from "@/hooks/store";

 type TUserProfileHeader = {
+  userProjectsData: IUserProfileProjectSegregation | undefined;
  type?: string | undefined;
+  showProfileIssuesFilter?: boolean;
 };

 export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
-  const { type = undefined } = props;
+  const { userProjectsData, type = undefined, showProfileIssuesFilter } = props;
  // router
  const { workspaceSlug, userId } = useParams();
  // store hooks
  const { toggleProfileSidebar, profileSidebarCollapsed } = useAppTheme();
  const {
    membership: { currentWorkspaceRole },
+    data: currentUser,
  } = useUser();
  // derived values
-  const AUTHORIZED_ROLES = [20, 15, 10];
+  const isAuthorized = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.VIEWER;

  if (!currentWorkspaceRole) return null;

-  const isAuthorized = AUTHORIZED_ROLES.includes(currentWorkspaceRole);
  const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;

+  const userName = `${userProjectsData?.user_data?.first_name} ${userProjectsData?.user_data?.last_name}`;
+
+  const isCurrentUser = currentUser?.id === userId;
+
+  const breadcrumbLabel = `${isCurrentUser ? "Your" : userName} Activity`;
+
  return (
    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
        <div className="flex w-full justify-between">
          <Breadcrumbs>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={<BreadcrumbLink href="/profile" label="Activity Overview" />}
-            />
+            <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={breadcrumbLabel} disableTooltip />} />
          </Breadcrumbs>
+          <div className="hidden md:flex md:items-center">{showProfileIssuesFilter && <ProfileIssuesFilter />}</div>
          <div className="flex gap-4 md:hidden">
            <CustomMenu
              maxHeight={"md"}
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
@ -2,19 +2,25 @@

 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
+import useSWR from "swr";
 // components
 import { AppHeader, ContentWrapper } from "@/components/core";
 import { ProfileSidebar } from "@/components/profile";
 // constants
+import { USER_PROFILE_PROJECT_SEGREGATION } from "@/constants/fetch-keys";
 import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
 import { EUserWorkspaceRoles } from "@/constants/workspace";
 // hooks
 import { useUser } from "@/hooks/store";
+import useSize from "@/hooks/use-window-size";
 // local components
+import { UserService } from "@/services/user.service";
 import { UserProfileHeader } from "./header";
 import { ProfileIssuesMobileHeader } from "./mobile-header";
 import { ProfileNavbar } from "./navbar";

+const userService = new UserService();
+
 type Props = {
  children: React.ReactNode;
 };
@ -30,6 +36,16 @@ const UseProfileLayout: React.FC<Props> = observer((props) => {
  const {
    membership: { currentWorkspaceRole },
  } = useUser();
+
+  const windowSize = useSize();
+  const isSmallerScreen = windowSize[0] >= 768;
+
+  const { data: userProjectsData } = useSWR(
+    workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
+    workspaceSlug && userId
+      ? () => userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
+      : null
+  );
  // derived values
  const isAuthorized = currentWorkspaceRole && AUTHORIZED_ROLES.includes(currentWorkspaceRole);
  const isAuthorizedPath =
@ -43,25 +59,36 @@ const UseProfileLayout: React.FC<Props> = observer((props) => {
    <>
      {/* Passing the type prop from the current route value as we need the header as top most component.
      TODO: We are depending on the route path to handle the mobile header type. If the path changes, this logic will break. */}
-      <AppHeader
-        header={<UserProfileHeader type={currentTab?.label} />}
-        mobileHeader={isIssuesTab && <ProfileIssuesMobileHeader />}
-      />
-      <ContentWrapper>
-        <div className="h-full w-full flex md:overflow-hidden">
-          <div className="flex w-full flex-col md:h-full md:overflow-hidden">
-            <ProfileNavbar isAuthorized={!!isAuthorized} showProfileIssuesFilter={isIssuesTab} />
-            {isAuthorized || !isAuthorizedPath ? (
-              <div className={`w-full overflow-hidden md:h-full`}>{children}</div>
-            ) : (
-              <div className="grid h-full w-full place-items-center text-custom-text-200">
-                You do not have the permission to access this page.
+      <div className="h-full w-full md:flex md:overflow-hidden">
+        <div className="h-full w-full md:overflow-hidden">
+          <AppHeader
+            header={
+              <UserProfileHeader
+                type={currentTab?.label}
+                userProjectsData={userProjectsData}
+                showProfileIssuesFilter={isIssuesTab}
+              />
+            }
+            mobileHeader={isIssuesTab && <ProfileIssuesMobileHeader />}
+          />
+          <ContentWrapper>
+            <div className="h-full w-full flex flex-row md:flex-col  md:overflow-hidden">
+              <div className="flex w-full flex-col md:h-full md:overflow-hidden">
+                <ProfileNavbar isAuthorized={!!isAuthorized} />
+                {isAuthorized || !isAuthorizedPath ? (
+                  <div className={`w-full overflow-hidden h-full`}>{children}</div>
+                ) : (
+                  <div className="grid h-full w-full place-items-center text-custom-text-200">
+                    You do not have the permission to access this page.
+                  </div>
+                )}
              </div>
-            )}
-          </div>
-          <ProfileSidebar />
+              {!isSmallerScreen && <ProfileSidebar userProjectsData={userProjectsData} />}
+            </div>
+          </ContentWrapper>
        </div>
-      </ContentWrapper>
+        {isSmallerScreen && <ProfileSidebar userProjectsData={userProjectsData} />}
+      </div>
    </>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
@ -4,31 +4,29 @@ import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";

 // components
-import { ProfileIssuesFilter } from "@/components/profile";
 // constants
 import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";

 type Props = {
  isAuthorized: boolean;
-  showProfileIssuesFilter?: boolean;
 };

 export const ProfileNavbar: React.FC<Props> = (props) => {
-  const { isAuthorized, showProfileIssuesFilter } = props;
+  const { isAuthorized } = props;

  const { workspaceSlug, userId } = useParams();
-const pathname = usePathname();
+  const pathname = usePathname();

  const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;

  return (
-    <div className="sticky -top-0.5 z-10 hidden md:flex items-center justify-between gap-4 border-b border-custom-border-300 bg-custom-background-100 px-4 sm:px-5 md:static">
+    <div className="sticky -top-0.5 hidden md:flex items-center justify-between gap-4 border-b border-custom-border-300 bg-custom-background-100 px-4 sm:px-5 md:static">
      <div className="flex items-center overflow-x-scroll">
        {tabsList.map((tab) => (
          <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
            <span
              className={`flex whitespace-nowrap border-b-2 p-4 text-sm font-medium outline-none ${
-                pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}/`
+                pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`
                  ? "border-custom-primary-100 text-custom-primary-100"
                  : "border-transparent"
              }`}
@ -38,7 +36,6 @@ const pathname = usePathname();
          </Link>
        ))}
      </div>
-      {showProfileIssuesFilter && <ProfileIssuesFilter />}
    </div>
  );
 };
--- a/web/core/components/profile/sidebar.tsx
+++ b/web/core/components/profile/sidebar.tsx
@ -1,50 +1,49 @@
 "use client";

-import { useEffect, useRef } from "react";
+import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import useSWR from "swr";
 // icons
 import { ChevronDown, Pencil } from "lucide-react";
 // headless ui
 import { Disclosure, Transition } from "@headlessui/react";
+// types
+import { IUserProfileProjectSegregation } from "@plane/types";
 // plane ui
 import { Loader, Tooltip } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
 // fetch-keys
-import { USER_PROFILE_PROJECT_SEGREGATION } from "@/constants/fetch-keys";
 // helpers
+import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
 import { useAppTheme, useProject, useUser } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // services
-import { UserService } from "@/services/user.service";
 // components
 import { ProfileSidebarTime } from "./time";

 // services
-const userService = new UserService();

-export const ProfileSidebar = observer(() => {
+type TProfileSidebar = {
+  userProjectsData: IUserProfileProjectSegregation | undefined;
+  className?: string;
+};
+
+export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
+  const { userProjectsData, className = "" } = props;
  // refs
  const ref = useRef<HTMLDivElement>(null);
  // router
-  const { workspaceSlug, userId } = useParams();
+  const { userId } = useParams();
  // store hooks
  const { data: currentUser } = useUser();
  const { profileSidebarCollapsed, toggleProfileSidebar } = useAppTheme();
  const { getProjectById } = useProject();
  const { isMobile } = usePlatformOS();
-  const { data: userProjectsData } = useSWR(
-    workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
-    workspaceSlug && userId
-      ? () => userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
-      : null
-  );

  useOutsideClickDetector(ref, () => {
    if (profileSidebarCollapsed === false) {
@ -82,12 +81,15 @@ export const ProfileSidebar = observer(() => {

  return (
    <div
-      className={`vertical-scrollbar scrollbar-md fixed z-[5] h-full w-full flex-shrink-0 overflow-hidden overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 shadow-custom-shadow-sm transition-all md:relative md:w-[300px]`}
+      className={cn(
+        `vertical-scrollbar scrollbar-md fixed z-[5] h-full w-full flex-shrink-0 overflow-hidden overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 shadow-custom-shadow-sm transition-all md:relative md:w-[300px]`,
+        className
+      )}
      style={profileSidebarCollapsed ? { marginLeft: `${window?.innerWidth || 0}px` } : {}}
    >
      {userProjectsData ? (
        <>
-          <div className="relative h-32">
+          <div className="relative h-[110px]">
            {currentUser?.id === userId && (
              <div className="absolute right-3.5 top-3.5 grid h-5 w-5 place-items-center rounded bg-white">
                <Link href="/profile">
@ -100,7 +102,7 @@ export const ProfileSidebar = observer(() => {
            <img
              src={userProjectsData.user_data?.cover_image ?? "/users/user-profile-cover-default-img.png"}
              alt={userProjectsData.user_data?.display_name}
-              className="h-32 w-full object-cover"
+              className="h-[110px] w-full object-cover"
            />
            <div className="absolute -bottom-[26px] left-5 h-[52px] w-[52px] rounded">
              {userProjectsData.user_data?.avatar && userProjectsData.user_data?.avatar !== "" ? (
--- a/web/core/components/workspace/sidebar/user-menu.tsx
+++ b/web/core/components/workspace/sidebar/user-menu.tsx
@ -34,6 +34,9 @@ export const SidebarUserMenu = observer(() => {
  // computed
  const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;

+  const getHref = (link: any) =>
+    `/${workspaceSlug}${link.href}${link.key === "your-work" ? `/${currentUser?.id}` : ""}`;
+
  const handleLinkClick = (itemKey: string) => {
    if (window.innerWidth < 768) {
      toggleSidebar();
@ -67,14 +70,10 @@ export const SidebarUserMenu = observer(() => {
              disabled={!sidebarCollapsed}
              isMobile={isMobile}
            >
-              <Link
-                href={`/${workspaceSlug}${link.href}${link.key === "my-work" ? `/${currentUser?.id}` : ""}`}
-                onClick={() => handleLinkClick(link.key)}
-              >
+              <Link key={link.key} href={getHref(link)} onClick={() => handleLinkClick(link.key)}>
                <SidebarNavItem
-                  key={link.key}
                  className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
-                  isActive={link.highlight(pathname, `/${workspaceSlug}`)}
+                  isActive={link.highlight(pathname, `/${workspaceSlug}`, { userId: currentUser?.id })}
                >
                  <div className="flex items-center gap-1.5 py-[1px]">
                    <link.Icon className="size-4 flex-shrink-0" />
--- a/web/core/constants/dashboard.ts
+++ b/web/core/constants/dashboard.ts
@ -293,12 +293,16 @@ export const SIDEBAR_WORKSPACE_MENU_ITEMS: {
  },
 ];

+type TLinkOptions = {
+  userId: string | undefined;
+};
+
 export const SIDEBAR_USER_MENU_ITEMS: {
  key: string;
  label: string;
  href: string;
  access: EUserWorkspaceRoles;
-  highlight: (pathname: string, baseUrl: string) => boolean;
+  highlight: (pathname: string, baseUrl: string, options?: TLinkOptions) => boolean;
  Icon: React.FC<Props>;
 }[] = [
  {
@ -314,7 +318,8 @@ export const SIDEBAR_USER_MENU_ITEMS: {
    label: "Your work",
    href: "/profile",
    access: EUserWorkspaceRoles.GUEST,
-    highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/profile/`),
+    highlight: (pathname: string, baseUrl: string, options?: TLinkOptions) =>
+      options?.userId ? pathname.includes(`${baseUrl}/profile/${options?.userId}`) : false,
    Icon: UserActivityIcon,
  },
  {
--- a/web/core/constants/profile.ts
+++ b/web/core/constants/profile.ts
@ -31,26 +31,26 @@ export const PROFILE_ACTION_LINKS: {
    Icon: Activity,
  },
  {
-      key: "appearance",
-      label: "Appearance",
-      href: `/profile/appearance`,
-      highlight: (pathname: string) => pathname.includes("/profile/appearance"),
-      Icon: Settings2,
-    },
-    {
-      key: "notifications",
-      label: "Notifications",
-      href: `/profile/notifications`,
-      highlight: (pathname: string) => pathname === "/profile/notifications/",
-      Icon: Bell,
-    },
+    key: "appearance",
+    label: "Appearance",
+    href: `/profile/appearance`,
+    highlight: (pathname: string) => pathname.includes("/profile/appearance"),
+    Icon: Settings2,
+  },
+  {
+    key: "notifications",
+    label: "Notifications",
+    href: `/profile/notifications`,
+    highlight: (pathname: string) => pathname === "/profile/notifications/",
+    Icon: Bell,
+  },
 ];

 export const PROFILE_VIEWER_TAB = [
  {
    route: "",
    label: "Summary",
-    selected: "",
+    selected: "/",
  },
 ];

@ -58,21 +58,21 @@ export const PROFILE_ADMINS_TAB = [
  {
    route: "assigned",
    label: "Assigned",
-    selected: "/assigned",
+    selected: "/assigned/",
  },
  {
    route: "created",
    label: "Created",
-    selected: "/created",
+    selected: "/created/",
  },
  {
    route: "subscribed",
    label: "Subscribed",
-    selected: "/subscribed",
+    selected: "/subscribed/",
  },
  {
    route: "activity",
    label: "Activity",
-    selected: "/activity",
+    selected: "/activity/",
  },
 ];