[WEB-711] style: profile and its settings pages responsiveness (#4022)

* [WEB-711] style: profile and its settings pages responsiveness

* chore: linting issues fix

* fix: mobile-view padding

---------

Co-authored-by: LAKHAN BAHETI <lakhanbaheti9@gmail.com>

web/components/profile/preferences/preferences-mobile-header.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+import router from "next/router";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+export const PreferencesMobileHeader = () => {
+  const profilePreferenceLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+    {
+      label: "Theme",
+      href: `/profile/preferences/theme`,
+    },
+    {
+      label: "Email",
+      href: `/profile/preferences/email`,
+    },
+  ];
+
+  return (
+    <div className={cn("sticky top-0 flex md:hidden w-full border-b border-custom-border-200")}>
+      {profilePreferenceLinks.map((link, index) => (
+        <Link
+          key={index}
+          href={link.href}
+          onClick={() => console.log(router.asPath)}
+          className={cn(
+            "flex justify-around py-2 w-full",
+            router.asPath.includes(link.label.toLowerCase()) ? "border-b-2 border-custom-primary-100" : ""
+          )}
+        >
+          <div className="text-sm text-custom-text-200">{link.label}</div>
+        </Link>
+      ))}
+    </div>
+  );
+};

web/components/profile/profile-issues-mobile-header.tsx

