UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: горизонтализация hero-блока и затемнение подложек home

plane-src/apps/web/core/components/home/home-dashboard-widgets.tsx

@@ -28,6 +28,7 @@ import { ProjectService } from "@/services/project";
 import { WorkspaceService } from "@/services/workspace.service";
 // local imports
 import { HomeCardShell } from "./home-card-shell";
+import { HomeRecentIssueDecks } from "./home-recent-issue-decks";
 import { HomeProjectInsights } from "./home-project-insights";
 import { HomeProjectStack } from "./home-project-stack";
 import { aggregateProjectAnalytics, type THomeProjectData } from "./home.utils";
@@ -231,6 +232,8 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
             />
           )}
 
+          <HomeRecentIssueDecks project={selectedProject} workspaceSlug={workspaceSlugValue} />
+
           <HomeProjectInsights
             project={selectedProject}
             analytics={selectedProjectAnalytics}

plane-src/apps/web/core/components/home/home-project-insights.tsx

@@ -190,15 +190,15 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
                 <div className="text-14 font-semibold text-primary">Темп активности</div>
                 <div className="text-12 text-secondary">Последние 7 дней переходов и взаимодействий внутри сводки.</div>
               </div>
-              <div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">
+              <div className="nodedc-home-soft-badge rounded-full px-3 py-1.5 text-12 text-secondary">
                 {recentTouchpoints} событий
               </div>
             </div>
 
-            <div className="relative overflow-hidden rounded-[24px] border border-white/6 bg-black/12 p-4">
+            <div className="nodedc-home-subpanel relative overflow-hidden p-4">
               <div className="absolute inset-x-6 top-4 bottom-4 grid grid-cols-4 gap-4 opacity-25">
                 {["col-1", "col-2", "col-3", "col-4"].map((key) => (
-                  <div key={key} className="border-r border-dashed border-white/8 last:border-r-0" />
+                  <div key={key} className="border-r border-dashed border-white/6 last:border-r-0" />
                 ))}
               </div>
 
