UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: внешний контур, auth empty state и HDESIGN update

This commit is contained in:
DCCONSTRUCTIONS
2026-04-20 13:30:04 +03:00
parent b1f980bc7f
commit 9553c81752
16 changed files with 551 additions and 294 deletions
@@ -10,6 +10,7 @@ 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";
@@ -30,17 +31,20 @@ const tabNavigationOptions: { key: TInboxIssueCurrentTab; i18n_label: string }[]
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, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader } =
const { currentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader, handleCurrentTab } =
useProjectExternalContours();
const routeTab = (searchParams.get("currentTab") as TInboxIssueCurrentTab | null) ?? currentTab;
const isTabTransitioning = loader === "init-loading" || routeTab !== currentTab;
useEffect(() => {
if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
router.push(
`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${filteredRequestIds[0]}`
`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${routeTab}&inboxIssueId=${filteredRequestIds[0]}`
);
}
}, [currentTab, filteredRequestIds, inboxIssueId, projectId, router, workspaceSlug]);
}, [filteredRequestIds, inboxIssueId, projectId, routeTab, router, workspaceSlug]);
return (
<div className="nodedc-external-sidebar-shell h-full w-full flex-shrink-0 border-r border-strong/40">
@@ -52,27 +56,27 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
return (
<button
type="button"
key={option.key}
data-active={currentTab === option.key}
className={cn(
key={option.key}
data-active={routeTab === option.key}
className={cn(
"nodedc-external-tab flex flex-1 items-center justify-center gap-2 text-13 font-medium transition-all"
)}
onClick={() => {
if (currentTab !== option.key) {
handleCurrentTab(workspaceSlug, projectId, option.key);
router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
}
}}
>
)}
onClick={() => {
if (routeTab !== 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",
currentTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
routeTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
)}
>
{count}
</div>
</div>
</button>
);
})}
@@ -80,14 +84,14 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
</div>
<div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto px-4 pb-4">
{loader === "init-loading" ? (
{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 className="space-y-4">
<div key={routeTab} className="space-y-2">
{filteredRequestIds.map((requestId) => (
<ExternalContoursListItem
key={requestId}
@@ -102,12 +106,12 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
<div className="flex h-full w-full items-center justify-center">
<ExternalContoursEmptyState
title={t(
currentTab === EInboxIssueCurrentTab.OPEN
routeTab === EInboxIssueCurrentTab.OPEN
? "external_contours_page.empty_state.open_title"
: "external_contours_page.empty_state.closed_title"
)}
description={t(
currentTab === EInboxIssueCurrentTab.OPEN
routeTab === EInboxIssueCurrentTab.OPEN
? "external_contours_page.empty_state.open_description"
: "external_contours_page.empty_state.closed_description"
)}