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

plane-src/apps/web/core/components/gantt-chart/preview/timeline-preview.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { CalendarDays, Check, Filter, SlidersHorizontal } from "lucide-react";
+import { Check, Filter, SlidersHorizontal, X } from "lucide-react";
 import type { ChartDataType, IGanttBlock } from "@plane/types";
 import { cn } from "@plane/utils";
 import { getItemPositionWidth } from "@/components/gantt-chart/views/helpers";
@@ -249,11 +249,12 @@ const sortPreviewItems = (items: TGanttTimelinePreviewItem[], sortMode: TGanttPr
   });
 
 export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
-  const { emptyMessage, isLoading = false, items, locale, subtitle, title } = props;
+  const { emptyMessage, isLoading = false, items, locale } = props;
   const [activeRange, setActiveRange] = useState<TGanttPreviewRange>("Live");
   const [activePanel, setActivePanel] = useState<"filters" | "view" | null>(null);
   const [activeDateFilters, setActiveDateFilters] = useState<TGanttPreviewDateFilter[]>([]);
   const [activeStatusFilters, setActiveStatusFilters] = useState<TGanttPreviewStatusFilter[]>([]);
+  const [selectedPreviewItemId, setSelectedPreviewItemId] = useState<string | null>(null);
   const [showFullTaskName, setShowFullTaskName] = useState(false);
   const [sortMode, setSortMode] = useState<TGanttPreviewSortMode>("target_date_asc");
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
@@ -329,6 +330,15 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
   const hiddenItemsCount = Math.max(items.length - timeline.blocks.length, 0);
   const activeFilterCount =
     activeDateFilters.length + activeStatusFilters.length + (sortMode === "target_date_asc" ? 0 : 1);
+  const selectedPreviewItem =
+    timeline.blocks.find((item) => item.id === selectedPreviewItemId) ?? timeline.blocks.find((item) => item.id === items[0]?.id);
+  const selectedPreviewItemDate = selectedPreviewItem?.target_date
+    ? getDateFromValue(selectedPreviewItem.target_date)
+    : undefined;
+  const selectedPreviewItemStartDate = selectedPreviewItem?.start_date
+    ? getDateFromValue(selectedPreviewItem.start_date)
+    : undefined;
+  const formatPreviewDate = (date?: Date) => (date ? getShortDateLabel(date, locale) : "Нет");
 
   const toggleStatusFilter = (filterKey: TGanttPreviewStatusFilter) =>
     setActiveStatusFilters((currentFilters) =>
@@ -350,6 +360,13 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
     setSortMode("target_date_asc");
   };
 
