feat: init

apps/web/core/components/inbox/sidebar/inbox-list-item.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import type { FC, MouseEvent } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+// plane imports
+import { PriorityIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import { Row, Avatar } from "@plane/ui";
+import { cn, renderFormattedDate, getFileURL } from "@plane/utils";
+// components
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web imports
+import { InboxSourcePill } from "@/plane-web/components/inbox/source-pill";
+// local imports
+import { InboxIssueStatus } from "../inbox-issue-status";
+
+type InboxIssueListItemProps = {
+  workspaceSlug: string;
+  projectId: string;
+  projectIdentifier?: string;
+  inboxIssueId: string;
+  setIsMobileSidebar: (value: boolean) => void;
+};
+
+export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props) => {
+  const { workspaceSlug, projectId, inboxIssueId, projectIdentifier, setIsMobileSidebar } = props;
+  // router
+  const searchParams = useSearchParams();
+  const selectedInboxIssueId = searchParams.get("inboxIssueId");
+  // store
+  const { currentTab, getIssueInboxByIssueId } = useProjectInbox();
+  const { projectLabels } = useLabel();
+  const { isMobile } = usePlatformOS();
+  const { getUserDetails } = useMember();
+  const inboxIssue = getIssueInboxByIssueId(inboxIssueId);
+  const issue = inboxIssue?.issue;
+
+  const handleIssueRedirection = (event: MouseEvent, currentIssueId: string | undefined) => {
+    if (selectedInboxIssueId === currentIssueId) event.preventDefault();
+    setIsMobileSidebar(false);
+  };
+
+  if (!issue) return <></>;
+
+  const createdByDetails = issue?.created_by ? getUserDetails(issue?.created_by) : undefined;
+
+  return (
+    <>
+      <Link
+        id={`inbox-issue-list-item-${issue.id}`}
+        key={`${projectId}_${issue.id}`}
+        href={`/${workspaceSlug}/projects/${projectId}/intake?currentTab=${currentTab}&inboxIssueId=${issue.id}`}
+        onClick={(e) => handleIssueRedirection(e, issue.id)}
+      >
+        <Row
+          className={cn(
+            `flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-custom-border-200 py-4 hover:bg-custom-primary/5 cursor-pointer transition-all`,
+            { "border-custom-primary-100 border": selectedInboxIssueId === issue.id }
+          )}
+        >
+          <div className="space-y-1">
+            <div className="relative flex items-center justify-between gap-2">
+              <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+                {projectIdentifier}-{issue.sequence_id}
+              </div>
+              <div className="flex items-center gap-2">
+                {inboxIssue.source && <InboxSourcePill source={inboxIssue.source} />}
+                {inboxIssue.status !== -2 && <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />}
+              </div>
+            </div>
+            <h3 className="truncate w-full text-sm">{issue.name}</h3>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="flex flex-wrap items-center gap-2">
+              <Tooltip
+                tooltipHeading="Created on"
+                tooltipContent={`${renderFormattedDate(issue.created_at ?? "")}`}
+                isMobile={isMobile}
+              >
+                <div className="text-xs text-custom-text-200">{renderFormattedDate(issue.created_at ?? "")}</div>
+              </Tooltip>
+
+              <div className="border-2 rounded-full border-custom-border-400" />
+
+              {issue.priority && (
+                <Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
+                  <PriorityIcon priority={issue.priority} withContainer className="w-3 h-3" />
+                </Tooltip>
+              )}
+
+              {issue.label_ids && issue.label_ids.length > 3 ? (
+                <div className="relative !h-[17.5px] flex items-center gap-1 rounded border border-custom-border-300 px-1 text-xs">
+                  <span className="h-2 w-2 rounded-full bg-orange-400" />
+                  <span className="normal-case max-w-28 truncate">{`${issue.label_ids.length} labels`}</span>
+                </div>
+              ) : (
+                <>
+                  {(issue.label_ids ?? []).map((labelId) => {
+                    const labelDetails = projectLabels?.find((l) => l.id === labelId);
+                    if (!labelDetails) return null;
+                    return (
+                      <div
+                        key={labelId}
+                        className="relative !h-[17.5px] flex items-center gap-1 rounded border border-custom-border-300 px-1 text-xs"
+                      >
+                        <span
+                          className="h-2 w-2 rounded-full"
+                          style={{
+                            backgroundColor: labelDetails.color,
+                          }}
+                        />
+                        <span className="normal-case max-w-28 truncate">{labelDetails.name}</span>
+                      </div>
+                    );
+                  })}
+                </>
+              )}
+            </div>
+            {/* created by */}
+            {createdByDetails && createdByDetails.email?.includes("intake@plane.so") ? (
+              <Avatar src={getFileURL("")} name={"Plane"} size="md" showTooltip />
+            ) : createdByDetails ? (
+              <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />
+            ) : null}
+          </div>
+        </Row>
+      </Link>
+    </>
+  );
+});

