UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: auth screens, error pages и новый канон внешних контуров

plane-src/apps/web/ce/components/projects/external-contours/sidebar.tsx

@@ -10,7 +10,6 @@ import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import type { TInboxIssueCurrentTab } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
-import { EHeaderVariant, Header } from "@plane/ui";
 import { cn } from "@plane/utils";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -42,18 +41,20 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
     }
   }, [currentTab, filteredRequestIds, inboxIssueId, projectId, router, workspaceSlug]);
 
-  const currentCount = currentTab === EInboxIssueCurrentTab.CLOSED ? closedRequestIds.length : openRequestIds.length;
-
   return (
-    <div className="h-full w-full flex-shrink-0 border-r border-strong bg-surface-1">
+    <div className="nodedc-external-sidebar-shell h-full w-full flex-shrink-0 border-r border-strong/40">
       <div className="relative flex h-full w-full flex-col overflow-hidden">
-        <Header variant={EHeaderVariant.SECONDARY}>
-          {tabNavigationOptions.map((option) => (
-            <div
+        <div className="px-4 py-4">
+          <div className="nodedc-filter-row-shell flex items-center gap-2 p-1">
+            {tabNavigationOptions.map((option) => {
+              const count = option.key === EInboxIssueCurrentTab.CLOSED ? closedRequestIds.length : openRequestIds.length;
+              return (
+                <button
+                  type="button"
               key={option.key}
+                  data-active={currentTab === option.key}
               className={cn(
-                "relative flex h-full cursor-pointer items-center gap-1 px-3 text-13 font-medium transition-all",
-                currentTab === option.key ? "text-accent-primary" : "hover:text-secondary"
+                    "nodedc-external-tab flex flex-1 items-center justify-center gap-2 text-13 font-medium transition-all"
               )}
               onClick={() => {
                 if (currentTab !== option.key) {
@@ -62,33 +63,34 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
                 }
               }}
             >
-              <div>{t(option.i18n_label)}</div>
-              {currentTab === option.key && (
-                <div className="rounded-full bg-accent-primary/20 px-1.5 py-0.5 text-11 font-semibold text-accent-primary">
-                  {currentCount}
+                  <div>{t(option.i18n_label)}</div>
+                  <div
+                    className={cn(
+                      "rounded-full px-1.5 py-0.5 text-11 font-semibold",
+                      currentTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
+                    )}
+                  >
+                    {count}
                 </div>
-              )}
-              <div
-                className={cn(
-                  "absolute right-0 bottom-0 left-0 rounded-t-md border",
-                  currentTab === option.key ? "border-accent-strong" : "border-transparent"
-                )}
-              />
-            </div>
-          ))}
-        </Header>
+                </button>
+              );
+            })}
+          </div>
+        </div>
 
-        <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
+        <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto px-4 pb-4">
           {filteredRequestIds.length > 0 ? (
-            filteredRequestIds.map((requestId) => (
-              <ExternalContoursListItem
-                key={requestId}
-                setIsMobileSidebar={setIsMobileSidebar}
-                workspaceSlug={workspaceSlug}
-                projectId={projectId}
-                requestId={requestId}
-              />
-            ))
+            <div className="space-y-3">
+              {filteredRequestIds.map((requestId) => (
+                <ExternalContoursListItem
+                  key={requestId}
+                  setIsMobileSidebar={setIsMobileSidebar}
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  requestId={requestId}
+                />
+              ))}
+            </div>
           ) : (
             <div className="flex h-full w-full items-center justify-center">
               {currentTab === EInboxIssueCurrentTab.OPEN ? (