@@ -268,7 +268,7 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
 
               <div className="relative z-[1] mt-4 grid grid-cols-7 gap-2">
                 {activitySeries.map((point) => (
-                  <div key={point.key} className="rounded-2xl bg-white/4 px-2 py-2 text-center">
+                  <div key={point.key} className="nodedc-home-soft-badge rounded-2xl px-2 py-2 text-center">
                     <div className="text-[11px] tracking-[0.14em] text-placeholder uppercase">{point.label}</div>
                     <div className="mt-1 text-13 font-semibold text-primary">{point.value}</div>
                   </div>
@@ -279,9 +279,9 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
         </div>
 
         <div className="space-y-4">
-          <div className="rounded-[28px] border border-white/6 bg-[rgba(var(--nodedc-accent-rgb),0.08)] p-5">
+          <div className="nodedc-home-chart-panel p-5">
             <div className="flex items-center gap-3">
-              <div className="grid size-11 place-items-center rounded-2xl bg-[rgba(var(--nodedc-accent-rgb),0.18)] text-[rgb(var(--nodedc-accent-rgb))]">
+              <div className="grid size-11 place-items-center rounded-2xl bg-[rgba(0,0,0,0.28)] text-[rgb(var(--nodedc-accent-rgb))]">
                 <UsersRound className="size-5" />
               </div>
               <div>
@@ -311,17 +311,19 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
             </div>
           </div>
 
-          <div className="rounded-[28px] border border-white/6 bg-black/12 p-5">
+          <div className="nodedc-home-chart-panel p-5">
             <div className="flex items-center justify-between gap-3">
               <div>
                 <div className="text-13 font-semibold text-primary">Ритм исполнения</div>
                 <div className="text-12 text-secondary">Сколько уже закрыто и какой объём ещё держим открытым.</div>
               </div>
-              <div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">{completionRate}%</div>
+              <div className="nodedc-home-soft-badge rounded-full px-3 py-1.5 text-12 text-secondary">
+                {completionRate}%
+              </div>
             </div>
 
             <div className="mt-5 space-y-4">
-              <div className="rounded-[22px] bg-white/4 p-4">
+              <div className="nodedc-home-subpanel p-4">
                 <div className="flex items-center justify-between gap-3 text-12">
                   <span className="text-secondary">Закрытые задачи</span>
                   <span className="font-semibold text-primary">{completedIssues}</span>
@@ -334,7 +336,7 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
                 </div>
               </div>
 
-              <div className="rounded-[22px] bg-white/4 p-4">
+              <div className="nodedc-home-subpanel p-4">
                 <div className="flex items-center justify-between gap-3 text-12">
                   <span className="text-secondary">Открытый остаток</span>
                   <span className="font-semibold text-primary">{openIssues}</span>
@@ -350,7 +352,7 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
                 </div>
               </div>
 
-              <div className="rounded-[22px] border border-dashed border-white/8 bg-white/3 p-4 text-12 text-secondary">
+              <div className="nodedc-home-subpanel p-4 text-12 text-secondary">
                 <span className="font-semibold text-primary">{project ? project.identifier : "Workspace"}</span>
                 <span> держит </span>
                 <span className="font-semibold text-primary">{totalIssues}</span>

plane-src/apps/web/core/components/home/home-recent-issue-decks.tsx

@@ -0,0 +1,454 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { CalendarDays, Sparkles } from "lucide-react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { useTranslation } from "@plane/i18n";
+import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import type { TExternalContourRequest, TIssue } from "@plane/types";
+import { Avatar } from "@plane/ui";
+import { cn, getFileURL, renderFormattedDate } from "@plane/utils";
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+import { useMember } from "@/hooks/store/use-member";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import {
+  NodedcWorkItemCard,
+  getNodedcWorkItemCardAppearance,
+} from "@/components/issues/issue-layouts/shared/nodedc-work-item-card";
+import { ExternalContourService } from "@/services/external-contours";
+import { IssueService } from "@/services/issue";
+import { HomeCardShell } from "./home-card-shell";
+import type { THomeProjectData } from "./home.utils";
+
+const issueService = new IssueService();
+const externalContourService = new ExternalContourService();
+const INTERNAL_DECK_LIMIT = 10;
+const EXTERNAL_DECK_LIMIT = 10;
+const INTERNAL_CURSOR = `${INTERNAL_DECK_LIMIT}:0:0`;
+
+type HomeRecentIssueDecksProps = {
+  project?: THomeProjectData;
+  workspaceSlug: string;
+};
+
+type DeckSectionProps = {
+  count: number;
+  description: string;
+  emptyDescription: string;
+  emptyTitle: string;
+  isLoading: boolean;
+  items: ReactNode[];
+  title: string;
+};
+
+type InternalIssueCardProps = {
+  isActive: boolean;
+  issue: TIssue;
+  onSelect: () => void;
+  project: THomeProjectData;
+};
+
+type ExternalIssueCardProps = {
+  isActive: boolean;
+  onSelect: () => void;
+  project: THomeProjectData;
+  request: TExternalContourRequest;
+};
+
+const sortByRecentCreatedDate = <
+  T extends { created_at?: string | null; requested_at?: string | null; updated_at?: string | null },
+>(
+  items: T[]
+) => {
+  // oxlint-disable-next-line unicorn/no-array-sort
+  return [...items].sort((left: T, right: T) => {
+    const leftDate = Date.parse(left.requested_at ?? left.created_at ?? left.updated_at ?? "") || 0;
+    const rightDate = Date.parse(right.requested_at ?? right.created_at ?? right.updated_at ?? "") || 0;
+    return rightDate - leftDate;
+  });
+};
+
+const DeckSection = (props: DeckSectionProps) => {
+  const { count, description, emptyDescription, emptyTitle, isLoading, items, title } = props;
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <div className="text-14 font-semibold text-primary">{title}</div>
+          <div className="text-12 text-secondary">{description}</div>
+        </div>
+        <div className="nodedc-toolbar-pill inline-flex items-center gap-2">
+          <Sparkles className="size-3.5" />
+          <span>{count}</span>
+        </div>
+      </div>
+
+      <div className="nodedc-home-task-deck-scroller">
+        <div className="flex min-h-[236px] items-end px-1 py-4">
+          {isLoading
+            ? Array.from({ length: 4 }, (_, index) => (
+                <div
+                  key={`skeleton-${title}-${index}`}
+                  className={cn("nodedc-home-task-card nodedc-home-task-card-skeleton animate-pulse", {
+                    "-ml-16": index > 0,
+                  })}
+                  style={{ zIndex: 5 - index }}
+                />
+              ))
+            : items}
+        </div>
+      </div>
+
+      {!isLoading && items.length === 0 && (
+        <div className="rounded-[24px] border border-white/6 bg-black/10 px-4 py-5">
+          <div className="text-14 font-semibold text-primary">{emptyTitle}</div>
+          <div className="mt-1 text-12 leading-5 text-secondary">{emptyDescription}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const HomeInternalContourDeckCard = observer(function HomeInternalContourDeckCard(props: InternalIssueCardProps) {
+  const { isActive, issue, onSelect, project } = props;
+  const { t } = useTranslation();
+  const { getProjectById } = useProject();
+  const { getUserDetails } = useMember();
+  const { getStateById } = useProjectState();
+
+  const creatorDetails = useMemo(() => {
+    if (issue.created_by_detail) return issue.created_by_detail;
+    if (issue.created_by && getUserDetails(issue.created_by)) return getUserDetails(issue.created_by);
+    if (issue.created_by_display_name || issue.created_by_avatar_url) {
+      return {
+        id: issue.created_by,
+        display_name: issue.created_by_display_name ?? t("common.none"),
+        avatar_url: issue.created_by_avatar_url ?? "",
+        first_name: "",
+        last_name: "",
+        is_bot: false,
+      };
+    }
+
+    return undefined;
+  }, [
+    getUserDetails,
+    issue.created_by,
+    issue.created_by_avatar_url,
+    issue.created_by_detail,
+    issue.created_by_display_name,
+    t,
+  ]);
+
+  const sourceContourName = issue.source_project_name ?? getProjectById(issue.project_id)?.name ?? project.name;
+  const selectedState = getStateById(issue.state_id);
+  const { iconBubbleClasses, pillBackgroundClasses } = getNodedcWorkItemCardAppearance(isActive);
+  const statusIconColor =
+    selectedState?.color ?? (isActive ? "rgb(var(--nodedc-on-card-active-rgb))" : "var(--text-color-primary)");
+  const creatorName = creatorDetails?.display_name ?? t("common.none");
+  const dueDateLabel = issue.target_date ? renderFormattedDate(issue.target_date, "d MMM, yyyy") : t("common.none");
+
+  const header = (
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex min-w-0 flex-1 items-center gap-3">
+        <div className="shrink-0">
+          <Avatar src={getFileURL(creatorDetails?.avatar_url ?? "")} name={creatorName} size="md" />
+        </div>
+        <div className="truncate text-body-sm-medium leading-5">{creatorName}</div>
+      </div>
+
+      <div className="flex shrink-0 items-center gap-2">
+        <div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
+          <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
+        </div>
+        <div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
+          <StateGroupIcon
+            stateGroup={selectedState?.group ?? "backlog"}
+            color={statusIconColor}
+            className="h-3.5 w-3.5"
+            percentage={selectedState?.order}
+          />
+        </div>
+      </div>
+    </div>
+  );
+
+  const footer = (
+    <>
+      <div className={cn("inline-flex min-h-9 items-center rounded-full pl-1 pr-2", pillBackgroundClasses)}>
+        {(issue.assignee_ids?.length ?? 0) > 0 ? (
+          <ButtonAvatars showTooltip={false} userIds={issue.assignee_ids ?? []} size="sm" />
+        ) : (
+          <span className="px-2 text-[11px] font-medium">{t("external_contours_page.list.unassigned")}</span>
+        )}
+      </div>
+
+      <div className={cn("inline-flex min-h-9 items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium", pillBackgroundClasses)}>
+        <CalendarDays className="h-3.5 w-3.5" />
+        <span className="truncate">{dueDateLabel}</span>
+      </div>
+    </>
+  );
+
+  return (
+    <button type="button" className="nodedc-home-task-card" data-active={isActive} onClick={onSelect} title={issue.name}>
+      <NodedcWorkItemCard
+        isActive={isActive}
+        surfaceClassName={cn(
+          "nodedc-home-task-card-surface px-0",
+          isActive ? "nodedc-home-task-card-surface-active" : "nodedc-home-task-card-surface-passive"
+        )}
+        contentClassName="px-1"
+        header={header}
+        subtitle={sourceContourName}
+        title={issue.name}
+        footer={footer}
+      />
+    </button>
+  );
+});
+
+const HomeExternalContourDeckCard = observer(function HomeExternalContourDeckCard(props: ExternalIssueCardProps) {
+  const { isActive, onSelect, project, request } = props;
+  const { t } = useTranslation();
+  const { getStateById } = useProjectState();
+  const { iconBubbleClasses, pillBackgroundClasses } = getNodedcWorkItemCardAppearance(isActive);
+
+  const issue = request.issue;
+  const isOutgoing = request.direction
+    ? request.direction === "outgoing"
+    : request.source_project_id === project.id;
+  const requester =
+    request.requested_by?.display_name ||
+    request.requested_by_name ||
+    issue.created_by_detail?.display_name ||
+    t("external_contours_page.mirror.system_actor");
+  const requesterAvatar = issue.created_by_detail?.avatar_url || "";
+  const counterpartContourName = isOutgoing
+    ? request.target_project?.name || request.target_project_name || issue.project_detail?.name || t("common.none")
+    : request.source_project?.name || request.source_project_name || t("common.none");
+  const fallbackState = getStateById(issue.state_id);
+  const selectedState = issue.state_detail ?? fallbackState;
+  const statusIconColor =
+    selectedState?.color ?? (isActive ? "rgb(var(--nodedc-on-card-active-rgb))" : "var(--text-color-primary)");
+  const dueDateLabel = issue.target_date ? renderFormattedDate(issue.target_date, "d MMM, yyyy") : t("common.none");
+
+  return (
+    <button type="button" className="nodedc-home-task-card" data-active={isActive} onClick={onSelect} title={issue.name}>
+      <div
+        data-active={isActive}
+        className={cn(
+          "nodedc-external-card nodedc-home-task-card-surface relative flex min-h-[220px] w-full flex-col p-4",
+          isActive ? "nodedc-home-task-card-surface-active" : "nodedc-home-task-card-surface-passive"
+        )}
+      >
+        <div className={cn("relative flex min-h-[220px] flex-col px-1", isActive ? "text-[rgb(var(--nodedc-on-card-active-rgb))]" : "text-white")}>
+          <div className="space-y-0.5">
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex min-w-0 flex-1 items-center gap-3">
+                <div className="shrink-0">
+                  <Avatar src={getFileURL(requesterAvatar)} name={requester} size="md" />
+                </div>
+                <div className="truncate text-body-sm-medium leading-5">{requester}</div>
+              </div>
+
+              <div className="flex shrink-0 items-center gap-2">
+                {request.has_unread_updates && (
+                  <span
+                    className={cn("size-2 rounded-full", isActive ? "bg-black/70" : "bg-accent-primary")}
+                    title={t("external_contours_page.list.unread_updates")}
+                  />
+                )}
+                <div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
+                  <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
+                </div>
+                <div className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}>
+                  <StateGroupIcon
+                    stateGroup={selectedState?.group ?? "backlog"}
+                    color={statusIconColor}
+                    className="h-3.5 w-3.5"
+                    percentage={fallbackState?.order}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div
+              className={cn(
+                "truncate -mt-0.5 pl-8 text-[11px] font-medium leading-4",
+                isActive ? "text-[rgb(var(--nodedc-on-card-active-rgb))]/72" : "text-[#B3B3B8]"
+              )}
+            >
+              {counterpartContourName}
+            </div>
+          </div>
+
+          <div className="flex flex-1 items-center justify-center px-5 py-4 text-center">
+            <div className="line-clamp-4 max-w-full text-lg font-semibold leading-6">{issue.name}</div>
+          </div>
+
+          <div className="flex items-center justify-between gap-3">
+            <div className={cn("inline-flex min-h-9 items-center rounded-full pl-1 pr-2", pillBackgroundClasses)}>
+              {(issue.assignee_ids?.length ?? 0) > 0 ? (
+                <ButtonAvatars showTooltip={false} userIds={issue.assignee_ids ?? []} size="sm" />
+              ) : (
+                <span className="px-2 text-[11px] font-medium">{t("external_contours_page.list.unassigned")}</span>
+              )}
+            </div>
+
+            <div className={cn("inline-flex min-h-9 items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium", pillBackgroundClasses)}>
+              <CalendarDays className="h-3.5 w-3.5" />
+              <span className="truncate">{dueDateLabel}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+});
+
+export const HomeRecentIssueDecks = observer(function HomeRecentIssueDecks(props: HomeRecentIssueDecksProps) {
+  const { project, workspaceSlug } = props;
+  const [selectedInternalIssueId, setSelectedInternalIssueId] = useState<string | null>(null);
+  const [selectedExternalRequestId, setSelectedExternalRequestId] = useState<string | null>(null);
+
+  const { data: internalIssueResponse, isLoading: isInternalIssuesLoading } = useSWR(
+    project ? `HOME_PROJECT_INTERNAL_ISSUES_${workspaceSlug}_${project.id}` : null,
+    project
+      ? () =>
+          issueService.getIssues(workspaceSlug, project.id, {
+            order_by: "-created_at",
+            per_page: INTERNAL_DECK_LIMIT.toString(),
+            cursor: INTERNAL_CURSOR,
+          })
+      : null,
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  const { data: externalRequestsResponse, isLoading: isExternalRequestsLoading } = useSWR(
+    project ? `HOME_PROJECT_EXTERNAL_CONTOURS_${workspaceSlug}_${project.id}` : null,
+    project ? () => externalContourService.list(workspaceSlug, project.id) : null,
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  const internalIssues = useMemo<TIssue[]>(() => {
+    const results = internalIssueResponse?.results;
+    return Array.isArray(results) ? results.slice(0, INTERNAL_DECK_LIMIT) : [];
+  }, [internalIssueResponse]);
+
+  const externalRequests = useMemo<TExternalContourRequest[]>(
+    () => sortByRecentCreatedDate(externalRequestsResponse?.results ?? []).slice(0, EXTERNAL_DECK_LIMIT),
+    [externalRequestsResponse]
+  );
+
+  useEffect(() => {
+    if (internalIssues.length === 0) {
+      if (selectedInternalIssueId !== null) setSelectedInternalIssueId(null);
+      return;
+    }
+
+    if (!selectedInternalIssueId || !internalIssues.some((issue) => issue.id === selectedInternalIssueId)) {
+      setSelectedInternalIssueId(internalIssues[0].id);
+    }
+  }, [internalIssues, selectedInternalIssueId]);
+
+  useEffect(() => {
+    if (externalRequests.length === 0) {
+      if (selectedExternalRequestId !== null) setSelectedExternalRequestId(null);
+      return;
+    }
+
+    if (!selectedExternalRequestId || !externalRequests.some((request) => request.id === selectedExternalRequestId)) {
+      setSelectedExternalRequestId(externalRequests[0].id);
+    }
+  }, [externalRequests, selectedExternalRequestId]);
+
+  if (!project) {
+    return (
+      <HomeCardShell
+        eyebrow="Task Decks"
+        title="Последние задачи по проекту"
+        description="Выберите проект слева, и здесь появятся колоды последних задач внешнего и внутреннего контуров."
+      >
+        <div className="rounded-[24px] border border-white/6 bg-black/10 px-5 py-6 text-13 text-secondary">
+          Фокус проекта пока не выбран.
+        </div>
+      </HomeCardShell>
+    );
+  }
+
+  const internalIssueCards = internalIssues.map((issue, index) => (
+    <div
+      key={issue.id}
+      className={cn({ "-ml-16": index > 0 })}
+      style={{ zIndex: issue.id === selectedInternalIssueId ? internalIssues.length + 6 : index + 1 }}
+    >
+      <HomeInternalContourDeckCard
+        issue={issue}
+        isActive={issue.id === selectedInternalIssueId}
+        onSelect={() => setSelectedInternalIssueId(issue.id)}
+        project={project}
+      />
+    </div>
+  ));
+
+  const externalIssueCards = externalRequests.map((request, index) => (
+    <div
+      key={request.id}
+      className={cn({ "-ml-16": index > 0 })}
+      style={{ zIndex: request.id === selectedExternalRequestId ? externalRequests.length + 6 : index + 1 }}
+    >
+      <HomeExternalContourDeckCard
+        isActive={request.id === selectedExternalRequestId}
+        onSelect={() => setSelectedExternalRequestId(request.id)}
+        project={project}
+        request={request}
+      />
+    </div>
+  ));
+
+  return (
+    <HomeCardShell
+      eyebrow={`${project.identifier} • последние задачи`}
+      title="Последние задачи проекта"
+      description="Ниже собраны две колоды для быстрого просмотра новых карточек во внешнем и внутреннем контурах."
+      contentClassName="space-y-5 p-5"
+    >
+      <DeckSection
+        count={externalRequests.length}
+        description="Последние запросы и задачи внешнего контура по текущему проекту."
+        emptyDescription="У проекта пока нет внешних контурных задач. Когда появится первый обмен с контрагентом, он сразу попадет в эту колоду."
+        emptyTitle="Внешний контур пока пуст"
+        isLoading={isExternalRequestsLoading}
+        items={externalIssueCards}
+        title="Последние задачи внешнего контура"
+      />
+
+      <DeckSection
+        count={internalIssues.length}
+        description="Последние добавленные внутренние задачи выбранного проекта."
+        emptyDescription="Во внутреннем контуре пока нет задач. Как только в проекте появится новая карточка, она ляжет сюда первой."
+        emptyTitle="Внутренний контур пока пуст"
+        isLoading={isInternalIssuesLoading}
+        items={internalIssueCards}
+        title="Последние задачи внутреннего контура"
+      />
+    </HomeCardShell>
+  );
+});

plane-src/apps/web/core/components/home/user-greetings.tsx

@@ -7,10 +7,7 @@
 // plane types
 import { useTranslation } from "@plane/i18n";
 import type { IUser, TProjectAnalyticsCount } from "@plane/types";
-// plane ui
-// hooks
 import { useCurrentTime } from "@/hooks/use-current-time";
-import { HomeCardShell } from "./home-card-shell";
 import { getCompletionRate, type THomeProjectData } from "./home.utils";
 
 export interface IUserGreetingsView {
@@ -52,49 +49,38 @@ export function UserGreetingsView(props: IUserGreetingsView) {
   const completionRate = getCompletionRate(selectedProjectAnalytics);
 
   return (
-    <HomeCardShell
+    <section className="nodedc-home-card px-5 py-4">
-      tone="accent"
+      <div className="grid items-stretch gap-3 xl:grid-cols-[minmax(0,1fr)_280px_220px]">
-      eyebrow={workspaceName ?? "Workspace Home"}
+        <div className="flex min-w-0 items-center">
-      title={`${t("good")} ${t(greeting)}, ${user?.first_name} ${user?.last_name}`}
+          <div className="min-w-0">
-      description={`${weekDay}, ${date} ${timeString}`}
+            <div className="text-[11px] font-semibold tracking-[0.22em] text-placeholder uppercase">
-      contentClassName="p-5"
+              {workspaceName ?? "Workspace Home"}
-    >
+            </div>
-      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]">
+            <h2 className="mt-1 truncate text-24 font-semibold text-primary">
-        <div className="rounded-[28px] border border-white/6 bg-black/10 p-4">
+              {`${t("good")} ${t(greeting)}, ${user?.first_name} ${user?.last_name}`}
-          <div className="inline-flex items-center gap-2 rounded-full bg-white/8 px-3 py-1.5 text-12 text-secondary">
+            </h2>
-            <span>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</span>
+            <div className="mt-1 text-13 text-secondary">{`${weekDay}, ${date} ${timeString}`}</div>
-            <span>Главная панель workspace</span>
-          </div>
-          <div className="mt-4 max-w-2xl text-13 leading-6 text-secondary">
-            Домашняя страница теперь собирает проектный фокус, recent activity, быстрые ссылки и стикеры в один рабочий
-            экран без переходов по разделам.
           </div>
         </div>
 
-        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
+        <div className="nodedc-home-subpanel flex min-h-[108px] flex-col justify-center px-4 py-3">
-          <div className="rounded-[24px] border border-white/6 bg-black/10 p-4">
+          <div className="text-12 font-medium text-secondary">Текущий фокус</div>
-            <div className="text-12 font-medium text-secondary">Текущий фокус</div>
+          <div className="mt-2 line-clamp-2 text-18 font-semibold text-primary">
-            <div className="mt-2 text-16 font-semibold text-primary">
+            {selectedProject ? selectedProject.name : "Выберите проект слева"}
-              {selectedProject ? selectedProject.name : "Выберите проект слева"}
-            </div>
-            <div className="mt-1 text-12 text-secondary">
-              {selectedProject ? selectedProject.identifier : "Домашняя сводка перестроится под выбранную карточку."}
-            </div>
           </div>
+          <div className="mt-1 text-12 text-secondary">
+            {selectedProject ? selectedProject.identifier : "Домашняя сводка перестроится под выбранную карточку."}
+          </div>
+        </div>
 
-          <div className="rounded-[24px] border border-white/6 bg-black/10 p-4">
+        <div className="nodedc-home-subpanel flex min-h-[108px] flex-col justify-center px-4 py-3">
-            <div className="text-12 font-medium text-secondary">Прогресс фокуса</div>
+          <div className="text-12 font-medium text-secondary">Прогресс фокуса</div>
-            <div className="mt-2 text-16 font-semibold text-primary">
+          <div className="mt-2 text-18 font-semibold text-primary">{selectedProject ? `${completionRate}%` : "—"}</div>
-              {selectedProject ? `${completionRate}%` : "—"}
+          <div className="mt-1 text-12 text-secondary">
-            </div>
+            {selectedProject ? "Закрытые задачи относительно общего объёма." : "Станет доступен после выбора проекта."}
-            <div className="mt-1 text-12 text-secondary">
-              {selectedProject
-                ? "Закрытые задачи относительно общего объёма."
-                : "Станет доступен после выбора проекта."}
-            </div>
           </div>
         </div>
       </div>
-    </HomeCardShell>
+    </section>
   );
 }

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

@@ -1545,11 +1545,11 @@
     outline: none !important;
     border-radius: 2rem !important;
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.034) 0%, rgba(255, 255, 255, 0.012) 100%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.026) 0%, rgba(255, 255, 255, 0.008) 100%),
-      rgba(255, 255, 255, 0.028) !important;
+      rgba(10, 10, 12, 0.58) !important;
     box-shadow:
-      0 18px 40px rgba(0, 0, 0, 0.18),
+      0 18px 40px rgba(0, 0, 0, 0.2),
-      inset 0 1px 0 rgba(255, 255, 255, 0.028) !important;
+      inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
     -webkit-backdrop-filter: blur(28px);
     backdrop-filter: blur(28px);
   }
@@ -1560,15 +1560,15 @@
     inset: 0;
     z-index: 0;
     background:
-      radial-gradient(circle at top right, rgba(var(--nodedc-accent-rgb), 0.12), transparent 34%),
+      radial-gradient(circle at top right, rgba(var(--nodedc-accent-rgb), 0.08), transparent 34%),
-      linear-gradient(180deg, rgba(255, 255, 255, 0.014) 0%, transparent 100%);
+      linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, transparent 100%);
     pointer-events: none;
   }
 
   .nodedc-home-card[data-tone="accent"] {
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.016) 100%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
-      rgba(var(--nodedc-accent-rgb), 0.12) !important;
+      rgba(var(--nodedc-accent-rgb), 0.1) !important;
   }
 
   .nodedc-home-card[data-tone="accent"]::before {
@@ -1609,33 +1609,141 @@
     filter: saturate(1);
   }
 
+  .nodedc-home-task-deck-scroller {
+    overflow-x: auto;
+    overflow-y: visible;
+    padding-bottom: 0.25rem;
+    scrollbar-width: none;
+  }
+
+  .nodedc-home-task-deck-scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nodedc-home-task-card {
+    width: 18.5rem;
+    min-width: 18.5rem;
+    border: 0 !important;
+    outline: none !important;
+    background: transparent !important;
+    padding: 0 !important;
+    position: relative;
+    display: block;
+    cursor: pointer;
+    text-align: left;
+    transition:
+      transform 180ms ease,
+      filter 180ms ease;
+  }
+
+  .nodedc-home-task-card[data-active="true"] {
+    transform: translateY(-0.85rem) scale(1.015);
+  }
+
+  .nodedc-home-task-card[data-active="false"] {
+    filter: saturate(0.88);
+    transform: scale(0.975);
+  }
+
+  .nodedc-home-task-card[data-active="false"]:hover {
+    transform: translateY(-0.2rem) scale(0.985);
+    filter: saturate(1);
+  }
+
+  .nodedc-home-task-card-surface {
+    overflow: hidden;
+    isolation: isolate;
+    border-radius: 2rem !important;
+    box-shadow:
+      0 24px 48px rgba(0, 0, 0, 0.24),
+      inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
+    -webkit-backdrop-filter: blur(24px);
+    backdrop-filter: blur(24px);
+    transition:
+      background 180ms ease,
+      box-shadow 180ms ease,
+      color 180ms ease;
+  }
+
+  .nodedc-home-task-card[data-active="false"] .nodedc-home-task-card-surface {
+    -webkit-backdrop-filter: blur(24px);
+    backdrop-filter: blur(24px);
+  }
+
+  .nodedc-home-task-card-surface-passive {
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.012) 100%),
+      rgba(7, 7, 9, 0.74) !important;
+  }
+
+  .nodedc-home-task-card-surface-active {
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.018) 100%),
+      rgba(var(--nodedc-card-active-rgb), 0.96) !important;
+    color: rgb(var(--nodedc-on-card-active-rgb)) !important;
+    box-shadow:
+      0 30px 56px rgba(0, 0, 0, 0.28),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
+  }
+
+  .nodedc-home-task-card[data-active="true"] .nodedc-home-task-card-surface {
+    background: rgb(var(--nodedc-card-active-rgb)) !important;
+    color: rgb(var(--nodedc-on-card-active-rgb)) !important;
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+    box-shadow:
+      0 30px 56px rgba(0, 0, 0, 0.28),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
+  }
+
+  .nodedc-home-task-card-skeleton {
+    height: 14.75rem;
+    border-radius: 2rem !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.01) 100%),
+      rgba(7, 7, 9, 0.68) !important;
+    box-shadow:
+      0 24px 48px rgba(0, 0, 0, 0.22),
+      inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
+    -webkit-backdrop-filter: blur(24px);
+    backdrop-filter: blur(24px);
+  }
+
   .nodedc-home-metric-card {
     border-radius: 1.5rem !important;
-    border: 1px solid rgba(255, 255, 255, 0.06);
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.012) 100%), rgba(0, 0, 0, 0.14);
+      linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
+      rgba(7, 7, 9, 0.58);
     padding: 1rem;
