snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

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

@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MouseEvent } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { PriorityIcon } from "@plane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { Row } from "@plane/ui";
+import { cn, renderFormattedDate } 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";
+// 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 = observer(function InboxIssueListItem(props: InboxIssueListItemProps) {
+  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(
+            `relative flex cursor-pointer flex-col gap-2 border border-t-transparent border-r-transparent border-b-subtle-1 border-l-transparent py-4 transition-all hover:bg-accent-primary/5`,
+            { "border border-accent-strong": selectedInboxIssueId === issue.id }
+          )}
+        >
+          <div className="space-y-1">
+            <div className="relative flex items-center justify-between gap-2">
+              <div className="flex-shrink-0 text-11 font-medium text-tertiary">
+                {projectIdentifier}-{issue.sequence_id}
+              </div>
+              <div className="flex items-center gap-2">
+                {inboxIssue.status !== -2 && <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />}
+              </div>
+            </div>
+            <h3 className="w-full truncate text-13">{issue.name}</h3>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="flex flex-wrap items-center gap-2">
+              <Tooltip label={`Created on: ${renderFormattedDate(issue.created_at ?? "") ?? ""}`} disabled={isMobile}>
+                <div className="text-11 text-secondary">{renderFormattedDate(issue.created_at ?? "")}</div>
+              </Tooltip>
+
+              <div className="rounded-full border-2 border-strong-1" />
+
+              {issue.priority && (
+                <Tooltip label={`Priority: ${issue.priority ?? "None"}`}>
+                  <PriorityIcon priority={issue.priority} withContainer className="h-3 w-3" />
+                </Tooltip>
+              )}
+
+              {issue.label_ids && issue.label_ids.length > 3 ? (
+                <div className="relative flex !h-[17.5px] items-center gap-1 rounded-sm border border-strong px-1 text-11">
+                  <span className="bg-orange-400 h-2 w-2 rounded-full" />
+                  <span className="max-w-28 truncate normal-case">{`${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 flex !h-[17.5px] items-center gap-1 rounded-sm border border-strong px-1 text-11"
+                      >
+                        <span
+                          className="h-2 w-2 rounded-full"
+                          style={{
+                            backgroundColor: labelDetails.color,
+                          }}
+                        />
+                        <span className="max-w-28 truncate normal-case">{labelDetails.name}</span>
+                      </div>
+                    );
+                  })}
+                </>
+              )}
+            </div>
+            {/* created by */}
+            {createdByDetails && createdByDetails.email?.includes("intake@plane.so") ? (
+              <Avatar alt="Plane" fallback="P" size="xs" />
+            ) : createdByDetails ? (
+              <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />
+            ) : null}
+          </div>
+        </Row>
+      </Link>
+    </>
+  );
+});

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

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 = observer(function InboxIssueList(props: InboxIssueListProps) {
+  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,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

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

@@ -0,0 +1,188 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+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 { 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";
+// 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 = observer(function InboxSidebar(props: IInboxSidebarProps) {
+  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 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="h-full w-full flex-shrink-0 border-r border-strong bg-surface-1">
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <Header variant={EHeaderVariant.SECONDARY}>
+          {tabNavigationOptions.map((option) => (
+            <div
+              key={option?.key}
+              className={cn(
+                `relative flex h-full cursor-pointer items-center gap-1 px-3 text-13 font-medium transition-all`,
+                currentTab === option?.key ? `text-accent-primary` : `hover:text-secondary`
+              )}
+              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 bg-accent-primary/20 p-1.5 py-0.5 text-11 font-semibold text-accent-primary">
+                  {inboxIssuePaginationInfo?.total_results || 0}
+                </div>
+              )}
+              <div
+                className={cn(
+                  `absolute right-0 bottom-0 left-0 rounded-t-md border`,
+                  currentTab === option?.key ? `border-accent-strong` : `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="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto"
+            ref={containerRef}
+          >
+            {filteredInboxIssueIds.length > 0 ? (
+              <InboxIssueList
+                setIsMobileSidebar={setIsMobileSidebar}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                projectIdentifier={currentProjectDetails?.identifier}
+                inboxIssueIds={filteredInboxIssueIds}
+              />
+            ) : (
+              <div className="flex h-full w-full items-center justify-center">
+                {getAppliedFiltersCount > 0 ? (
+                  <EmptyStateDetailed
+                    assetKey="search"
+                    title={t("common_empty_state.search.title")}
+                    description={t("common_empty_state.search.description")}
+                    assetClassName="size-20"
+                    rootClassName="px-page-x"
+                  />
+                ) : currentTab === EInboxIssueCurrentTab.OPEN ? (
+                  <EmptyStateDetailed
+                    assetKey="inbox"
+                    title={t("project_empty_state.intake_sidebar.title")}
+                    description={t("project_empty_state.intake_sidebar.description")}
+                    assetClassName="size-20"
+                    actions={[
+                      {
+                        label: t("project_empty_state.intake_sidebar.cta_primary"),
+                        onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/intake`),
+                        variant: "primary",
+                      },
+                    ]}
+                    rootClassName="px-page-x"
+                  />
+                ) : (
+                  // TODO: Add translation
+                  <EmptyStateDetailed
+                    assetKey="inbox"
+                    title="No request closed yet"
+                    description="All the work items whether accepted or declined can be found here."
+                    assetClassName="size-20"
+                    className="px-10"
+                  />
+                )}
+              </div>
+            )}
+            <div ref={setElementRef}>
+              {inboxIssuePaginationInfo?.next_page_results && (
+                <Loader className="mx-auto w-full space-y-4 px-2 py-4">
+                  <Loader.Item height="64px" width="w-100" />
+                  <Loader.Item height="64px" width="w-100" />
+                </Loader>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});