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

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);
-router.push(`...currentTab=${nextTab}`);
+const [pendingTab, setPendingTab] = useState<TInboxIssueCurrentTab | null>(null);
+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/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/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/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,90 +131,93 @@ 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">
-          <div
-            className={`nodedc-dropdown-surface z-10 my-1 w-52 whitespace-nowrap`}
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div>
-              <div className="nodedc-dropdown-search">
-                <SearchIcon className="h-3.5 w-3.5 text-tertiary" />
-                <Combobox.Input
-                  className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  placeholder={t("common.search.label")}
-                  displayValue={(assigned: any) => assigned?.name}
-                  onKeyDown={searchInputKeyDown}
-                  tabIndex={baseTabIndex}
-                />
-              </div>
-            </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>
-              ) : filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
-                  <Combobox.Option
-                    key={option.value}
-                    value={option.value}
-                    className={({ selected }) =>
-                      `nodedc-dropdown-option cursor-pointer ${
-                        selected ? "text-primary" : "text-secondary"
-                      }`
-                    }
-                  >
-                    {({ selected }) => (
-                      <>
-                        {option.content}
-                        {selected && (
-                          <div className="flex-shrink-0">
-                            <CheckIcon className={`h-3.5 w-3.5`} />
-                          </div>
+        {typeof document !== "undefined" &&
+          createPortal(
+            <Combobox.Options className="fixed z-[760]" static>
+              <div
+                className="nodedc-dropdown-surface nodedc-external-popup-anchor z-10 my-1 w-56 whitespace-nowrap"
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div>
+                  <div className="nodedc-dropdown-search">
+                    <SearchIcon className="h-3.5 w-3.5 text-tertiary" />
+                    <Combobox.Input
+                      className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
+                      value={query}
+                      onChange={(e) => setQuery(e.target.value)}
+                      placeholder={t("common.search.label")}
+                      displayValue={(assigned: any) => assigned?.name}
+                      onKeyDown={searchInputKeyDown}
+                      tabIndex={baseTabIndex}
+                    />
+                  </div>
+                </div>
+                <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-56 space-y-1 overflow-y-auto`}>
+                  {isLoading ? (
+                    <p className="px-2 py-2 text-center text-secondary">{t("common.loading")}</p>
+                  ) : filteredOptions.length > 0 ? (
+                    filteredOptions.map((option) => (
+                      <Combobox.Option
+                        key={option.value}
+                        value={option.value}
+                        className={({ selected }) =>
+                          `nodedc-dropdown-option cursor-pointer ${
+                            selected ? "text-primary" : "text-secondary"
+                          }`
+                        }
+                      >
+                        {({ selected }) => (
+                          <>
+                            {option.content}
+                            {selected && (
+                              <div className="flex-shrink-0">
+                                <CheckIcon className={`h-3.5 w-3.5`} />
+                              </div>
+                            )}
+                          </>
                         )}
-                      </>
-                    )}
-                  </Combobox.Option>
-                ))
-              ) : submitting ? (
-                <Loader className="spin h-3.5 w-3.5" />
-              ) : canCreateLabel ? (
-                <Combobox.Option
-                  value={query}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (!query.length) return;
-                    handleAddLabel(query);
-                  }}
-                  className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
-                >
-                  {query.length ? (
-                    <>
-                      {/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to
-                      labels
-                    </>
+                      </Combobox.Option>
+                    ))
+                  ) : submitting ? (
+                    <Loader className="spin mx-auto h-3.5 w-3.5" />
+                  ) : canCreateLabel ? (
+                    <Combobox.Option
+                      value={query}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (!query.length) return;
+                        handleAddLabel(query);
+                      }}
+                      className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
+                    >
+                      {query.length ? (
+                        <>
+                          + {t("label.create.type")} <span className="text-primary">&quot;{query}&quot;</span>
+                        </>
+                      ) : (
+                        t("label.create.type")
+                      )}
+                    </Combobox.Option>
                   ) : (
-                    t("label.create.type")
+                    <p className="rounded-[0.9rem] px-2 py-2 text-left text-secondary">
+                      {t("common.search.no_matching_results")}
+                    </p>
                   )}
-                </Combobox.Option>
-                ) : (
-                  <p className="rounded-[0.9rem] px-2 py-2 text-left text-secondary">
-                    {t("common.search.no_matching_results")}
-                  </p>
-                )}
+                </div>
               </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;
-    place-items: center;
+    display: flex;
+    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;