@@ -0,0 +1,177 @@
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
+// icons
+import { ChevronDown } from "lucide-react";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+// components
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
+// constants
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "@/constants/issue";
+// hooks
+import { useIssues, useLabel } from "@/hooks/store";
+
+
+const ProfileIssuesMobileHeader = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+  // store hook
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.PROFILE);
+
+  const { workspaceLabels } = useLabel();
+  // derived values
+  const states = undefined;
+  // const members = undefined;
+  // const activeLayout = issueFilters?.displayFilters?.layout;
+  // const states = undefined;
+  const members = undefined;
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        { layout: layout },
+        userId.toString()
+      );
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !userId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.FILTERS,
+        { [key]: newValues },
+        userId.toString()
+      );
+    },
+    [workspaceSlug, issueFilters, updateFilters, userId]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        updatedDisplayFilter,
+        userId.toString()
+      );
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_PROPERTIES,
+        property,
+        userId.toString()
+      );
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+  return (
+    <div className="flex justify-evenly border-b border-custom-border-200 py-2 md:hidden">
+      <CustomMenu
+        maxHeight={"md"}
+        className="flex flex-grow justify-center text-sm text-custom-text-200"
+        placement="bottom-start"
+        customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
+        customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+        closeOnSelect
+      >
+        {ISSUE_LAYOUTS.map((layout, index) => {
+          if (layout.key === "spreadsheet" || layout.key === "gantt_chart" || layout.key === "calendar") return;
+          return (
+            <CustomMenu.MenuItem
+              key={index}
+              onClick={() => {
+                handleLayoutChange(ISSUE_LAYOUTS[index].key);
+              }}
+              className="flex items-center gap-2"
+            >
+              <layout.icon className="h-3 w-3" />
+              <div className="text-custom-text-300">{layout.title}</div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <FiltersDropdown
+          title="Filters"
+          placement="bottom-end"
+          menuButton={
+            <span className="flex items-center text-sm text-custom-text-200">
+              Filters
+              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" />
+            </span>
+          }
+        >
+          <FilterSelection
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+            }
+            filters={issueFilters?.filters ?? {}}
+            handleFiltersUpdate={handleFiltersUpdate}
+            states={states}
+            labels={workspaceLabels}
+            memberIds={members}
+          />
+        </FiltersDropdown>
+      </div>
+      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <FiltersDropdown
+          title="Display"
+          placement="bottom-end"
+          menuButton={
+            <span className="flex items-center text-sm text-custom-text-200">
+              Display
+              <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
+            </span>
+          }
+        >
+          <DisplayFiltersSelection
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+            }
+            displayFilters={issueFilters?.displayFilters ?? {}}
+            handleDisplayFiltersUpdate={handleDisplayFilters}
+            displayProperties={issueFilters?.displayProperties ?? {}}
+            handleDisplayPropertiesUpdate={handleDisplayProperties}
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
+
+export default ProfileIssuesMobileHeader;

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

@@ -1,10 +1,7 @@
 import { FC, ReactNode } from "react";
 // layout
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { ChevronDown } from "lucide-react";
-import { CustomMenu } from "@plane/ui";
 import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { PreferencesMobileHeader } from "@/components/profile/preferences/preferences-mobile-header";
 import { useApplication } from "@/hooks/store";
 import { ProfileSettingsLayout } from "@/layouts/settings-layout";
 import { ProfilePreferenceSettingsSidebar } from "./sidebar";
@@ -16,65 +13,26 @@ interface IProfilePreferenceSettingsLayout {
 
 export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => {
   const { children, header } = props;
-  const router = useRouter();
   const { theme: themeStore } = useApplication();
 
-  const showMenuItem = () => {
-    const item = router.asPath.split("/");
-    let splittedItem = item[item.length - 1];
-    splittedItem = splittedItem.replace(splittedItem[0], splittedItem[0].toUpperCase());
-    return splittedItem;
-  };
-
-  const profilePreferenceLinks: Array<{
-    label: string;
-    href: string;
-  }> = [
-    {
-      label: "Theme",
-      href: `/profile/preferences/theme`,
-    },
-    {
-      label: "Email",
-      href: `/profile/preferences/email`,
-    },
-  ];
 
   return (
     <ProfileSettingsLayout
       header={
         <div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
           <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
-          <CustomMenu
-            maxHeight={"md"}
-            className="flex flex-grow justify-center text-custom-text-200 text-sm"
-            placement="bottom-start"
-            customButton={
-              <div className="flex gap-2 items-center px-2 py-1.5 border rounded-md border-custom-border-400">
-                <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{showMenuItem()}</span>
-                <ChevronDown className="w-4 h-4 text-custom-text-400" />
-              </div>
-            }
-            customButtonClassName="flex flex-grow justify-start text-custom-text-200 text-sm"
-          >
-            <></>
-            {profilePreferenceLinks.map((link) => (
-              <CustomMenu.MenuItem className="flex items-center gap-2">
-                <Link key={link.href} href={link.href} className="text-custom-text-300 w-full">
-                  {link.label}
-                </Link>
-              </CustomMenu.MenuItem>
-            ))}
-          </CustomMenu>
         </div>
       }
     >
-      <div className="relative flex h-screen w-full overflow-hidden">
-        <ProfilePreferenceSettingsSidebar />
-        <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
-          {header}
-          <div className="h-full w-full overflow-hidden">{children}</div>
-        </main>
+      <div className="h-full">
+        <PreferencesMobileHeader />
+        <div className="relative flex h-full w-full overflow-hidden">
+          <ProfilePreferenceSettingsSidebar />
+          <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+            {header}
+            <div className="h-full w-full">{children}</div>
+          </main>
+        </div>
       </div>
     </ProfileSettingsLayout>
   );

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

@@ -2,10 +2,10 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // components
 import { ProfileNavbar, ProfileSidebar } from "@/components/profile";
-// hooks
-import { useUser } from "@/hooks/store";
 // constants
 import { EUserWorkspaceRoles } from "@/constants/workspace";
+// hooks
+import { useUser } from "@/hooks/store";
 
 type Props = {
   children: React.ReactNode;
@@ -28,8 +28,7 @@ export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
   const isAuthorizedPath = router.pathname.includes("assigned" || "created" || "subscribed");
 
   return (
-    <div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
-      <ProfileSidebar />
+    <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={showProfileIssuesFilter} />
         {isAuthorized || !isAuthorizedPath ? (
@@ -40,6 +39,7 @@ export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
           </div>
         )}
       </div>
+        <ProfileSidebar />
     </div>
   );
 });

web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx

@@ -1,11 +1,12 @@
 import React, { ReactElement } from "react";
-// layouts
+// components
 import { PageHead } from "@/components/core";
 import { UserProfileHeader } from "@/components/headers";
 import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+import ProfileIssuesMobileHeader from "@/components/profile/profile-issues-mobile-header";
+// layouts
 import { AppLayout } from "@/layouts/app-layout";
 import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
-// components
 // types
 import { NextPageWithLayout } from "@/lib/types";
 
@@ -18,7 +19,7 @@ const ProfileAssignedIssuesPage: NextPageWithLayout = () => (
 
 ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<UserProfileHeader type="Assigned" />}>
+    <AppLayout header={<UserProfileHeader type="Assigned" />} mobileHeader={<ProfileIssuesMobileHeader />}>
       <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
     </AppLayout>
   );

web/pages/[workspaceSlug]/profile/[userId]/created.tsx

@@ -1,13 +1,14 @@
 import { ReactElement } from "react";
 // store
 import { observer } from "mobx-react-lite";
-// layouts
+// components
 import { PageHead } from "@/components/core";
 import { UserProfileHeader } from "@/components/headers";
 import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+import ProfileIssuesMobileHeader from "@/components/profile/profile-issues-mobile-header";
+// layouts
 import { AppLayout } from "@/layouts/app-layout";
 import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
-// components
 // types
 import { NextPageWithLayout } from "@/lib/types";
 
@@ -20,7 +21,7 @@ const ProfileCreatedIssuesPage: NextPageWithLayout = () => (
 
 ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<UserProfileHeader type="Created" />}>
+    <AppLayout header={<UserProfileHeader type="Created" />} mobileHeader={<ProfileIssuesMobileHeader />}>
       <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
     </AppLayout>
   );

web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx

@@ -1,13 +1,14 @@
 import { ReactElement } from "react";
 // store
 import { observer } from "mobx-react-lite";
-// layouts
+// components
 import { PageHead } from "@/components/core";
 import { UserProfileHeader } from "@/components/headers";
 import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+import ProfileIssuesMobileHeader from "@/components/profile/profile-issues-mobile-header";
+// layouts
 import { AppLayout } from "@/layouts/app-layout";
 import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
-// components
 // types
 import { NextPageWithLayout } from "@/lib/types";
 
@@ -20,7 +21,7 @@ const ProfileSubscribedIssuesPage: NextPageWithLayout = () => (
 
 ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<UserProfileHeader type="Subscribed" />}>
+    <AppLayout header={<UserProfileHeader type="Subscribed" />} mobileHeader={<ProfileIssuesMobileHeader />}>
       <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
     </AppLayout>
   );

web/pages/profile/change-password.tsx

@@ -91,7 +91,7 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
         </div>
         <form
           onSubmit={handleSubmit(handleChangePassword)}
-          className="mx-auto mt-16 flex h-full w-full flex-col gap-8 px-8 pb-8 lg:w-3/5"
+          className="mx-auto md:mt-16 mt-10 flex h-full w-full flex-col gap-8 px-4 md:px-8 pb-8 lg:w-3/5"
         >
           <h3 className="text-xl font-medium">Change password</h3>
           <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-10 xl:grid-cols-2 2xl:grid-cols-3">

web/pages/profile/index.tsx

@@ -172,7 +172,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
             )}
           />
           <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