apps/web/core/components/inbox/sidebar/inbox-list.tsx

@@ -0,0 +1,33 @@
+import type { FC } from "react";
+import { Fragment } from "react";
+import { observer } from "mobx-react";
+// local imports
+import { InboxIssueListItem } from "./inbox-list-item";
+
+export type InboxIssueListProps = {
+  workspaceSlug: string;
+  projectId: string;
+  projectIdentifier?: string;
+  inboxIssueIds: string[];
+  setIsMobileSidebar: (value: boolean) => void;
+};
+
+export const InboxIssueList: FC<InboxIssueListProps> = observer((props) => {
+  const { workspaceSlug, projectId, projectIdentifier, inboxIssueIds, setIsMobileSidebar } = props;
+
+  return (
+    <>
+      {inboxIssueIds.map((inboxIssueId) => (
+        <Fragment key={inboxIssueId}>
+          <InboxIssueListItem
+            setIsMobileSidebar={setIsMobileSidebar}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            projectIdentifier={projectIdentifier}
+            inboxIssueId={inboxIssueId}
+          />
+        </Fragment>
+      ))}
+    </>
+  );
+});

apps/web/core/components/inbox/sidebar/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/core/components/inbox/sidebar/root.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import type { FC } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { TInboxIssueCurrentTab } from "@plane/types";
+import { EInboxIssueCurrentTab } from "@plane/types";
+// plane imports
+import { Header, Loader, EHeaderVariant } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+import { InboxSidebarLoader } from "@/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+// local imports
+import { FiltersRoot } from "../inbox-filter";
+import { InboxIssueAppliedFilters } from "../inbox-filter/applied-filters/root";
+import { InboxIssueList } from "./inbox-list";
+
+type IInboxSidebarProps = {
+  workspaceSlug: string;
+  projectId: string;
+  inboxIssueId: string | undefined;
+  setIsMobileSidebar: (value: boolean) => void;
+};
+
+const tabNavigationOptions: { key: TInboxIssueCurrentTab; i18n_label: string }[] = [
+  {
+    key: EInboxIssueCurrentTab.OPEN,
+    i18n_label: "inbox_issue.tabs.open",
+  },
+  {
+    key: EInboxIssueCurrentTab.CLOSED,
+    i18n_label: "inbox_issue.tabs.closed",
+  },
+];
+
+export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
+  const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
+  // router
+  const router = useAppRouter();
+  // ref
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [elementRef, setElementRef] = useState<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
+  // store
+  const { currentProjectDetails } = useProject();
+  const {
+    currentTab,
+    handleCurrentTab,
+    loader,
+    filteredInboxIssueIds,
+    inboxIssuePaginationInfo,
+    fetchInboxPaginationIssues,
+    getAppliedFiltersCount,
+  } = useProjectInbox();
+  // derived values
+  const sidebarAssetPath = useResolvedAssetPath({ basePath: "/empty-state/intake/intake-issue" });
+  const sidebarFilterAssetPath = useResolvedAssetPath({
+    basePath: "/empty-state/intake/filter-issue",
+  });
+
+  const fetchNextPages = useCallback(() => {
+    if (!workspaceSlug || !projectId) return;
+    fetchInboxPaginationIssues(workspaceSlug.toString(), projectId.toString());
+  }, [workspaceSlug, projectId, fetchInboxPaginationIssues]);
+
+  // page observer
+  useIntersectionObserver(containerRef, elementRef, fetchNextPages, "20%");
+
+  useEffect(() => {
+    if (workspaceSlug && projectId && currentTab && filteredInboxIssueIds.length > 0) {
+      if (inboxIssueId === undefined) {
+        router.push(
+          `/${workspaceSlug}/projects/${projectId}/intake?currentTab=${currentTab}&inboxIssueId=${filteredInboxIssueIds[0]}`
+        );
+      }
+    }
+  }, [currentTab, filteredInboxIssueIds, inboxIssueId, projectId, router, workspaceSlug]);
+
+  return (
+    <div className="bg-custom-background-100 flex-shrink-0 w-full h-full border-r border-custom-border-300 ">
+      <div className="relative w-full h-full flex flex-col overflow-hidden">
+        <Header variant={EHeaderVariant.SECONDARY}>
+          {tabNavigationOptions.map((option) => (
+            <div
+              key={option?.key}
+              className={cn(
+                `text-sm relative flex items-center gap-1 h-full px-3 cursor-pointer transition-all font-medium`,
+                currentTab === option?.key ? `text-custom-primary-100` : `hover:text-custom-text-200`
+              )}
+              onClick={() => {
+                if (currentTab != option?.key) {
+                  handleCurrentTab(workspaceSlug, projectId, option?.key);
+                  router.push(`/${workspaceSlug}/projects/${projectId}/intake?currentTab=${option?.key}`);
+                }
+              }}
+            >
+              <div>{t(option?.i18n_label)}</div>
+              {option?.key === "open" && currentTab === option?.key && (
+                <div className="rounded-full p-1.5 py-0.5 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold">
+                  {inboxIssuePaginationInfo?.total_results || 0}
+                </div>
+              )}
+              <div
+                className={cn(
+                  `border absolute bottom-0 right-0 left-0 rounded-t-md`,
+                  currentTab === option?.key ? `border-custom-primary-100` : `border-transparent`
+                )}
+              />
+            </div>
+          ))}
+          <div className="m-auto mr-0">
+            <FiltersRoot />
+          </div>
+        </Header>
+        <InboxIssueAppliedFilters />
+
+        {loader != undefined && loader === "filter-loading" && !inboxIssuePaginationInfo?.next_page_results ? (
+          <InboxSidebarLoader />
+        ) : (
+          <div
+            className="w-full h-full overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md"
+            ref={containerRef}
+          >
+            {filteredInboxIssueIds.length > 0 ? (
+              <InboxIssueList
+                setIsMobileSidebar={setIsMobileSidebar}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                projectIdentifier={currentProjectDetails?.identifier}
+                inboxIssueIds={filteredInboxIssueIds}
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full w-full">
+                {getAppliedFiltersCount > 0 ? (
+                  <SimpleEmptyState
+                    title={t("inbox_issue.empty_state.sidebar_filter.title")}
+                    description={t("inbox_issue.empty_state.sidebar_filter.description")}
+                    assetPath={sidebarFilterAssetPath}
+                  />
+                ) : currentTab === EInboxIssueCurrentTab.OPEN ? (
+                  <SimpleEmptyState
+                    title={t("inbox_issue.empty_state.sidebar_open_tab.title")}
+                    description={t("inbox_issue.empty_state.sidebar_open_tab.description")}
+                    assetPath={sidebarAssetPath}
+                  />
+                ) : (
+                  <SimpleEmptyState
+                    title={t("inbox_issue.empty_state.sidebar_closed_tab.title")}
+                    description={t("inbox_issue.empty_state.sidebar_closed_tab.description")}
+                    assetPath={sidebarAssetPath}
+                  />
+                )}
+              </div>
+            )}
+            <div ref={setElementRef}>
+              {inboxIssuePaginationInfo?.next_page_results && (
+                <Loader className="mx-auto w-full space-y-4 py-4 px-2">
+                  <Loader.Item height="64px" width="w-100" />
+                  <Loader.Item height="64px" width="w-100" />
+                </Loader>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});