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

HDESIGN-CODE.md

@@ -52,6 +52,7 @@
     - `Принять`
     - `Добавить запрос`
     - любые акцентные toolbar-кнопки
+  - это правило обязательно и для `Внешних контуров`: `Добавить запрос` не может иметь светлый текст на светлом фоне
 - Save/update button:
   - если это зафиксированный green CTA, текст должен быть контрастным и читаемым
   - hover осветляет текущий тон, а не уходит в синий
@@ -91,6 +92,9 @@
   - assignee bubbles
   - дата
   должны быть симметричны верхней
+- Для списков карточек `Внешних контуров` используется тот же вертикальный ритм, что и у `Внутреннего контура`:
+  - контейнер списка не плотнее `space-y-3`
+  - нельзя лепить карточки вплотную друг к другу
 
 ## Dropdown и popup
 - Все dropdown/popup приводятся к единому matte glass канону.
@@ -118,6 +122,9 @@
   - клиппинг
   - налезание на соседние блоки
   - старую “врезанную” верстку
+- Для `Свойств` в `Внешних контурах` dropdown по умолчанию открывается вверх:
+  - `placement="top-start"`
+  - причина: блок находится близко к `Активности`, popup не должен падать вниз в соседнюю секцию
 
 ### Portal anchor snippet
 ```tsx
@@ -222,12 +229,17 @@
 - Для `Внешних контуров` это значит:
   - список карточек правится на уровне `list-item.tsx`, а не через внешний wrapper
   - gap между карточками должен совпадать с каноном `Внутреннего контура`
-  - актуальный gap списка на текущем каноне: `space-y-2`
+  - актуальный gap списка на текущем каноне: `space-y-3`
+  - при tab switch между `Открытые / Закрытые` нельзя полагаться только на route param; нужен локальный `pendingTab`, чтобы stale layout не мелькал до завершения refetch
   - toolbar-навигация и inline actions не должны использовать старые квадратные `IconButton` остатки
   - свойства `Приоритет / Метки / Статус` не должны рисовать внутренние boxed-chip артефакты
+  - popup `Приоритет / Метки` не может визуально жить внутри property-row; если он открывается из blur-shell, он обязан уходить в portal и рендериться над секцией
   - filled CTA вроде `Добавить запрос` используют `nodedc-external-primary-button` и всегда имеют тёмный текст
   - filled CTA используют чёрный/почти-чёрный текст всегда; белый текст на светлом акценте запрещён
   - secondary meta-иконки в карточке списка не должны иметь отдельную серую подложку, если по канону это простой inline icon
+  - empty-state не должен использовать декоративную серую подложку под SVG; media-box прозрачный, SVG выравнивается через `display:flex` и центрирование
+  - detail-toolbar в карточке запроса использует общий glass-cluster для листания `prev/next`, а сами кнопки внутри кластера — круглые, без квадратной подложки
+  - `Добавить запрос` в header `Внешних контуров` — это filled accent CTA с тёмным текстом, каноничным радиусом и hover в более светлый тон того же акцента
 - popup выбора `Приоритет / Метки` внутри detail view не рендерится inline в property-row; он обязан уходить в `portal`
 - секции с dropdown-trigger внутри blur/glass shell обязаны иметь `overflow: visible` и `isolation: isolate`, иначе popup визуально “тонет” внутри блока
 - при переключении `Открытые / Закрытые` store обязан очистить stale request list до нового fetch, чтобы пользователь не видел flash старой верстки
@@ -244,13 +256,42 @@
 
 - List spacing:
 ```tsx
-<div key={routeTab} className="space-y-2">
+<div key={resolvedTab} className="space-y-3">
   {filteredRequestIds.map((requestId) => (
     <ExternalContoursListItem key={requestId} ... />
   ))}
 </div>
 ```
 
+- Pending tab anti-flash:
+```tsx
+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;
+```
+
+- Property popup anchor:
+```tsx
+<PriorityDropdown
+  placement="top-start"
+  buttonContainerClassName="nodedc-external-property-control-shell ..."
+  button={
+    <div className="nodedc-external-property-control text-[13px] font-medium">
+      ...
+    </div>
+  }
+/>
+```
+
+- Detail toolbar cluster:
+```tsx
+<div className="nodedc-external-toolbar-cluster">
+  <button type="button" className="nodedc-external-icon-button">...</button>
+  <button type="button" className="nodedc-external-icon-button">...</button>
+</div>
+```
+
 - Property control:
 ```tsx
 <div className="nodedc-external-property-control text-[13px] font-medium">
