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

HDESIGN-CODE.md

@@ -43,8 +43,15 @@
 - Все кнопки без жёсткого outline.
 - Primary button:
   - фон: акцентный или `active_card_rgb`
-  - текст: чёрный или очень тёмный, если фон светлый
+  - текст: всегда чёрный или очень тёмный, если фон светлый
   - hover: более светлая версия того же цвета
+  - правило распространяется на все filled CTA:
+    - `Добавить`
+    - `Сохранить`
+    - `Обновить`
+    - `Принять`
+    - `Добавить запрос`
+    - любые акцентные toolbar-кнопки
 - Save/update button:
   - если это зафиксированный green CTA, текст должен быть контрастным и читаемым
   - hover осветляет текущий тон, а не уходит в синий
@@ -93,6 +100,70 @@
   - светлый фон, если основной экран тёмный
 - Search shell внутри popup должен использовать тот же стиль, что и сам popup.
 
+### Reusable классы
+- Accent CTA:
+  - `.nodedc-external-primary-button`
+  - текст внутри всегда `#0b1117`
+- Secondary action:
+  - `.nodedc-external-action-button`
+- Secondary icon action:
+  - `.nodedc-external-icon-button`
+- Readonly property/control surface:
+  - `.nodedc-external-readonly-value`
+  - `.nodedc-modal-field`
+- External property rows:
+  - `.nodedc-external-property-row`
+  - `.nodedc-external-property-label`
+  - `.nodedc-external-property-value`
+  - `.nodedc-external-property-control`
+- Dropdown shell:
+  - `.nodedc-dropdown-surface`
+  - `.nodedc-dropdown-search`
+  - `.nodedc-dropdown-option`
+- External contour card/shell:
+  - `.nodedc-external-card`
+  - `.nodedc-external-section`
+  - `.nodedc-external-content-shell`
+
+### Anchor snippets
+```tsx
+<Button className="nodedc-external-primary-button">...</Button>
+```
+
+```tsx
+<IconButton className="nodedc-external-icon-button" ... />
+```
+
+```tsx
+<div className="nodedc-external-readonly-value">
+  <SomeIcon className="h-3.5 w-3.5 text-tertiary" />
+  <span className="text-12 font-medium text-primary">...</span>
+</div>
+```
+
+```tsx
+<div className="nodedc-external-property-row">
+  <div className="nodedc-external-property-label">
+    <SomeIcon className="h-4 w-4 flex-shrink-0" />
+    <span>Label</span>
+  </div>
+  <div className="nodedc-external-property-value">
+    <SomeValue />
+  </div>
+</div>
+```
+
+```tsx
+<Dropdown
+  button={
+    <div className="nodedc-external-property-control text-[13px] font-medium">
+      <SomeIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+      <span className="text-primary">Value</span>
+    </div>
+  }
+/>
+```
+
 ## Drag and drop
 - Drag overlay использует акцентный контур.
 - Delete dropzone:
@@ -109,3 +180,6 @@
 - Сначала используется существующий shared-класс или shared-component.
 - Если shared-слоя нет, создаётся reusable-класс/компонент и уже через него приводятся все похожие места.
 - Цель: не точечная покраска одного окна, а единый системный канон.
+- Если блок визуально расходится со стилем системы, не добавлять поверх временную wrapper-заплатку. Нужно либо перевести блок на shared-компонент, либо переверстать локальную структуру под shared-классы.
+- Для экранов со вкладками/переключателями нельзя оставлять flash старой верстки. Перед refetch нужно очищать stale store-data и показывать loading shell.
+- Если карточки или списки разных модулей должны быть одинаковыми по канону, нельзя лечить это внешней обёрткой. Нужно менять сам внутренний layout item-компонента.

plane-src/apps/web/ce/components/projects/external-contours/empty-state.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Layers3 } from "lucide-react";
+import { cn } from "@plane/utils";
+
+type Props = {
+  title: string;
+  description?: string;
+  compact?: boolean;
+};
+
+export const ExternalContoursEmptyState = (props: Props) => {
+  const { title, description, compact = false } = props;
+
+  return (
+    <div className={cn("nodedc-external-empty-state", compact ? "max-w-md" : "max-w-sm")}>
+      <div className={cn("nodedc-external-empty-media", compact ? "size-22" : "size-24")}>
+        <Layers3 className={cn(compact ? "size-10" : "size-11")} strokeWidth={1.6} />
+      </div>
+      <div className="space-y-2">
+        <h3 className={cn("font-semibold text-primary", compact ? "text-16" : "text-18")}>{title}</h3>
+        {description && <p className="mx-auto max-w-sm text-13 leading-6 text-secondary">{description}</p>}
+      </div>
+    </div>
+  );
+};

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