-          <div className="vertical-scrollbar scrollbar-md mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto px-8 pb-8 pt-10 md:pt-16 lg:w-3/5">
+          <div className="vertical-scrollbar scrollbar-md mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto px-4 md:px-8 pb-8 pt-10 md:pt-16 lg:w-3/5">
             <form onSubmit={handleSubmit(onSubmit)}>
               <div className="flex w-full flex-col gap-8">
                 <div className="relative h-44 w-full">
@@ -222,7 +222,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                   </div>
                 </div>
 
-                <div className="item-center mt-4 flex justify-between px-8">
+                <div className="item-center mt-4 flex justify-between md:px-8">
                   <div className="flex flex-col">
                     <div className="item-center flex text-lg font-semibold text-custom-text-100">
                       <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
@@ -238,7 +238,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
             </Link> */}
                 </div>
 
-                <div className="grid grid-cols-1 gap-6 px-8 lg:grid-cols-2 2xl:grid-cols-3">
+                <div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3">
                   <div className="flex flex-col gap-1">
                     <h4 className="text-sm">
                       First name<span className="text-red-500">*</span>
@@ -423,7 +423,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                 </div>
               </div>
             </form>
-            <Disclosure as="div" className="border-t border-custom-border-100 px-8">
+            <Disclosure as="div" className="border-t border-custom-border-100 md:px-8">
               {({ open }) => (
                 <>
                   <Disclosure.Button

web/pages/profile/preferences/email.tsx

@@ -28,7 +28,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = () => {
   return (
     <>
       <PageHead title="Profile - Email Preference" />
-      <div className="mx-auto mt-8 h-full w-full px-6 lg:px-20 pb-8 vertical-scrollbar scrollbar-md">
+      <div className="mx-auto mt-8 h-full w-full md:px-6 px-4 lg:px-20 pb-8 vertical-scrollbar scrollbar-md">
         <EmailNotificationForm data={data} />
       </div>
     </>

web/pages/profile/preferences/theme.tsx

@@ -54,7 +54,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => {
     <>
       <PageHead title="Profile - Theme Prefrence" />
       {currentUser ? (
-        <div className="mx-auto mt-10 h-full w-full overflow-y-auto px-6 pb-8 md:mt-14 lg:px-20 vertical-scrollbar scrollbar-md">
+        <div className="mx-auto mt-10 h-full w-full overflow-y-auto md:px-6 px-4 pb-8 md:mt-14 lg:px-20 vertical-scrollbar scrollbar-md">
           <div className="flex items-center border-b border-custom-border-100 pb-3.5">
             <h3 className="text-xl font-medium">Preferences</h3>
           </div>