+  useEffect(() => {
+    if (!selectedPreviewItemId) return;
+    if (timeline.blocks.some((item) => item.id === selectedPreviewItemId)) return;
+
+    setSelectedPreviewItemId(null);
+  }, [selectedPreviewItemId, timeline.blocks]);
+
   useEffect(() => {
     const scrollElement = scrollContainerRef.current;
     if (!scrollElement || isLoading) return;
@@ -366,28 +383,24 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
   return (
     <section className="nodedc-home-gantt-card">
       <div className="nodedc-home-gantt-toolbar">
-        <div className="flex min-w-0 items-center gap-3">
-          <div className="grid size-10 shrink-0 place-items-center rounded-full bg-black text-[rgb(var(--nodedc-card-active-rgb))]">
-            <CalendarDays className="size-4" />
-          </div>
-          <div className="min-w-0">
-            <div className="text-18 leading-none font-semibold text-primary">{title}</div>
-            {subtitle && <div className="mt-1 truncate text-12 text-secondary">{subtitle}</div>}
-          </div>
-        </div>
+        <div className="nodedc-home-gantt-toolbar-spacer" aria-hidden="true" />
 
-        <div className="flex flex-wrap items-center gap-2">
-          {GANTT_RANGES.map((item) => (
-            <button
-              key={item}
-              type="button"
-              aria-pressed={activeRange === item}
-              className={cn("nodedc-home-gantt-chip", { "nodedc-home-gantt-chip-active": activeRange === item })}
-              onClick={() => setActiveRange(item)}
-            >
-              {item}
-            </button>
-          ))}
+        <div className="nodedc-home-gantt-controls">
+          <div className="nodedc-home-gantt-range-group" aria-label="Масштаб Ганта">
+            {GANTT_RANGES.map((item) => (
+              <button
+                key={item}
+                type="button"
+                aria-pressed={activeRange === item}
+                className={cn("nodedc-home-gantt-range-button", {
+                  "nodedc-home-gantt-range-button-active": activeRange === item,
+                })}
+                onClick={() => setActiveRange(item)}
+              >
+                {item}
+              </button>
+            ))}
+          </div>
           <div className="nodedc-home-gantt-action-group">
             <button
               type="button"
@@ -405,6 +418,7 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
               type="button"
               className={cn("nodedc-home-gantt-round-button", {
                 "nodedc-home-gantt-round-button-active": activeFilterCount > 0 || activePanel === "filters",
+                "nodedc-home-gantt-filter-button-has-count": activeFilterCount > 0,
               })}
               aria-expanded={activePanel === "filters"}
               aria-label="Фильтры задач Ганта"
@@ -412,6 +426,7 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
               onClick={() => setActivePanel((currentPanel) => (currentPanel === "filters" ? null : "filters"))}
             >
               <Filter className="size-4" />
+              {activeFilterCount > 0 && <span className="nodedc-home-gantt-filter-count">{activeFilterCount}</span>}
             </button>
 
             {activePanel === "view" && (
@@ -551,6 +566,38 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
               </div>
             </div>
 
+            {selectedPreviewItemId && selectedPreviewItem && (
+              <div className="nodedc-home-gantt-inspector">
+                <button
+                  type="button"
+                  className="nodedc-home-gantt-inspector-close"
+                  aria-label="Закрыть карточку задачи"
+                  onClick={() => setSelectedPreviewItemId(null)}
+                >
+                  <X className="size-4" />
+                </button>
+                <div className="min-w-0">
+                  <div className="text-[11px] font-semibold tracking-[0.18em] text-white/45 uppercase">
+                    {selectedPreviewItem.identifier}
+                  </div>
+                  <div className="mt-2 text-17 font-semibold leading-snug text-white">{selectedPreviewItem.name}</div>
+                  <div className="mt-4 grid grid-cols-2 gap-2 text-12">
+                    <div className="rounded-[1rem] bg-black/20 px-3 py-2">
+                      <div className="text-white/42">Начало</div>
+                      <div className="mt-1 font-semibold text-white">{formatPreviewDate(selectedPreviewItemStartDate)}</div>
+                    </div>
+                    <div className="rounded-[1rem] bg-black/20 px-3 py-2">
+                      <div className="text-white/42">Срок</div>
+                      <div className="mt-1 font-semibold text-white">{formatPreviewDate(selectedPreviewItemDate)}</div>
+                    </div>
+                  </div>
+                  <div className="mt-3 text-12 leading-5 text-white/58">
+                    Клик по строке или полосе Ганта выбирает задачу без перехода в полную карточку.
+                  </div>
+                </div>
+              </div>
+            )}
+
             <div className="relative z-[1] space-y-3 pt-12">
               {isLoading ? (
                 Array.from({ length: 4 }, (_, index) => (
@@ -560,7 +607,19 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
                 timeline.blocks.map((item) => (
                   <div
                     key={item.id}
-                    className="nodedc-home-gantt-row"
+                    className={cn("nodedc-home-gantt-row", {
+                      "nodedc-home-gantt-row-selected": selectedPreviewItemId === item.id,
+                    })}
+                    role="button"
+                    tabIndex={0}
+                    aria-label={`Показать карточку задачи ${item.name}`}
+                    onClick={() => setSelectedPreviewItemId(item.id)}
+                    onKeyDown={(event) => {
+                      if (event.key !== "Enter" && event.key !== " ") return;
+
+                      event.preventDefault();
+                      setSelectedPreviewItemId(item.id);
+                    }}
                     style={{
                       gridTemplateColumns: `${GANTT_LABEL_COLUMN_WIDTH}px ${timeline.timelineWidth}px`,
                     }}
@@ -579,6 +638,13 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
                     <div className="nodedc-home-gantt-track" style={{ width: `${timeline.timelineWidth}px` }}>
                       <div
                         className={cn("nodedc-home-gantt-bar", `nodedc-home-gantt-bar-${item.tone}`)}
+                        role="button"
+                        tabIndex={-1}
+                        aria-label={`Показать карточку задачи ${item.name}`}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          setSelectedPreviewItemId(item.id);
+                        }}
                         style={{
                           left: `${item.left}px`,
                           width: `${item.width}px`,

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

@@ -15,6 +15,7 @@ import { cn } from "@plane/utils";
 // hooks
 import { useHome } from "@/hooks/store/use-home";
 import { useProject } from "@/hooks/store/use-project";
+import { useWorkspace } from "@/hooks/store/use-workspace";
 // plane web components
 import { HomePageHeader } from "@/plane-web/components/home/header";
 import { ProjectService } from "@/services/project";
@@ -23,7 +24,7 @@ import { WorkspaceService } from "@/services/workspace.service";
 import { HomeCardShell } from "./home-card-shell";
 import { HomeGanttPreview } from "./home-gantt-preview";
 import { HomeRecentIssueDecks } from "./home-recent-issue-decks";
-import { HomeActivityTrendCard, HomeOperationsOverview } from "./home-project-insights";
+import { HomeActivityTrendCard, HomeOperationsCard, HomeRhythmRecentOverview } from "./home-project-insights";
 import { HomeProjectStack } from "./home-project-stack";
 import { aggregateProjectAnalytics, type THomeProjectData } from "./home.utils";
 import { StickiesWidget } from "../stickies/widget";
@@ -81,6 +82,7 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
   const pathname = usePathname();
   // store hooks
   const { toggleWidgetSettings, widgetsMap, showWidgetSettings, loading } = useHome();
+  const { currentWorkspace } = useWorkspace();
   const { loader, joinedProjectIds, getPartialProjectById, fetchProjectAnalyticsCount, getProjectAnalyticsCountById } =
     useProject();
   // plane hooks
@@ -190,21 +192,15 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
   ].filter(Boolean);
 
   return (
-    <div className="relative flex h-full w-full flex-col gap-6">
-      <HomePageHeader
-        currentUser={currentUser}
-        selectedProject={selectedProject}
-        selectedProjectAnalytics={selectedProjectAnalytics}
-        recents={workspaceRecents}
-      />
+    <div className="nodedc-home-dashboard-shell relative flex h-full w-full flex-col">
       <ManageWidgetsModal
         workspaceSlug={workspaceSlugValue}
         isModalOpen={showWidgetSettings}
         handleOnClose={() => toggleWidgetSettings(false)}
       />
 
-      <div className="grid gap-5 xl:grid-cols-[minmax(320px,360px)_minmax(0,1fr)] xl:items-stretch">
-        <div className="min-w-0">
+      <div className="nodedc-home-dashboard-grid grid xl:grid-cols-[minmax(320px,360px)_minmax(0,1fr)] xl:items-stretch">
+        <div className="flex min-w-0">
           <HomeProjectStack
             className="h-full"
             projects={homeProjects}
@@ -215,13 +211,20 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
             onSelectProject={setSelectedProjectId}
           />
         </div>
-        <div className="min-w-0 space-y-5">
+        <div className="nodedc-home-main-column min-w-0">
+          <HomePageHeader
+            currentUser={currentUser}
+            selectedProject={selectedProject}
+            selectedProjectAnalytics={selectedProjectAnalytics}
+            recents={workspaceRecents}
+            workspaceName={currentWorkspace?.name}
+          />
           <HomeGanttPreview
             project={selectedProject}
             analytics={selectedProjectAnalytics}
             workspaceSlug={workspaceSlugValue}
           />
-          <HomeOperationsOverview
+          <HomeRhythmRecentOverview
             project={selectedProject}
             analytics={selectedProjectAnalytics}
             analyticsCollection={analyticsCollection}
@@ -232,13 +235,22 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
         </div>
       </div>
 
-      <HomeActivityTrendCard
-        project={selectedProject}
-        analytics={selectedProjectAnalytics}
-        analyticsCollection={analyticsCollection}
-        recents={workspaceRecents}
-        locale={currentLocale}
-      />
+      <div className="nodedc-home-lower-grid grid xl:grid-cols-[minmax(320px,360px)_minmax(0,1fr)]">
+        <HomeOperationsCard
+          project={selectedProject}
+          analytics={selectedProjectAnalytics}
+          analyticsCollection={analyticsCollection}
+          recents={workspaceRecents}
+          locale={currentLocale}
+        />
+        <HomeActivityTrendCard
+          project={selectedProject}
+          analytics={selectedProjectAnalytics}
+          analyticsCollection={analyticsCollection}
+          recents={workspaceRecents}
+          locale={currentLocale}
+        />
+      </div>
 
       <HomeRecentIssueDecks project={selectedProject} workspaceSlug={workspaceSlugValue} />
 

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

@@ -293,111 +293,125 @@ export function HomeActivityTrendCard(props: HomeProjectInsightsProps) {
   );
 }
 
-export function HomeOperationsOverview(props: HomeProjectInsightsProps) {
-  const { recentActivitySlot } = props;
+export function HomeRhythmCard(props: HomeProjectInsightsProps) {
   const {
     completedIssues,
-    completionRate,
     metricCards,
     openIssues,
-    progressRows,
     project,
     recentTouchpoints,
     totalIssues,
   } = useHomeProjectInsightData(props);
 
   return (
-    <section className="grid gap-4 xl:grid-cols-[minmax(0,0.95fr)_minmax(0,0.95fr)_minmax(300px,1.1fr)]">
-      <div className="nodedc-home-subpanel space-y-4 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.14)] text-[rgb(var(--nodedc-accent-rgb))]">
-            <UsersRound className="size-5" />
+    <section className="nodedc-home-subpanel nodedc-home-rhythm-card space-y-4 p-5">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <div className="text-15 font-semibold text-primary">Ритм исполнения</div>
+          <div className="text-12 text-secondary">Закрытый объём и открытый остаток по фокусу.</div>
+        </div>
+        <div className="grid size-11 place-items-center rounded-full bg-black text-[rgb(var(--nodedc-card-active-rgb))]">
+          <CheckCircle2 className="size-5" />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-2">
+        {metricCards.map((metric) => (
+          <div key={metric.label} className="rounded-[1.15rem] bg-black/[0.12] p-3">
+            <div className="text-11 leading-4 text-secondary">{metric.label}</div>
+            <div className="mt-2 text-18 leading-none font-semibold text-primary">{metric.value}</div>
           </div>
-          <div>
-            <div className="text-15 font-semibold text-primary">Операционный срез</div>
-            <div className="text-12 text-secondary">Команда, циклы и модули относительно текущего workspace.</div>
+        ))}
+      </div>
+
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="flex items-center justify-between gap-3 text-12">
+            <span className="text-secondary">Закрытые задачи</span>
+            <span className="font-semibold text-primary">{completedIssues}</span>
+          </div>
+          <div className="nodedc-home-focus-track">
+            <div
+              className="nodedc-home-focus-fill"
+              style={{ width: `${totalIssues > 0 ? (completedIssues / totalIssues) * 100 : 0}%` }}
+            />
           </div>
         </div>
 
-        <div className="space-y-4">
-          {progressRows.map((row) => {
-            const percent = row.max > 0 ? Math.max((row.value / row.max) * 100, row.value > 0 ? 10 : 0) : 0;
+        <div className="space-y-2">
+          <div className="flex items-center justify-between gap-3 text-12">
+            <span className="text-secondary">Открытый остаток</span>
+            <span className="font-semibold text-primary">{openIssues}</span>
+          </div>
+          <div className="nodedc-home-focus-track">
+            <div
+              className="nodedc-home-focus-fill opacity-65"
+              style={{
+                width: `${totalIssues > 0 ? (openIssues / totalIssues) * 100 : 0}%`,
+                height: "100%",
+              }}
+            />
+          </div>
+        </div>
+      </div>
 
-            return (
-              <div key={row.label} className="space-y-2">
-                <div className="flex items-center justify-between gap-3 text-12">
-                  <span className="text-secondary">{row.label}</span>
-                  <span className="font-semibold text-primary">{row.value}</span>
-                </div>
-                <div className="nodedc-home-focus-track">
-                  <div className="nodedc-home-focus-fill" style={{ width: `${Math.min(percent, 100)}%` }} />
-                </div>
+      <div className="text-12 leading-5 text-secondary">
+        <span className="font-semibold text-primary">{project ? project.identifier : "Workspace"}</span>
+        <span> держит </span>
+        <span className="font-semibold text-primary">{totalIssues}</span>
+        <span> задач и </span>
+        <span className="font-semibold text-primary">{recentTouchpoints}</span>
+        <span> недавних касаний.</span>
+      </div>
+    </section>
+  );
+}
+
+export function HomeOperationsCard(props: HomeProjectInsightsProps) {
+  const {
+    progressRows,
+  } = useHomeProjectInsightData(props);
+
+  return (
+    <section className="nodedc-home-subpanel nodedc-home-operations-card space-y-4 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.14)] text-[rgb(var(--nodedc-accent-rgb))]">
+          <UsersRound className="size-5" />
+        </div>
+        <div>
+          <div className="text-15 font-semibold text-primary">Операционный срез</div>
+          <div className="text-12 text-secondary">Команда, циклы и модули относительно текущего workspace.</div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {progressRows.map((row) => {
+          const percent = row.max > 0 ? Math.max((row.value / row.max) * 100, row.value > 0 ? 10 : 0) : 0;
+
+          return (
+            <div key={row.label} className="space-y-2">
+              <div className="flex items-center justify-between gap-3 text-12">
+                <span className="text-secondary">{row.label}</span>
+                <span className="font-semibold text-primary">{row.value}</span>
               </div>
-            );
-          })}
-        </div>
+              <div className="nodedc-home-focus-track">
+                <div className="nodedc-home-focus-fill" style={{ width: `${Math.min(percent, 100)}%` }} />
+              </div>
+            </div>
+          );
+        })}
       </div>
+    </section>
+  );
+}
 
-      <div className="nodedc-home-subpanel space-y-4 p-5">
-        <div className="flex items-center justify-between gap-3">
-          <div>
-            <div className="text-15 font-semibold text-primary">Ритм исполнения</div>
-            <div className="text-12 text-secondary">Закрытый объём и открытый остаток по фокусу.</div>
-          </div>
-          <div className="grid size-11 place-items-center rounded-full bg-black text-[rgb(var(--nodedc-card-active-rgb))]">
-            <CheckCircle2 className="size-5" />
-          </div>
-        </div>
+export function HomeRhythmRecentOverview(props: HomeProjectInsightsProps) {
+  const { recentActivitySlot } = props;
+  const { completionRate } = useHomeProjectInsightData(props);
 
-        <div className="grid grid-cols-3 gap-2">
-          {metricCards.map((metric) => (
-            <div key={metric.label} className="rounded-[1.15rem] bg-black/[0.12] p-3">
-              <div className="text-11 leading-4 text-secondary">{metric.label}</div>
-              <div className="mt-2 text-18 leading-none font-semibold text-primary">{metric.value}</div>
-            </div>
-          ))}
-        </div>
-
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <div className="flex items-center justify-between gap-3 text-12">
-              <span className="text-secondary">Закрытые задачи</span>
-              <span className="font-semibold text-primary">{completedIssues}</span>
-            </div>
-            <div className="nodedc-home-focus-track">
-              <div
-                className="nodedc-home-focus-fill"
-                style={{ width: `${totalIssues > 0 ? (completedIssues / totalIssues) * 100 : 0}%` }}
-              />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <div className="flex items-center justify-between gap-3 text-12">
-              <span className="text-secondary">Открытый остаток</span>
-              <span className="font-semibold text-primary">{openIssues}</span>
-            </div>
-            <div className="nodedc-home-focus-track">
-              <div
-                className="nodedc-home-focus-fill opacity-65"
-                style={{
-                  width: `${totalIssues > 0 ? (openIssues / totalIssues) * 100 : 0}%`,
-                  height: "100%",
-                }}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="text-12 leading-5 text-secondary">
-          <span className="font-semibold text-primary">{project ? project.identifier : "Workspace"}</span>
-          <span> держит </span>
-          <span className="font-semibold text-primary">{totalIssues}</span>
-          <span> задач и </span>
-          <span className="font-semibold text-primary">{recentTouchpoints}</span>
-          <span> недавних касаний.</span>
-        </div>
-      </div>
+  return (
+    <section className="nodedc-home-ops-recent-grid grid gap-4 xl:grid-cols-[minmax(0,0.95fr)_minmax(320px,1.05fr)]">
+      <HomeRhythmCard {...props} />
 
       <div className="nodedc-home-subpanel p-5">
         {recentActivitySlot ? (
@@ -423,6 +437,15 @@ export function HomeOperationsOverview(props: HomeProjectInsightsProps) {
   );
 }
 
+export function HomeOperationsOverview(props: HomeProjectInsightsProps) {
+  return (
+    <div className="grid gap-4">
+      <HomeRhythmRecentOverview {...props} />
+      <HomeOperationsCard {...props} />
+    </div>
+  );
+}
+
 export function HomeProjectInsights(props: HomeProjectInsightsProps) {
   return (
     <div className="grid gap-5">

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

@@ -6,6 +6,7 @@
 
 import { FolderOpenDot, Layers3, Search, UsersRound } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import type { TActivityEntityData, TProjectAnalyticsCount } from "@plane/types";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { cn } from "@plane/utils";
@@ -29,6 +30,7 @@ const ACTIVE_CARD_HEIGHT = 248;
 const STACK_OFFSET = 88;
 
 export function HomeProjectStack(props: HomeProjectStackProps) {
+  const router = useRouter();
   const {
     className,
     projects,
@@ -201,7 +203,7 @@ export function HomeProjectStack(props: HomeProjectStackProps) {
         </div>
       )}
 
-      <div className="mt-4 rounded-[24px] bg-black/10 p-4 xl:mt-auto">
+      <div className="nodedc-home-project-quick-section mt-4 rounded-[24px] bg-black/10 p-4 xl:mt-auto">
         <div className="mb-3 flex items-center justify-between gap-3">
           <div>
             <div className="text-13 font-semibold text-primary">Быстрый выбор</div>
@@ -213,45 +215,64 @@ export function HomeProjectStack(props: HomeProjectStackProps) {
           </div>
         </div>
 
-        <div className="flex flex-wrap gap-2">
+        <div className="nodedc-home-project-quick-list">
           {orderedProjects.map((project: THomeProjectData) => {
             const analytics = analyticsMap[project.id];
+            const isActive = project.id === selectedProject?.id;
+
             return (
               <button
                 key={project.id}
                 type="button"
-                className={cn("nodedc-toolbar-pill inline-flex items-center gap-2", {
-                  "!bg-[rgb(var(--nodedc-card-active-rgb))] !text-[rgb(var(--nodedc-on-card-active-rgb))]":
-                    project.id === selectedProject?.id,
-                })}
-                onClick={() => onSelectProject(project.id)}
+                className="nodedc-home-project-quick-button"
+                data-active={isActive}
+                aria-label={
+                  isActive ? `Открыть рабочую область проекта ${project.name}` : `Выбрать проект ${project.name}`
+                }
+                onClick={() => {
+                  if (isActive) {
+                    router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
+                    return;
+                  }
+
+                  onSelectProject(project.id);
+                }}
               >
-                <Logo logo={project.logo_props} size={14} />
-                <span>{project.identifier}</span>
-                <span className="text-[11px] opacity-70">{getCompletionRate(analytics)}%</span>
+                <span className="nodedc-home-project-quick-main">
+                  <span className="nodedc-home-project-quick-logo">
+                    <Logo logo={project.logo_props} size={14} />
+                  </span>
+                  <span className="truncate">{project.identifier}</span>
+                </span>
+                <span className="nodedc-home-project-quick-metric">
+                  <span className="nodedc-home-project-quick-dot" aria-hidden="true" />
+                  <span>{getCompletionRate(analytics)}%</span>
+                </span>
               </button>
             );
           })}
         </div>
 
         {selectedProject && (
-          <div className="mt-4 grid grid-cols-2 gap-3 rounded-[22px] bg-white/[0.04] p-3 md:grid-cols-3">
-            <div className="rounded-2xl bg-black/10 px-3 py-2">
+          <div className="nodedc-home-project-focus-grid mt-4 grid grid-cols-2 gap-3 md:grid-cols-3">
+            <div className="nodedc-home-project-focus-item px-3 py-2">
               <div className="text-[11px] tracking-[0.18em] text-placeholder uppercase">Фокус</div>
-              <div className="mt-1 text-13 font-semibold text-primary">{selectedProject.identifier}</div>
+              <div className="nodedc-home-project-focus-value mt-1 text-13 font-semibold text-primary">
+                {selectedProject.identifier}
+              </div>
             </div>
-            <div className="rounded-2xl bg-black/10 px-3 py-2">
+            <div className="nodedc-home-project-focus-item px-3 py-2">
               <div className="flex items-center gap-1 text-[11px] tracking-[0.18em] text-placeholder uppercase">
                 <UsersRound className="size-3.5" />
                 <span>Команда</span>
               </div>
-              <div className="mt-1 text-13 font-semibold text-primary">
+              <div className="nodedc-home-project-focus-value mt-1 text-13 font-semibold text-primary">
                 {analyticsMap[selectedProject.id]?.total_members ?? 0}
               </div>
             </div>
-            <div className="rounded-2xl bg-black/10 px-3 py-2">
+            <div className="nodedc-home-project-focus-item px-3 py-2">
               <div className="text-[11px] tracking-[0.18em] text-placeholder uppercase">Контур</div>
-              <div className="mt-1 text-13 font-semibold text-primary">
+              <div className="nodedc-home-project-focus-value mt-1 text-13 font-semibold text-primary">
                 {activityCountByProject[selectedProject.id] ?? 0} касаний
               </div>
             </div>

plane-src/apps/web/core/components/home/root.tsx

@@ -57,8 +57,8 @@ export const WorkspaceHomeView = observer(function WorkspaceHomeView() {
       )}
       <>
         <HomePeekOverviewsRoot />
-        <ContentWrapper className="mx-auto scrollbar-hide gap-6 bg-transparent px-page-x">
-          <div className="nodedc-workspace-page-shell mx-auto w-full max-w-[1480px]">
+        <ContentWrapper className="nodedc-home-route-surface mx-auto scrollbar-hide gap-6 px-page-x">
+          <div className="nodedc-workspace-page-shell nodedc-home-page-shell mx-auto w-full">
             <DashboardWidgets currentUser={currentUser} />
           </div>
         </ContentWrapper>

plane-src/apps/web/core/components/voice-tasker/global-control.tsx

@@ -389,15 +389,15 @@ export function VoiceTaskerGlobalControl({ workspaceSlug }: Props) {
           <button
             type="button"
             className={cn(
-              "shadow-lg pointer-events-auto flex size-11 items-center justify-center rounded-full border-[0.5px] transition",
+              "pointer-events-auto flex size-11 items-center justify-center border-0 bg-transparent p-0 shadow-none outline-none transition",
               isAvailable
-                ? "border-pink-500/40 bg-pink-500 hover:bg-pink-600 text-white"
-                : "cursor-not-allowed border-subtle bg-layer-2 text-tertiary"
+                ? "text-[rgb(var(--nodedc-accent-rgb))] hover:text-[rgb(var(--nodedc-card-active-rgb))]"
+                : "cursor-not-allowed text-tertiary"
             )}
             disabled={!isAvailable}
             onClick={() => setIsOpen(true)}
           >
-            <Mic className="size-5" />
+            <Mic className="size-7" />
           </button>
         </Tooltip>
       </div>