@@ -69,7 +69,12 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
               modalState={createIssueModal}
               handleModalClose={() => setCreateIssueModal(false)}
             />
-            <Button variant="primary" size="lg" onClick={() => setCreateIssueModal(true)}>
+            <Button
+              variant="primary"
+              size="lg"
+              onClick={() => setCreateIssueModal(true)}
+              className="nodedc-external-primary-button min-w-[10.75rem]"
+            >
               {t("external_contours_page.header.add_request")}
             </Button>
           </div>

plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx

@@ -8,7 +8,6 @@ import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { PanelLeft } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { Badge } from "@plane/propel/badge";
 import { Button } from "@plane/propel/button";
 import { IconButton } from "@plane/propel/icon-button";
 import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
@@ -150,8 +149,22 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
 
         <div className="flex items-center gap-2">
           <div className="flex items-center gap-x-2">
-            <IconButton variant="secondary" size="lg" icon={ChevronUpIcon} aria-label="Previous request" onClick={() => redirectToRelativeIssue("prev")} />
+            <IconButton
-            <IconButton variant="secondary" size="lg" icon={ChevronDownIcon} aria-label="Next request" onClick={() => redirectToRelativeIssue("next")} />
+              variant="secondary"
+              size="lg"
+              icon={ChevronUpIcon}
+              aria-label="Previous request"
+              onClick={() => redirectToRelativeIssue("prev")}
+              className="nodedc-external-icon-button"
+            />
+            <IconButton
+              variant="secondary"
+              size="lg"
+              icon={ChevronDownIcon}
+              aria-label="Next request"
+              onClick={() => redirectToRelativeIssue("next")}
+              className="nodedc-external-icon-button"
+            />
           </div>
 
           <div className="flex flex-wrap items-center gap-2">
@@ -169,7 +182,9 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
             )}
 
             {isSourceAccepted && (
-              <Badge variant="neutral">{t("external_contours_page.traceability.source_decision_accepted")}</Badge>
+              <div className="nodedc-external-readonly-value min-h-[2.75rem] w-auto px-4 text-13 font-medium">
+                {t("external_contours_page.traceability.source_decision_accepted")}
+              </div>
             )}
 
             <Button
