UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: полировка внешних контуров и дизайн-кода

This commit is contained in:
DCCONSTRUCTIONS
2026-04-20 14:37:14 +03:00
parent 9553c81752
commit 1cf05aad72
6 changed files with 194 additions and 94 deletions
@@ -47,6 +47,7 @@ export const ExternalContoursIssueContentProperties = observer(function External
value={issue?.priority}
onChange={(val) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { priority: val })}
disabled={!isEditable}
placement="top-start"
buttonVariant="transparent-without-text"
className="flex-1 overflow-visible"
buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
@@ -78,6 +79,7 @@ export const ExternalContoursIssueContentProperties = observer(function External
onChange={(labelIds) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { label_ids: labelIds })}
projectId={targetProjectId}
disabled={!isEditable}
placement="top-start"
rootClassName="w-full overflow-visible"
buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
label={
@@ -132,7 +132,7 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
{issue.priority && issue.priority !== "none" && (
<Tooltip tooltipHeading={t("priority")} tooltipContent={`${issue.priority ?? t("none")}`}>
<div className="nodedc-external-priority-inline flex size-8 items-center justify-center rounded-full">
<div className="nodedc-external-priority-inline flex items-center justify-center">
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
</div>
</Tooltip>
@@ -4,7 +4,7 @@
* See the LICENSE file for details.
*/
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import type { TInboxIssueCurrentTab } from "@plane/types";
@@ -35,16 +35,24 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
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 isTabTransitioning = loader === "init-loading" || routeTab !== 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=${routeTab}&inboxIssueId=${filteredRequestIds[0]}`
`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${resolvedTab}&inboxIssueId=${filteredRequestIds[0]}`
);
}
}, [filteredRequestIds, inboxIssueId, projectId, routeTab, router, workspaceSlug]);
}, [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">
@@ -57,12 +65,13 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
<button
type="button"
key={option.key}
data-active={routeTab === 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 (routeTab !== option.key) {
if (resolvedTab !== option.key) {
setPendingTab(option.key);
void handleCurrentTab(workspaceSlug, projectId, option.key);
router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
}
@@ -72,7 +81,7 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
<div
className={cn(
"rounded-full px-1.5 py-0.5 text-11 font-semibold",
routeTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
resolvedTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
)}
>
{count}
@@ -91,7 +100,7 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
</div>
</div>
) : filteredRequestIds.length > 0 ? (
<div key={routeTab} className="space-y-2">
<div key={resolvedTab} className="space-y-3">
{filteredRequestIds.map((requestId) => (
<ExternalContoursListItem
key={requestId}
@@ -106,12 +115,12 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
<div className="flex h-full w-full items-center justify-center">
<ExternalContoursEmptyState
title={t(
routeTab === EInboxIssueCurrentTab.OPEN
resolvedTab === EInboxIssueCurrentTab.OPEN
? "external_contours_page.empty_state.open_title"
: "external_contours_page.empty_state.closed_title"
)}
description={t(
routeTab === EInboxIssueCurrentTab.OPEN
resolvedTab === EInboxIssueCurrentTab.OPEN
? "external_contours_page.empty_state.open_description"
: "external_contours_page.empty_state.closed_description"
)}