+    box-shadow:
+      0 14px 28px rgba(0, 0, 0, 0.14),
+      inset 0 1px 0 rgba(255, 255, 255, 0.016) !important;
   }
 
   .nodedc-home-metric-card-accent {
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.016) 100%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0.008) 100%),
-      rgba(var(--nodedc-accent-rgb), 0.12);
+      rgba(7, 7, 9, 0.62);
   }
 
   .nodedc-home-chart-panel {
     border-radius: 1.75rem !important;
-    border: 1px solid rgba(255, 255, 255, 0.06);
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.012) 100%), rgba(0, 0, 0, 0.14);
+      linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
+      rgba(7, 7, 9, 0.56);
     padding: 1rem;
+    box-shadow:
+      0 18px 34px rgba(0, 0, 0, 0.16),
+      inset 0 1px 0 rgba(255, 255, 255, 0.016) !important;
   }
 
   .nodedc-home-progress-track {
     height: 0.55rem;
     overflow: hidden;
     border-radius: 999px;
-    background: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.06);
   }
 
   .nodedc-home-progress-fill {
@@ -1644,6 +1752,21 @@
     background: linear-gradient(90deg, rgba(var(--nodedc-accent-rgb), 0.94) 0%, rgba(255, 255, 255, 0.92) 100%);
   }
 
+  .nodedc-home-subpanel {
+    border-radius: 1.5rem !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
+      rgba(6, 6, 8, 0.64) !important;
+    box-shadow:
+      0 14px 28px rgba(0, 0, 0, 0.16),
+      inset 0 1px 0 rgba(255, 255, 255, 0.01) !important;
+  }
+
+  .nodedc-home-soft-badge {
+    background: rgba(0, 0, 0, 0.34) !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01) !important;
+  }
+
   .nodedc-workspace-list-row:hover {
     background:
       linear-gradient(180deg, rgba(255, 255, 255, 0.044) 0%, rgba(255, 255, 255, 0.018) 100%),