@@ -211,7 +226,9 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
               </>
             )}
             {isSourceAccepted && (
-              <Badge variant="neutral">{t("external_contours_page.traceability.source_decision_accepted")}</Badge>
+              <div className="nodedc-external-readonly-value min-h-10 w-auto px-4 text-13 font-medium">
+                {t("external_contours_page.traceability.source_decision_accepted")}
+              </div>
             )}
             {hasDirectTargetAccess && (
               <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">

plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx

@@ -5,6 +5,8 @@
  */
 
 import { observer } from "mobx-react";
+import { SignalHigh } from "lucide-react";
+import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { LabelPropertyIcon, PriorityPropertyIcon } from "@plane/propel/icons";
 import type { TIssue } from "@plane/types";
@@ -25,17 +27,19 @@ type Props = {
 export const ExternalContoursIssueContentProperties = observer(function ExternalContoursIssueContentProperties(props: Props) {
   const { workspaceSlug, targetProjectId, issue, issueOperations, isEditable } = props;
   const { t } = useTranslation();
+  const selectedLabels = issue.label_details ?? [];
+  const priorityDetails = ISSUE_PRIORITIES.find((priority) => priority.key === issue?.priority);
 
   if (!issue || !issue?.id) return <></>;
 
   return (
-    <div className="nodedc-external-section flex w-full flex-col px-4 py-4">
+    <div className="flex w-full flex-col">
       <div className="w-full overflow-y-auto">
         <h5 className="mb-2 text-body-sm-medium">{t("external_contours_page.properties.section_title")}</h5>
         <div className={`${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
-            <div className="nodedc-external-panel flex min-h-12 items-center gap-3 px-4 py-3">
+            <div className="nodedc-external-property-row">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1.5 text-13 text-tertiary">
+              <div className="nodedc-external-property-label">
                 <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("priority")}</span>
               </div>
@@ -43,24 +47,51 @@ export const ExternalContoursIssueContentProperties = observer(function External
                 value={issue?.priority}
                 onChange={(val) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { priority: val })}
                 disabled={!isEditable}
-                buttonVariant="border-with-text"
+                buttonVariant="transparent-without-text"
-                className="w-3/5 flex-grow rounded-full px-3 hover:bg-white/6"
+                className="flex-1"
-                buttonContainerClassName="w-full text-left"
+                buttonContainerClassName="h-full w-full"
-                buttonClassName="h-auto w-min whitespace-nowrap"
+                button={
+                  <div className="nodedc-external-property-control text-[13px] font-medium">
+                    {issue.priority && issue.priority !== "none" ? (
+                      <PriorityPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+                    ) : (
+                      <SignalHigh className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+                    )}
+                    <span className={issue.priority && issue.priority !== "none" ? "text-primary" : "text-tertiary"}>
+                      {issue.priority && issue.priority !== "none"
+                        ? priorityDetails?.title
+                        : t("external_contours_page.form.priority")}
+                    </span>
+                  </div>
+                }
               />
             </div>
 
-            <div className="nodedc-external-panel flex min-h-12 items-center gap-3 px-4 py-3">
+            <div className="nodedc-external-property-row">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1.5 text-13 text-tertiary">
+              <div className="nodedc-external-property-label">
                 <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("labels")}</span>
               </div>
-              <div className="h-full min-h-8 w-3/5 flex-grow pt-1">
+              <div className="h-full min-h-8 flex-1">
                 <IssueLabelSelect
                   value={issue.label_ids || []}
                   onChange={(labelIds) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { label_ids: labelIds })}
                   projectId={targetProjectId}
                   disabled={!isEditable}
+                  rootClassName="w-full"
+                  buttonContainerClassName="h-full w-full"
+                  label={
+                    <div className="nodedc-external-property-control text-[13px] font-medium">
+                      <LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+                      <span className={selectedLabels.length > 0 ? "truncate text-primary" : "truncate text-tertiary"}>
+                        {selectedLabels.length > 0
+                          ? selectedLabels.length === 1
+                            ? selectedLabels[0]?.name
+                            : `${selectedLabels.length} ${t("labels").toLocaleLowerCase()}`
+                          : t("labels")}
+                      </span>
+                    </div>
+                  }
                 />
               </div>
             </div>

plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx

@@ -8,7 +8,9 @@ import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 import type { EditorRefApi } from "@plane/editor";
+import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { LabelPropertyIcon, PriorityIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TExternalContourRequest, TIssue, TNameDescriptionLoader } from "@plane/types";
 import { EFileAssetType } from "@plane/types";
@@ -80,6 +82,7 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
   const mirroredAttachments = contourRequest.mirrored_attachments ?? [];
   const mirroredComments = contourRequest.mirrored_comments ?? [];
   const targetProjectId = issue.project_id || sourceProjectId;
+  const priorityDetails = ISSUE_PRIORITIES.find((priority) => priority.key === issue.priority);
 
   const { duplicateIssues } = useDebouncedDuplicateIssues(
     workspaceSlug,
@@ -194,24 +197,38 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
         <div className="nodedc-external-section flex flex-col gap-3 px-4 py-4">
           <div className="text-body-sm-medium">{t("external_contours_page.properties.section_title")}</div>
           <div className="flex flex-col gap-3 text-13 text-secondary">
-            <div className="nodedc-external-panel flex flex-wrap items-center gap-2 px-4 py-3">
+            <div className="nodedc-external-property-row">
-              <span className="text-tertiary">{t("priority")}</span>
+              <div className="nodedc-external-property-label">
-              <span className="rounded-full bg-white/6 px-3 py-1.5 text-12 font-medium text-primary">
+                <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
-                {issue.priority || t("none")}
+                <span>{t("priority")}</span>
-              </span>
+              </div>
+              <div className="nodedc-external-property-value flex-1 text-[13px] font-medium">
+                <PriorityIcon priority={issue.priority ?? "none"} className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+                <span className="text-12 font-medium text-primary">
+                  {issue.priority && issue.priority !== "none"
+                    ? priorityDetails?.title ?? t(issue.priority)
+                    : t("external_contours_page.form.priority")}
+                </span>
+              </div>
             </div>
 
-            <div className="nodedc-external-panel flex flex-wrap items-center gap-2 px-4 py-3">
+            <div className="nodedc-external-property-row">
-              <span className="text-tertiary">{t("labels")}</span>
+              <div className="nodedc-external-property-label">
+                <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
+                <span>{t("labels")}</span>
+              </div>
               {issue.label_details?.length ? (
-                issue.label_details.map((label) => (
+                <div className="nodedc-external-property-value flex-1 flex-wrap text-[13px] font-medium">
-                  <div key={label.id} className="flex items-center gap-1 rounded-full bg-white/6 px-3 py-1.5 text-11">
+                  <LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
-                    <span className="h-2 w-2 rounded-full" style={{ backgroundColor: label.color }} />
+                  <span className="text-12 font-medium text-primary">
-                    <span>{label.name}</span>
+                    {issue.label_details.map((label) => label.name).join(", ")}
-                  </div>
+                  </span>
-                ))
+                </div>
               ) : (
-                <span>{t("common.none")}</span>
+                <div className="nodedc-external-property-value flex-1 text-[13px] font-medium">
+                  <LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+                  <span className="text-12 font-medium text-tertiary">{t("labels")}</span>
+                </div>
               )}
             </div>
           </div>

plane-src/apps/web/ce/components/projects/external-contours/list-item.tsx

@@ -11,7 +11,7 @@ import { useSearchParams } from "next/navigation";
 import { useTranslation } from "@plane/i18n";
 import { PriorityIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
-import { Avatar, Row } from "@plane/ui";
+import { Avatar } from "@plane/ui";
 import { cn, renderFormattedDate } from "@plane/utils";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
@@ -55,10 +55,10 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
       href={`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${request.id}`}
       onClick={(e) => handleIssueRedirection(e, request.id)}
     >
-      <Row
+      <div
         data-active={selectedInboxIssueId === request.id}
         className={cn(
-          "nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-5 px-5 py-5 transition-all hover:bg-white/5",
+          "nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-6 px-6 py-5 transition-all hover:bg-white/5",
           { "ring-1 ring-accent-primary/35": selectedInboxIssueId === request.id }
         )}
       >
@@ -90,8 +90,8 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
           </div>
         </div>
 
-        <div className="flex flex-1 items-center justify-center px-2">
+        <div className="flex flex-1 items-center justify-center px-3">
-          <h3 className="line-clamp-3 w-full max-w-[18rem] text-center text-16 leading-7 font-semibold text-primary">
+          <h3 className="line-clamp-3 w-full max-w-[18.5rem] text-center text-16 leading-7 font-semibold text-primary">
             {issue.name}
           </h3>
         </div>
@@ -127,12 +127,14 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
 
             {issue.priority && issue.priority !== "none" && (
               <Tooltip tooltipHeading={t("priority")} tooltipContent={`${issue.priority ?? t("none")}`}>
-                <PriorityIcon priority={issue.priority} withContainer className="h-3 w-3" />
+                <div className="flex size-8 items-center justify-center rounded-full bg-white/6 text-secondary">
+                  <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
+                </div>
               </Tooltip>
             )}
           </div>
         </div>
-      </Row>
+      </div>
     </Link>
   );
 });

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

@@ -8,14 +8,13 @@ import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { PanelLeft } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { TransferIcon } from "@plane/propel/icons";
 import type { TInboxIssueCurrentTab } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
 import { cn } from "@plane/utils";
-import { InboxLayoutLoader } from "@/components/ui/loader/layouts/project-inbox/inbox-layout-loader";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { ExternalContoursContentRoot } from "./content-root";
+import { ExternalContoursEmptyState } from "./empty-state";
 import { ExternalContoursSidebar } from "./sidebar";
 
 type TExternalContoursRoot = {
@@ -46,14 +45,6 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [workspaceSlug, projectId, navigationTab]);
 
-  if (loader === "init-loading") {
-    return (
-      <div className="relative flex h-full w-full flex-col">
-        <InboxLayoutLoader />
-      </div>
-    );
-  }
-
   if (error && error?.status === "init-error") {
     return (
       <div className="relative flex h-full w-full flex-col items-center justify-center gap-3">
@@ -99,10 +90,10 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
         ) : (
           <div className="flex h-full w-full items-center justify-center px-8">
             <div className="nodedc-external-section max-w-xl px-8 py-10">
-              <EmptyStateCompact
+              <ExternalContoursEmptyState
-                assetKey="intake"
+                compact
                 title={t("external_contours_page.empty_state.detail_title")}
-                assetClassName="size-20"
+                description={t("external_contours_page.empty_state.detail_description")}
               />
             </div>
           </div>

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

@@ -7,12 +7,12 @@
 import { useEffect } 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";
 import { cn } from "@plane/utils";
 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 = {
@@ -31,7 +31,8 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
   const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
   const router = useAppRouter();
   const { t } = useTranslation();
-  const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds } = useProjectExternalContours();
+  const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader } =
+    useProjectExternalContours();
 
   useEffect(() => {
     if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
@@ -79,8 +80,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">
-          {filteredRequestIds.length > 0 ? (
+          {loader === "init-loading" ? (
-            <div className="space-y-3">
+            <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">
               {filteredRequestIds.map((requestId) => (
                 <ExternalContoursListItem
                   key={requestId}
@@ -93,23 +100,18 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
             </div>
           ) : (
             <div className="flex h-full w-full items-center justify-center">
-              {currentTab === EInboxIssueCurrentTab.OPEN ? (
+              <ExternalContoursEmptyState
-                <EmptyStateDetailed
+                title={t(
-                  assetKey="inbox"
+                  currentTab === EInboxIssueCurrentTab.OPEN
-                  title={t("external_contours_page.empty_state.open_title")}
+                    ? "external_contours_page.empty_state.open_title"
-                  description={t("external_contours_page.empty_state.open_description")}
+                    : "external_contours_page.empty_state.closed_title"
-                  assetClassName="size-20"
+                )}
-                  rootClassName="px-page-x"
+                description={t(
-                />
+                  currentTab === EInboxIssueCurrentTab.OPEN
-              ) : (
+                    ? "external_contours_page.empty_state.open_description"
-                <EmptyStateDetailed
+                    : "external_contours_page.empty_state.closed_description"
-                  assetKey="inbox"
+                )}
-                  title={t("external_contours_page.empty_state.closed_title")}
+              />
-                  description={t("external_contours_page.empty_state.closed_description")}
-                  assetClassName="size-20"
-                  className="px-10"
-                />
-              )}
             </div>
           )}
         </div>

plane-src/apps/web/core/components/issues/select/base.tsx

@@ -26,6 +26,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 export type TWorkItemLabelSelectBaseProps = {
   buttonClassName?: string;
   buttonContainerClassName?: string;
+  rootClassName?: string;
   createLabelEnabled?: boolean;
   disabled?: boolean;
   getLabelById: (labelId: string) => IIssueLabel | null;
@@ -43,6 +44,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
   const {
     buttonClassName,
     buttonContainerClassName,
+    rootClassName,
     createLabelEnabled = false,
     disabled = false,
     getLabelById,
@@ -157,7 +159,9 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
       tabIndex={tabIndex}
       value={value}
       onChange={dropdownOnChange}
-      className="relative h-full flex-shrink-0"
+      className={cn("relative h-full flex-shrink-0", rootClassName, {
+        "w-full": rootClassName?.includes("w-full") || buttonContainerClassName?.includes("w-full"),
+      })}
       multiple
       disabled={disabled}
       onKeyDown={handleKeyDown}
@@ -181,7 +185,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
         ) : (
           <div
             className={cn(
-              "flex h-full items-center justify-center gap-1 rounded-sm border-[0.5px] border-strong px-2 py-1 text-11 hover:bg-layer-1",
+              "nodedc-modal-field flex h-full items-center justify-center gap-1 px-3 py-1.5 text-11",
               buttonClassName
             )}
           >
@@ -192,26 +196,26 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
       </button>
 
       {isDropdownOpen && (
-        <Combobox.Options className="fixed z-10" static>
+        <Combobox.Options className="fixed z-[120]" static>
           <div
-            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            className="nodedc-dropdown-surface my-1 w-64 min-w-[16rem]"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+            <div className="nodedc-dropdown-search">
               <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
               <Combobox.Input
                 as="input"
                 ref={inputRef}
-                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                className="w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder={t("search")}
                 displayValue={(assigned: any) => assigned?.name}
                 onKeyDown={searchInputKeyDown}
               />
             </div>
-            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+            <div className="mt-2 max-h-56 space-y-1 overflow-y-auto">
               {labelsList && filteredOptions ? (
                 filteredOptions.length > 0 ? (
                   filteredOptions.map((label) => {
@@ -223,14 +227,16 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                           <Combobox.Option
                             key={label.id}
                             className={({ active }) =>
-                              `${
+                              cn(
-                                active ? "bg-layer-1" : ""
+                                "nodedc-dropdown-option cursor-pointer",
-                              } group flex w-full cursor-pointer items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`
+                                active ? "bg-white/6" : "",
+                                "text-secondary"
+                              )
                             }
                             value={label.id}
                           >
                             {({ selected }) => (
-                              <div className="flex w-full justify-between gap-2 rounded-sm">
+                              <div className="flex w-full justify-between gap-2 rounded-[0.9rem]">
                                 <div className="flex items-center justify-start gap-2 truncate">
                                   <span
                                     className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
@@ -240,7 +246,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                                   />
                                   <span className="truncate">{label.name}</span>
                                 </div>
-                                <div className="flex shrink-0 items-center justify-center rounded-sm p-1">
+                                <div className="flex shrink-0 items-center justify-center rounded-[0.9rem] p-1">
                                   <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                 </div>
                               </div>
@@ -249,7 +255,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                         );
                     } else
                       return (
-                        <div key={label.id} className="border-y border-subtle">
+                        <div key={label.id} className="overflow-hidden rounded-[1rem] bg-white/[0.02]">
                           <div className="flex items-center gap-2 truncate p-2 text-primary select-none">
                             <Component className="h-3 w-3" /> {label.name}
                           </div>
@@ -258,14 +264,16 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                               <Combobox.Option
                                 key={child.id}
                                 className={({ active }) =>
-                                  `${
+                                  cn(
-                                    active ? "bg-layer-1" : ""
+                                    "nodedc-dropdown-option min-w-[14rem] cursor-pointer",
-                                  } group flex min-w-[14rem] cursor-pointer items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`
+                                    active ? "bg-white/6" : "",
+                                    "text-secondary"
+                                  )
                                 }
                                 value={child.id}
                               >
                                 {({ selected }) => (
-                                  <div className="flex w-full justify-between gap-2 rounded-sm">
+                                  <div className="flex w-full justify-between gap-2 rounded-[0.9rem]">
                                     <div className="flex items-center justify-start gap-2">
                                       <span
                                         className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
@@ -275,7 +283,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                                       />
                                       <span>{child.name}</span>
                                     </div>
-                                    <div className="flex items-center justify-center rounded-sm p-1">
+                                    <div className="flex items-center justify-center rounded-[0.9rem] p-1">
                                       <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                     </div>
                                   </div>
@@ -294,12 +302,11 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
                       if (!query.length) return;
                       handleAddLabel(query);
                     }}
-                    className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
+                    className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
                   >
-                    {/* TODO: translate here */}
                     {query.length ? (
                       <>
-                        + Add <span className="text-primary">&quot;{query}&quot;</span> to labels
+                        + {t("label.create.type")} <span className="text-primary">&quot;{query}&quot;</span>
                       </>
                     ) : (
                       t("label.create.type")

plane-src/apps/web/core/store/external-contours/project-external-contours.store.ts

@@ -178,6 +178,10 @@ export class ProjectExternalContoursStore implements IProjectExternalContoursSto
   };
 
   handleCurrentTab = async (workspaceSlug: string, projectId: string, tab: TInboxIssueCurrentTab) => {
+    this.requestIds = [];
+    this.requests = {};
+    this.error = undefined;
+    this.loader = "init-loading";
     this.currentTab = tab;
     await this.fetchRequests(workspaceSlug, projectId, tab);
   };

plane-src/apps/web/styles/globals.css

@@ -1108,6 +1108,25 @@
     background: rgba(255, 255, 255, 0.1) !important;
   }
 
+  .nodedc-external-icon-button {
+    display: grid !important;
+    place-items: center !important;
+    width: 2.5rem !important;
+    min-width: 2.5rem !important;
+    height: 2.5rem !important;
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border-radius: 999px !important;
+    background: rgba(255, 255, 255, 0.06) !important;
+    color: var(--text-color-primary) !important;
+    padding: 0 !important;
+  }
+
+  .nodedc-external-icon-button:hover {
+    background: rgba(255, 255, 255, 0.1) !important;
+  }
+
   .nodedc-external-primary-button {
     min-height: 2.75rem;
     border: 0 !important;
@@ -1116,11 +1135,119 @@
     border-radius: 1.25rem !important;
     background: rgb(var(--nodedc-card-active-rgb)) !important;
     color: #0b1117 !important;
-    padding-inline: 1.2rem !important;
+    padding-inline: 1.45rem !important;
+    font-weight: 600 !important;
   }
 
   .nodedc-external-primary-button:hover {
     background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 82%, white) !important;
     color: #0b1117 !important;
   }
+
+  .nodedc-external-empty-state {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  .nodedc-external-empty-media {
+    display: grid;
+    place-items: center;
+    width: 6.25rem;
+    height: 6.25rem;
+    border-radius: 1.85rem;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.014) 100%),
+      rgba(255, 255, 255, 0.028);
+    box-shadow:
+      0 16px 40px rgba(0, 0, 0, 0.14),
+      inset 0 1px 0 rgba(255, 255, 255, 0.018);
+  }
+
+  .nodedc-external-empty-media svg {
+    color: rgba(255, 255, 255, 0.22);
+  }
+
+  .nodedc-external-readonly-value {
+    display: flex;
+    min-height: 2.5rem;
+    width: 100%;
+    align-items: center;
+    gap: 0.6rem;
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border-radius: 1.25rem !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
+      rgba(255, 255, 255, 0.028) !important;
+    color: var(--text-color-primary) !important;
+    padding: 0.65rem 0.95rem !important;
+  }
+
+  .nodedc-external-property-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
+    border-radius: 1.6rem !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
+      rgba(255, 255, 255, 0.028) !important;
+    -webkit-backdrop-filter: blur(22px);
+    backdrop-filter: blur(22px);
+    padding: 0.9rem 1rem !important;
+  }
+
+  .nodedc-external-property-label {
+    display: flex;
+    width: 40%;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.8125rem !important;
+    color: var(--text-color-tertiary) !important;
+  }
+
+  .nodedc-external-property-value {
+    display: flex;
+    min-height: 2.5rem;
+    width: 100%;
+    align-items: center;
+    gap: 0.6rem;
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border-radius: 999px !important;
+    background: transparent !important;
+    color: var(--text-color-primary) !important;
+    padding: 0.1rem 0.1rem !important;
+  }
+
+  .nodedc-external-property-control {
+    display: flex;
+    min-height: 2.5rem;
+    width: 100%;
+    align-items: center;
+    gap: 0.6rem;
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border-radius: 999px !important;
+    background: transparent !important;
+    color: var(--text-color-primary) !important;
+    padding: 0.1rem 0.1rem !important;
+    transition: background 160ms ease;
+  }
+
+  .nodedc-external-property-control:hover,
+  .nodedc-external-property-control:focus-within {
+    background: rgba(255, 255, 255, 0.04) !important;
+  }
 }

plane-src/packages/i18n/src/locales/en/translations.ts

@@ -306,6 +306,7 @@ export default {
       description:
         "This screen will host the cross-project request form, the sent requests list, and status pills for each routed task.",
       detail_title: "Select a request to view its details.",
+      detail_description: "Choose a request from the left to open its details, properties, and routing context.",
       open_title: "No open requests",
       open_description: "Sent and active cross-contour requests will appear here.",
       closed_title: "No closed requests",

plane-src/packages/i18n/src/locales/ru/translations.ts

@@ -463,6 +463,7 @@ export default {
       description:
         "Здесь появятся форма отправки задачи в другой проект, список отправленных запросов и их статусные маркеры.",
       detail_title: "Выберите запрос для просмотра деталей.",
+      detail_description: "Выберите запрос слева, чтобы открыть детали, свойства и маршрут межконтурной работы.",
       open_title: "Нет открытых запросов",
       open_description: "Здесь будут отображаться отправленные и активные межконтурные запросы.",
       closed_title: "Нет закрытых запросов",