@@ -261,8 +302,15 @@
 
 - Root tab switch without stale flash:
 ```tsx
-void handleCurrentTab(workspaceSlug, projectId, nextTab);
+const [pendingTab, setPendingTab] = useState<TInboxIssueCurrentTab | null>(null);
-router.push(`...currentTab=${nextTab}`);
+const resolvedTab = pendingTab ?? routeTab;
+const isTabTransitioning = loader === "init-loading" || pendingTab !== null || routeTab !== currentTab;
+
+if (resolvedTab !== nextTab) {
+  setPendingTab(nextTab);
+  void handleCurrentTab(workspaceSlug, projectId, nextTab);
+  router.push(`...currentTab=${nextTab}`);
+}
 ```
 
 - Store-side tab reset:
@@ -281,6 +329,20 @@ const { styles, attributes } = usePopper(referenceElement, popperElement, {
 });
 ```
 
+- Property popup without boxed artifact:
+```tsx
+<IssueLabelSelect
+  rootClassName="w-full overflow-visible"
+  buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible"
+  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="truncate text-primary">...</span>
+    </div>
+  }
+/>
+```
+
 - Контейнер секции с trigger:
 ```tsx
 <div className="nodedc-external-section overflow-visible px-4 py-4">

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

@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Inbox } from "lucide-react";
+import { ViewVerticalStackIllustration, WorkItemVerticalStackIllustration } from "@plane/propel/empty-state";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -15,15 +15,25 @@ type Props = {
 
 export const ExternalContoursEmptyState = (props: Props) => {
   const { title, description, compact = false } = props;
+  const Illustration = compact ? WorkItemVerticalStackIllustration : ViewVerticalStackIllustration;
 
   return (
-    <div className={cn("nodedc-external-empty-state", compact ? "max-w-md" : "max-w-sm")}>
+    <div
-      <div className={cn("nodedc-external-empty-media", compact ? "size-22" : "size-24")}>
+      className={cn(
-        <Inbox className={cn("block shrink-0", compact ? "size-9" : "size-10")} strokeWidth={1.6} />
+        "nodedc-external-empty-state",
+        compact ? "max-w-[24rem]" : "max-w-sm"
+      )}
+    >
+      <div className={cn("nodedc-external-empty-media", compact ? "h-[7rem] w-[7rem]" : "h-[6rem] w-[6rem]")}>
+        <Illustration className={cn("block shrink-0", compact ? "h-[6.4rem] w-auto" : "h-[5.5rem] w-auto")} />
       </div>
-      <div className="space-y-2">
+      <div className={cn("space-y-2", compact ? "max-w-[24rem]" : "max-w-sm")}>
-        <h3 className={cn("font-semibold text-primary", compact ? "text-16" : "text-18")}>{title}</h3>
+        <h3 className={cn("font-semibold text-primary", compact ? "text-18" : "text-18")}>{title}</h3>
-        {description && <p className="mx-auto max-w-sm text-13 leading-6 text-secondary">{description}</p>}
+        {description && (
+          <p className={cn("mx-auto text-13 leading-6 text-secondary", compact ? "max-w-[24rem]" : "max-w-sm")}>
+            {description}
+          </p>
+        )}
       </div>
     </div>
   );

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

@@ -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={

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

@@ -10,7 +10,7 @@ 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 { LabelPropertyIcon, PriorityIcon, PriorityPropertyIcon } 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";

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

@@ -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>

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

@@ -99,8 +99,9 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
             inboxIssueId={inboxIssueId.toString()}
           />
         ) : (
-          <div className="flex h-full w-full items-center justify-center px-8">
+          <div className="flex h-full w-full flex-col overflow-hidden px-8">
-            <div className="nodedc-external-section max-w-xl px-8 py-10">
+            <div className="hidden h-20 shrink-0 lg:block" />
+            <div className="flex min-h-0 flex-1 items-center justify-center">
               <ExternalContoursEmptyState
                 compact
                 title={t("external_contours_page.empty_state.detail_title")}

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

@@ -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"
                 )}

plane-src/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx

@@ -5,6 +5,7 @@
  */
 
 import { Fragment, useState } from "react";
+import { createPortal } from "react-dom";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
 import { Loader } from "lucide-react";
@@ -78,6 +79,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    strategy: "fixed",
     placement: "bottom-start",
     modifiers: [
       {
@@ -129,16 +131,18 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
           <button
             ref={setReferenceElement}
             type="button"
-            className="flex h-7.5 items-center rounded-sm border-0 bg-transparent py-0.5 pl-0 pr-2 text-body-xs-medium text-placeholder whitespace-nowrap outline-none hover:bg-layer-transparent-hover active:bg-layer-transparent-active"
+            className="flex h-7.5 items-center rounded-[1rem] border-0 bg-transparent py-0.5 pl-0 pr-2 text-body-xs-medium text-placeholder whitespace-nowrap shadow-none outline-none"
             onClick={() => !projectLabels && fetchLabels()}
           >
             {label}
           </button>
         </Combobox.Button>
 
-        <Combobox.Options className="fixed z-10">
+        {typeof document !== "undefined" &&
+          createPortal(
+            <Combobox.Options className="fixed z-[760]" static>
               <div
-            className={`nodedc-dropdown-surface z-10 my-1 w-52 whitespace-nowrap`}
+                className="nodedc-dropdown-surface nodedc-external-popup-anchor z-10 my-1 w-56 whitespace-nowrap"
                 ref={setPopperElement}
                 style={styles.popper}
                 {...attributes.popper}
@@ -159,7 +163,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                 </div>
                 <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-56 space-y-1 overflow-y-auto`}>
                   {isLoading ? (
-                <p className="text-center text-secondary">{t("common.loading")}</p>
+                    <p className="px-2 py-2 text-center text-secondary">{t("common.loading")}</p>
                   ) : filteredOptions.length > 0 ? (
                     filteredOptions.map((option) => (
                       <Combobox.Option
@@ -184,7 +188,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                       </Combobox.Option>
                     ))
                   ) : submitting ? (
-                <Loader className="spin h-3.5 w-3.5" />
+                    <Loader className="spin mx-auto h-3.5 w-3.5" />
                   ) : canCreateLabel ? (
                     <Combobox.Option
                       value={query}
@@ -198,8 +202,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                     >
                       {query.length ? (
                         <>
-                      {/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to
+                          + {t("label.create.type")} <span className="text-primary">&quot;{query}&quot;</span>
-                      labels
                         </>
                       ) : (
                         t("label.create.type")
@@ -212,7 +215,9 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
                   )}
                 </div>
               </div>
-        </Combobox.Options>
+            </Combobox.Options>,
+            document.body
+          )}
       </Combobox>
     </>
   );

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

@@ -1162,15 +1162,17 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 1rem;
+    gap: 1.1rem;
     text-align: center;
   }
 
   .nodedc-external-empty-media {
-    display: grid;
+    display: flex;
-    place-items: center;
+    align-items: center;
+    justify-content: center;
     width: 6.25rem;
     height: 6.25rem;
+    margin-inline: auto;
     border-radius: 0;
     background: transparent !important;
     box-shadow: none !important;
@@ -1244,6 +1246,8 @@
     gap: 0.6rem;
     position: relative;
     z-index: 1;
+    overflow: visible !important;
+    isolation: isolate;
     border: 0 !important;
     outline: none !important;
     box-shadow: none !important;
@@ -1262,6 +1266,8 @@
     gap: 0.6rem;
     position: relative;
     z-index: 1;
+    overflow: visible !important;
+    isolation: isolate;
     border: 0 !important;
     outline: none !important;
     box-shadow: none !important;
@@ -1280,6 +1286,16 @@
     padding: 0 !important;
   }
 
+  .nodedc-external-property-value > button,
+  .nodedc-external-property-value > button *,
+  .nodedc-external-property-control-shell,
+  .nodedc-external-property-control-shell * {
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+  }
+
   .nodedc-external-property-control-shell:hover,
   .nodedc-external-property-control-shell:focus,
   .nodedc-external-property-control-shell:focus-visible,
@@ -1310,15 +1326,21 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0;
+    padding: 0.25rem !important;
     border-radius: 999px;
-    background: transparent !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
   }
 
   .nodedc-external-priority-inline {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 0.375rem;
+    width: auto !important;
+    min-width: 0 !important;
+    height: auto !important;
+    padding: 0 !important;
     color: var(--text-color-secondary) !important;
     background: transparent !important;
     box-shadow: none !important;