chore : project inbox improvement (#3695)

* chore: project inbox layout loader added

* chore: project inbox layout loader added

* chore: project inbox added in sidebar project items

* chore: inbox loader improvement

* chore: project inbox improvement

web/components/headers/project-issues.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useState } from "react";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Briefcase, Circle, ExternalLink, Plus, Inbox } from "lucide-react";
+import { Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
 // hooks
 import {
   useApplication,
@@ -11,7 +10,6 @@ import {
   useProject,
   useProjectState,
   useUser,
-  useInbox,
   useMember,
 } from "hooks/store";
 // components
@@ -54,7 +52,6 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   const { currentProjectDetails } = useProject();
   const { projectStates } = useProjectState();
   const { projectLabels } = useLabel();
-  const { getInboxesByProjectId, getInboxById } = useInbox();
 
   const activeLayout = issueFilters?.displayFilters?.layout;
 
@@ -101,9 +98,6 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
     [workspaceSlug, projectId, updateFilters]
   );
 
-  const inboxesMap = currentProjectDetails?.inbox_view ? getInboxesByProjectId(currentProjectDetails.id) : undefined;
-  const inboxDetails = inboxesMap && inboxesMap.length > 0 ? getInboxById(inboxesMap[0]) : undefined;
-
   const deployUrl = process.env.NEXT_PUBLIC_DEPLOY_URL;
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
@@ -154,7 +148,9 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
 
                 <Breadcrumbs.BreadcrumbItem
                   type="text"
-                  link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
+                  link={
+                    <BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+                  }
                 />
               </Breadcrumbs>
             </div>
@@ -201,24 +197,15 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               />
             </FiltersDropdown>
           </div>
-          {currentProjectDetails?.inbox_view && inboxDetails && (
-            <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
-              <span className="hidden md:block" >
-                <Button variant="neutral-primary" size="sm" className="relative">
-                  Inbox
-                  {inboxDetails?.pending_issue_count > 0 && (
-                    <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-custom-sidebar-border-200 bg-custom-sidebar-background-80 text-custom-text-100">
-                      {inboxDetails?.pending_issue_count}
-                    </span>
-                  )}
-                </Button>
-              </span>
-              <Inbox className="w-4 h-4 mr-2 text-custom-text-200 block md:hidden" />
-            </Link>
-          )}
+
           {canUserCreateIssue && (
             <>
-              <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+              <Button
+                className="hidden md:block"
+                onClick={() => setAnalyticsModal(true)}
+                variant="neutral-primary"
+                size="sm"
+              >
                 Analytics
               </Button>
               <Button

web/components/inbox/sidebar/root.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 // hooks
 import { useInboxIssues } from "hooks/store";
 // ui
-import { Loader } from "@plane/ui";
+import { InboxSidebarLoader } from "components/ui";
 // components
 import { InboxIssueList, InboxIssueFilterSelection, InboxIssueAppliedFilter } from "../";
 
@@ -21,6 +21,10 @@ export const InboxSidebarRoot: FC<TInboxSidebarRoot> = observer((props) => {
     issues: { loader },
   } = useInboxIssues();
 
+  if (loader === "init-loader") {
+    return <InboxSidebarLoader />;
+  }
+
   return (
     <div className="relative flex flex-col w-full h-full">
       <div className="flex-shrink-0 w-full h-[50px] relative flex justify-between items-center gap-2 p-2 px-3 border-b border-custom-border-300">
@@ -28,7 +32,6 @@ export const InboxSidebarRoot: FC<TInboxSidebarRoot> = observer((props) => {
           <div className="relative w-6 h-6 flex justify-center items-center rounded bg-custom-background-80">
             <Inbox className="w-4 h-4" />
           </div>
-          <div className="font-medium">Inbox</div>
         </div>
         <div className="z-20">
           <InboxIssueFilterSelection workspaceSlug={workspaceSlug} projectId={projectId} inboxId={inboxId} />
@@ -39,18 +42,9 @@ export const InboxSidebarRoot: FC<TInboxSidebarRoot> = observer((props) => {
         <InboxIssueAppliedFilter workspaceSlug={workspaceSlug} projectId={projectId} inboxId={inboxId} />
       </div>
 
-      {loader && ["init-loader", "mutation"].includes(loader) ? (
-        <Loader className="flex flex-col h-full gap-5 p-5">
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
-        </Loader>
-      ) : (
-        <div className="w-full h-full overflow-hidden">
-          <InboxIssueList workspaceSlug={workspaceSlug} projectId={projectId} inboxId={inboxId} />
-        </div>
-      )}
+      <div className="w-full h-full overflow-hidden">
+        <InboxIssueList workspaceSlug={workspaceSlug} projectId={projectId} inboxId={inboxId} />
+      </div>
     </div>
   );
 });

web/components/project/sidebar-list-item.tsx

@@ -16,12 +16,15 @@ import {
   LogOut,
   ChevronDown,
   MoreHorizontal,
+  Inbox,
 } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useProject } from "hooks/store";
+import { useApplication, useEventTracker, useInbox, useProject } from "hooks/store";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import useToast from "hooks/use-toast";
 // helpers
+import { cn } from "helpers/common.helper";
+import { getNumberCount } from "helpers/string.helper";
 import { renderEmoji } from "helpers/emoji.helper";
 // components
 import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
@@ -62,6 +65,11 @@ const navigation = (workspaceSlug: string, projectId: string) => [
     href: `/${workspaceSlug}/projects/${projectId}/pages`,
     Icon: FileText,
   },
+  {
+    name: "Inbox",
+    href: `/${workspaceSlug}/projects/${projectId}/inbox`,
+    Icon: Inbox,
+  },
   {
     name: "Settings",
     href: `/${workspaceSlug}/projects/${projectId}/settings`,
@@ -75,7 +83,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   // store hooks
   const { theme: themeStore } = useApplication();
   const { setTrackElement } = useEventTracker();
-  const { addProjectToFavorites, removeProjectFromFavorites, getProjectById } = useProject();
+  const { currentProjectDetails, addProjectToFavorites, removeProjectFromFavorites, getProjectById } = useProject();
+  const { getInboxesByProjectId, getInboxById } = useInbox();
   // states
   const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
   const [publishModalOpen, setPublishModal] = useState(false);
@@ -96,6 +105,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
 
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
 
+  const inboxesMap = currentProjectDetails?.inbox_view ? getInboxesByProjectId(currentProjectDetails.id) : undefined;
+  const inboxDetails = inboxesMap && inboxesMap.length > 0 ? getInboxById(inboxesMap[0]) : undefined;
+
   const handleAddToFavorites = () => {
     if (!workspaceSlug || !project) return;
 
@@ -147,8 +159,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
         {({ open }) => (
           <>
             <div
-              className={`group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-10 hover:bg-custom-sidebar-background-80 ${snapshot?.isDragging ? "opacity-60" : ""
-                } ${isMenuActive ? "!bg-custom-sidebar-background-80" : ""}`}
+              className={`group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-10 hover:bg-custom-sidebar-background-80 ${
+                snapshot?.isDragging ? "opacity-60" : ""
+              } ${isMenuActive ? "!bg-custom-sidebar-background-80" : ""}`}
             >
               {provided && (
                 <Tooltip
@@ -157,9 +170,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                 >
                   <button
                     type="button"
-                    className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400 ${isCollapsed ? "" : "group-hover:!flex"
-                      } ${project.sort_order === null ? "cursor-not-allowed opacity-60" : ""} ${isMenuActive ? "!flex" : ""
-                      }`}
+                    className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400 ${
+                      isCollapsed ? "" : "group-hover:!flex"
+                    } ${project.sort_order === null ? "cursor-not-allowed opacity-60" : ""} ${
+                      isMenuActive ? "!flex" : ""
+                    }`}
                     {...provided?.dragHandleProps}
                   >
                     <MoreVertical className="h-3.5" />
@@ -170,12 +185,14 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
               <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!isCollapsed}>
                 <Disclosure.Button
                   as="div"
-                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${isCollapsed ? "justify-center" : `justify-between`
-                    }`}
+                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
+                    isCollapsed ? "justify-center" : `justify-between`
+                  }`}
                 >
                   <div
-                    className={`flex w-full flex-grow items-center gap-x-2 truncate ${isCollapsed ? "justify-center" : ""
-                      }`}
+                    className={`flex w-full flex-grow items-center gap-x-2 truncate ${
+                      isCollapsed ? "justify-center" : ""
+                    }`}
                   >
                     {project.emoji ? (
                       <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
@@ -195,8 +212,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   </div>
                   {!isCollapsed && (
                     <ChevronDown
-                      className={`hidden h-4 w-4 flex-shrink-0 ${open ? "rotate-180" : ""} ${isMenuActive ? "!block" : ""
-                        }  mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:!block`}
+                      className={`hidden h-4 w-4 flex-shrink-0 ${open ? "rotate-180" : ""} ${
+                        isMenuActive ? "!block" : ""
+                      }  mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:!block`}
                     />
                   )}
                 </Disclosure.Button>
@@ -306,7 +324,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                     (item.name === "Cycles" && !project.cycle_view) ||
                     (item.name === "Modules" && !project.module_view) ||
                     (item.name === "Views" && !project.issue_views_view) ||
-                    (item.name === "Pages" && !project.page_view)
+                    (item.name === "Pages" && !project.page_view) ||
+                    (item.name === "Inbox" && !project.inbox_view)
                   )
                     return;
 
@@ -320,13 +339,42 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                           disabled={!isCollapsed}
                         >
                           <div
-                            className={`group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-xs font-medium outline-none ${router.asPath.includes(item.href)
-                              ? "bg-custom-primary-100/10 text-custom-primary-100"
-                              : "text-custom-sidebar-text-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                              } ${isCollapsed ? "justify-center" : ""}`}
+                            className={`group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-xs font-medium outline-none ${
+                              router.asPath.includes(item.href)
+                                ? "bg-custom-primary-100/10 text-custom-primary-100"
+                                : "text-custom-sidebar-text-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                            } ${isCollapsed ? "justify-center" : ""}`}
                           >
-                            <item.Icon className="h-4 w-4 stroke-[1.5]" />
-                            {!isCollapsed && item.name}
+                            {item.name === "Inbox" && inboxDetails ? (
+                              <>
+                                <div className="flex items-center justify-center relative">
+                                  {inboxDetails?.pending_issue_count > 0 && (
+                                    <span
+                                      className={cn(
+                                        "absolute -right-1.5 -top-1 px-0.5 h-3.5 w-3.5 flex items-center tracking-tight justify-center rounded-full text-[0.5rem] border-[0.5px] border-custom-sidebar-border-200 bg-custom-background-80 text-custom-text-100",
+                                        {
+                                          "text-[0.375rem] leading-5": inboxDetails?.pending_issue_count >= 100,
+                                        },
+                                        {
+                                          "border-none bg-custom-primary-300 text-white": router.asPath.includes(
+                                            item.href
+                                          ),
+                                        }
+                                      )}
+                                    >
+                                      {getNumberCount(inboxDetails?.pending_issue_count)}
+                                    </span>
+                                  )}
+                                  <item.Icon className="h-4 w-4 stroke-[1.5]" />
+                                </div>
+                                {!isCollapsed && item.name}
+                              </>
+                            ) : (
+                              <>
+                                <item.Icon className="h-4 w-4 stroke-[1.5]" />
+                                {!isCollapsed && item.name}
+                              </>
+                            )}
                           </div>
                         </Tooltip>
                       </span>

web/components/ui/loader/layouts/index.ts

@@ -3,3 +3,4 @@ export * from "./kanban-layout-loader";
 export * from "./calendar-layout-loader";
 export * from "./spreadsheet-layout-loader";
 export * from "./gantt-layout-loader";
+export * from "./project-inbox";

web/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+// ui
+import { InboxSidebarLoader } from "./inbox-sidebar-loader";
+
+export const InboxLayoutLoader = () => (
+  <div className="relative flex h-full overflow-hidden">
+    <InboxSidebarLoader />
+    <div className="w-full">
+      <div className="grid h-full place-items-center p-4 text-custom-text-200">
+        <div className="grid h-full place-items-center">
+          <div className="my-5 flex flex-col items-center gap-4">
+            <span className="h-[60px] w-[60px] bg-custom-background-80 rounded" />
+            <span className="h-6 w-96 bg-custom-background-80 rounded" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);

web/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export const InboxSidebarLoader = () => (
+  <div className="h-full w-[340px] border-r border-custom-border-300">
+    <div className="flex-shrink-0 w-full h-[50px] relative flex justify-between items-center gap-2 p-2 px-3 border-b border-custom-border-300">
+      <span className="h-6 w-16 bg-custom-background-80 rounded" />
+      <span className="h-6 w-16 bg-custom-background-80 rounded" />
+    </div>
+    <div className="flex flex-col">
+      {[...Array(6)].map(() => (
+        <div className="flex flex-col gap-3 h-[5rem]space-y-3 border-b border-custom-border-200 px-4 py-2">
+          <div className="flex items-center justify-between gap-3">
+            <span className="h-5 w-20 bg-custom-background-80 rounded" />
+            <span className="h-5 w-16 bg-custom-background-80 rounded" />
+          </div>
+          <div className="flex items-center gap-3">
+            <span className="h-5 w-5 bg-custom-background-80 rounded" />
+            <span className="h-5 w-16 bg-custom-background-80 rounded" />
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);

web/components/ui/loader/layouts/project-inbox/index.ts

@@ -0,0 +1,2 @@
+export * from "./inbox-layout-loader";
+export * from "./inbox-sidebar-loader";

web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx

@@ -6,6 +6,8 @@ import { observer } from "mobx-react";
 import { useInbox, useProject } from "hooks/store";
 // layouts
 import { AppLayout } from "layouts/app-layout";
+// ui
+import { InboxLayoutLoader } from "components/ui";
 // components
 import { ProjectInboxHeader } from "components/headers";
 // types
@@ -33,7 +35,7 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
 
   return (
     <div className="flex h-full flex-col">
-      {currentProjectDetails?.inbox_view ? <div>Loading...</div> : <div>You don{"'"}t have access to inbox</div>}
+      {currentProjectDetails?.inbox_view ? <InboxLayoutLoader /> : <div>You don{"'"}t have access to inbox</div>}
     </div>
   );
 });