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">
-      <img src={logoSrc} alt="logo" className="h-6 w-auto object-contain sm:h-11" />
+    <div className="pointer-events-none flex items-center justify-center opacity-0" aria-hidden="true">
+      <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}
-                primaryButton={{
-                  prependIcon: <PlusIcon className="size-4" />,
-                  text: t("stickies.empty_state.general.primary_button.text"),
-                  onClick: () => {
-                    toggleShowNewSticky(true);
-                    stickyOperations.create();
-                  },
-                  disabled: !hasGuestLevelPermissions,
-                }}
+                customButton={
+                  <button
+                    type="button"
+                    className="nodedc-stickies-empty-primary-button"
+                    onClick={() => {
+                      toggleShowNewSticky(true);
+                      stickyOperations.create();
+                    }}
+                    disabled={!hasGuestLevelPermissions}
+                  >
+                    <PlusIcon className="size-4" />
+                    <span>{t("stickies.empty_state.general.primary_button.text")}</span>
+                  </button>
+                }
               />
             )}
           </>