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

plane-src/apps/web/core/components/common/logo-spinner.tsx

@@ -15,8 +15,8 @@ export function LogoSpinner() {
   const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
 
   return (
-    <div className="flex items-center justify-center">
+    <div className="pointer-events-none flex items-center justify-center opacity-0" aria-hidden="true">
-      <img src={logoSrc} alt="logo" className="h-6 w-auto object-contain sm:h-11" />
+      <img src={logoSrc} alt="" className="h-6 w-auto object-contain sm:h-11" />
     </div>
   );
 }

plane-src/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx

@@ -49,8 +49,6 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
   // derived values
   const issue = getIssueById(issueId);
 
-  if (!issue) return <></>;
-
   // handlers
   const handleIssueCrudState = (
     key: "create" | "existing",
@@ -74,7 +72,7 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
 
   const handleAddExisting = () => {
     handleIssueCrudState("existing", issueId, null);
-    toggleSubIssuesModal(issue.id);
+    toggleSubIssuesModal(issue?.id ?? issueId);
   };
 
   // options

plane-src/apps/web/core/components/stickies/layout/stickies-list.tsx

@@ -12,22 +12,15 @@ import type {
 import type { ElementDragPayload } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
-import { useTheme } from "next-themes";
 import Masonry from "react-masonry-component";
 
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { PlusIcon } from "@plane/propel/icons";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import { EUserWorkspaceRoles } from "@plane/types";
-// assets
-import darkStickiesAsset from "@/app/assets/empty-state/stickies/stickies-dark.webp?url";
-import lightStickiesAsset from "@/app/assets/empty-state/stickies/stickies-light.webp?url";
-import darkStickiesSearchAsset from "@/app/assets/empty-state/stickies/stickies-search-dark.webp?url";
-import lightStickiesSearchAsset from "@/app/assets/empty-state/stickies/stickies-search-light.webp?url";
 // components
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
-import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
 import { StickiesEmptyState } from "@/components/home/widgets/empty-states/stickies";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
@@ -51,8 +44,6 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
   const { workspaceSlug, intersectionElement, columnCount } = props;
   // navigation
   const pathname = usePathname();
-  // theme hook
-  const { resolvedTheme } = useTheme();
   // plane hooks
   const { t } = useTranslation();
   // store hooks
@@ -69,8 +60,6 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
     [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
     EUserPermissionsLevel.WORKSPACE
   );
-  const stickiesResolvedPath = resolvedTheme === "light" ? lightStickiesAsset : darkStickiesAsset;
-  const stickiesSearchResolvedPath = resolvedTheme === "light" ? lightStickiesSearchAsset : darkStickiesSearchAsset;
   const masonryRef = useRef<any>(null);
 
   const handleLayout = () => {
@@ -118,25 +107,36 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
         {isStickiesPage ? (
           <>
             {searchQuery ? (
-              <SimpleEmptyState
+              <EmptyStateDetailed
+                assetKey="search"
+                assetClassName="nodedc-stickies-empty-asset size-40"
+                rootClassName="nodedc-stickies-empty-root"
+                align="center"
                 title={t("stickies.empty_state.search.title")}
                 description={t("stickies.empty_state.search.description")}
-                assetPath={stickiesSearchResolvedPath}
               />
             ) : (
-              <DetailedEmptyState
+              <EmptyStateDetailed
+                assetKey="dashboard"
+                assetClassName="nodedc-stickies-empty-asset size-40"
+                rootClassName="nodedc-stickies-empty-root"
+                align="center"
                 title={t("stickies.empty_state.general.title")}
                 description={t("stickies.empty_state.general.description")}
-                assetPath={stickiesResolvedPath}
+                customButton={
-                primaryButton={{
+                  <button
-                  prependIcon: <PlusIcon className="size-4" />,
+                    type="button"
-                  text: t("stickies.empty_state.general.primary_button.text"),
+                    className="nodedc-stickies-empty-primary-button"
-                  onClick: () => {
+                    onClick={() => {
                       toggleShowNewSticky(true);
                       stickyOperations.create();
-                  },
-                  disabled: !hasGuestLevelPermissions,
                     }}
+                    disabled={!hasGuestLevelPermissions}
+                  >
+                    <PlusIcon className="size-4" />
+                    <span>{t("stickies.empty_state.general.primary_button.text")}</span>
+                  </button>
+                }
               />
             )}
           </>

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

@@ -1525,6 +1525,56 @@
     color: var(--text-color-primary) !important;
   }
 
+  .nodedc-stickies-empty-root {
+    padding-bottom: calc(var(--nodedc-bottom-dock-height) + 2rem) !important;
+  }
+
+  .nodedc-stickies-empty-asset {
+    --illustration-fill-primary: rgba(255, 255, 255, 0.1);
+    --illustration-fill-secondary: rgba(255, 255, 255, 0.075);
+    --illustration-fill-tertiary: rgba(var(--nodedc-card-active-rgb), 0.16);
+    --illustration-fill-quaternary: rgba(var(--nodedc-card-active-rgb), 0.24);
+    --illustration-stroke-primary: rgba(var(--nodedc-card-active-rgb), 0.46);
+    --illustration-stroke-secondary: rgba(var(--nodedc-card-active-rgb), 0.62);
+    --illustration-stroke-tertiary: rgb(var(--nodedc-card-active-rgb));
+    color: rgb(var(--nodedc-card-active-rgb));
+    opacity: 0.92;
+  }
+
+  .nodedc-stickies-empty-primary-button {
+    display: inline-flex;
+    min-height: 3.05rem;
+    align-items: center;
+    justify-content: center;
+    gap: 0.55rem;
+    border: 0 !important;
+    outline: none !important;
+    border-radius: 1.2rem !important;
+    background: rgb(var(--nodedc-card-active-rgb)) !important;
+    color: rgb(var(--nodedc-on-card-active-rgb)) !important;
+    padding: 0 1.45rem !important;
+    font-size: 0.875rem;
+    font-weight: 700;
+    line-height: 1;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.18),
+      0 16px 32px rgba(var(--nodedc-card-active-rgb), 0.14) !important;
+    transition:
+      background 160ms ease,
+      transform 160ms ease,
+      opacity 160ms ease;
+  }
+
+  .nodedc-stickies-empty-primary-button:hover:not(:disabled) {
+    background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 84%, white) !important;
+    transform: translateY(-1px);
+  }
+
+  .nodedc-stickies-empty-primary-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
   .nodedc-external-sidebar-shell {
     border: 0 !important;
     background: