NODEDC_TASKMANAGER/plane-src/apps/web/ce/components/projects/external-contours/sidebar.tsx

/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import type { TInboxIssueCurrentTab } from "@plane/types";
import { EInboxIssueCurrentTab } from "@plane/types";
import { cn } from "@plane/utils";
import { useSearchParams } from "next/navigation";
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
import { useAppRouter } from "@/hooks/use-app-router";
import { ExternalContoursEmptyState } from "./empty-state";
import { ExternalContoursListItem } from "./list-item";

type Props = {
  workspaceSlug: string;
  projectId: string;
  inboxIssueId: string | undefined;
  setIsMobileSidebar: (value: boolean) => void;
};

const tabNavigationOptions: { key: TInboxIssueCurrentTab; i18n_label: string }[] = [
  { key: EInboxIssueCurrentTab.OPEN, i18n_label: "external_contours_page.tabs.open" },
  { key: EInboxIssueCurrentTab.CLOSED, i18n_label: "external_contours_page.tabs.closed" },
];

export const ExternalContoursSidebar = observer(function ExternalContoursSidebar(props: Props) {
  const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
  const router = useAppRouter();
  const searchParams = useSearchParams();
  const { t } = useTranslation();
  const { currentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader, handleCurrentTab } =
    useProjectExternalContours();
  const [pendingTab, setPendingTab] = useState<TInboxIssueCurrentTab | null>(null);
  const routeTab = (searchParams.get("currentTab") as TInboxIssueCurrentTab | null) ?? currentTab;
  const resolvedTab = pendingTab ?? routeTab;
  const isTabTransitioning = loader === "init-loading" || pendingTab !== null || routeTab !== currentTab;

  useEffect(() => {
    if (pendingTab && loader !== "init-loading" && routeTab === pendingTab && currentTab === pendingTab) {
      setPendingTab(null);
    }
  }, [currentTab, loader, pendingTab, routeTab]);

  useEffect(() => {
    if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
      router.push(
        `/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${resolvedTab}&inboxIssueId=${filteredRequestIds[0]}`
      );
    }
  }, [filteredRequestIds, inboxIssueId, projectId, resolvedTab, router, workspaceSlug]);

  return (
    <div className="nodedc-external-sidebar-shell h-full w-full flex-shrink-0 border-r border-strong/40">
      <div className="relative flex h-full w-full flex-col overflow-hidden">
        <div className="px-4 py-4">
          <div className="nodedc-filter-row-shell flex items-center gap-2 p-1">
            {tabNavigationOptions.map((option) => {
              const count = option.key === EInboxIssueCurrentTab.CLOSED ? closedRequestIds.length : openRequestIds.length;
              return (
                <button
                  type="button"
                  key={option.key}
                  data-active={resolvedTab === option.key}
                  className={cn(
                    "nodedc-external-tab flex flex-1 items-center justify-center gap-2 text-13 font-medium transition-all"
                  )}
                  onClick={() => {
                    if (resolvedTab !== option.key) {
                      setPendingTab(option.key);
                      void handleCurrentTab(workspaceSlug, projectId, option.key);
                      router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
                    }
                  }}
                >
                  <div>{t(option.i18n_label)}</div>
                  <div
                    className={cn(
                      "rounded-full px-1.5 py-0.5 text-11 font-semibold",
                      resolvedTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
                    )}
                  >
                    {count}
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto px-4 pb-4">
          {isTabTransitioning ? (
            <div className="flex h-full items-center justify-center">
              <div className="nodedc-external-empty px-6 py-6 text-13 text-secondary">
                {t("loading")}...
              </div>
            </div>
          ) : filteredRequestIds.length > 0 ? (
            <div key={resolvedTab} className="space-y-4 pb-1">
              {filteredRequestIds.map((requestId) => (
                <ExternalContoursListItem
                  key={requestId}
                  setIsMobileSidebar={setIsMobileSidebar}
                  workspaceSlug={workspaceSlug}
                  projectId={projectId}
                  requestId={requestId}
                />
              ))}
            </div>
          ) : (
            <div className="flex h-full w-full items-center justify-center">
              <ExternalContoursEmptyState
                title={t(
                  resolvedTab === EInboxIssueCurrentTab.OPEN
                    ? "external_contours_page.empty_state.open_title"
                    : "external_contours_page.empty_state.closed_title"
                )}
                description={t(
                  resolvedTab === EInboxIssueCurrentTab.OPEN
                    ? "external_contours_page.empty_state.open_description"
                    : "external_contours_page.empty_state.closed_description"
                )}
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
});