UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: упрощение верхней шапки God Mode

plane-src/apps/admin/app/(all)/(dashboard)/layout.tsx

@@ -16,7 +16,6 @@ import { NewUserPopup } from "@/components/common/new-user-popup";
 import { useUser } from "@/hooks/store";
 // local components
 import type { Route } from "./+types/layout";
-import { AdminSidebar } from "./sidebar";
 
 function AdminLayout(_props: Route.ComponentProps) {
   // router
@@ -39,7 +38,6 @@ function AdminLayout(_props: Route.ComponentProps) {
   if (isUserLoggedIn) {
     return (
       <div className="nodedc-admin-shell relative flex h-screen w-screen overflow-hidden">
-        <AdminSidebar />
         <main className="nodedc-admin-main relative flex h-full w-full flex-col overflow-hidden bg-surface-1">
           <AdminHeader />
           <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-scroll">

plane-src/apps/admin/app/assets/logos/nodedc-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220.82 54.55" role="img" aria-label="NODE.DC"><path fill="#e2e1e1" d="M52.8 23.61 46.92 33.76 41.05 23.61H52.8m18-10.39H23.06l23.86 41.33Z"/><path fill="#e2e1e1" d="M31.28 33.13 18.11 10.34h57.62L62.59 33.13h11.69L93.22 0H0l19.61 33.13h11.67Z"/><path fill="#dbdbdb" stroke="#dbdbdb" stroke-miterlimit="10" stroke-width=".75" d="M116.35 18.49V1h1.27l10.34 15V1h1.33v17.49H128l-10.34-15v15Zm24.08.15c-4.79 0-8.16-3.72-8.16-8.89S135.64.86 140.43.86s8.17 3.72 8.17 8.89-3.35 8.89-8.17 8.89Zm0-1.25c4 0 6.79-3.17 6.79-7.64s-2.77-7.64-6.79-7.64-6.77 3.17-6.77 7.64 2.78 7.64 6.77 7.64Zm11.17 1.1V1h5.1c5.54 0 8.79 3.42 8.79 8.74s-3.25 8.74-8.79 8.74Zm1.4-1.25h3.75c4.77 0 7.42-2.92 7.42-7.49s-2.65-7.49-7.42-7.49H153Zm15.49-16.24h10.77v1.26h-9.42v6.67h7.89v1.25h-7.89v7.06h9.74v1.25h-11.09Zm20.39 17.49V1H194c5.54 0 8.79 3.42 8.79 8.74s-3.25 8.74-8.79 8.74Zm1.35-1.25H194c4.77 0 7.41-2.92 7.41-7.49S198.75 2.26 194 2.26h-3.75Zm14.92-7.49c0-5.24 3.19-8.89 8.11-8.89a6.8 6.8 0 0 1 7.1 5.52h-1.43a5.54 5.54 0 0 0-5.74-4.27c-4.05 0-6.64 3.17-6.64 7.64s2.54 7.64 6.59 7.64a5.46 5.46 0 0 0 5.74-4.29h1.43c-.75 3.52-3.4 5.54-7.15 5.54-4.89 0-8.01-3.59-8.01-8.89Z"/></svg>

plane-src/apps/admin/components/common/header/index.tsx

@@ -4,82 +4,179 @@
  * See the LICENSE file for details.
  */
 
-import { Fragment } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { observer } from "mobx-react";
+import { useTheme as useNextTheme } from "next-themes";
+import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ChevronRight, Menu, Settings } from "lucide-react";
-// components
-import { BreadcrumbLink } from "../breadcrumb-link";
+import { BrainCog, ChevronDown, ExternalLink, Image, LogOut, Mail, Palette, Settings, UserCog2 } from "lucide-react";
+import { Menu, Transition } from "@headlessui/react";
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { LockIcon, WorkspaceIcon } from "@plane/propel/icons";
+import { AuthService } from "@plane/services";
+import { Avatar } from "@plane/ui";
+import { cn, getFileURL } from "@plane/utils";
+// assets
+import NodeDcLogo from "@/app/assets/logos/nodedc-logo.svg?url";
 // hooks
-import { useTheme } from "@/hooks/store";
+import { useUser } from "@/hooks/store";
 // local imports
-import { CORE_HEADER_SEGMENT_LABELS } from "./core";
-import { EXTENDED_HEADER_SEGMENT_LABELS } from "./extended";
 
-export const HamburgerToggle = observer(function HamburgerToggle() {
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
-  return (
-    <button
-      className="group flex size-7 cursor-pointer items-center justify-center rounded-sm bg-layer-1 transition-all hover:bg-layer-1-hover md:hidden"
-      aria-label="Открыть меню"
-      onClick={() => toggleSidebar(!isSidebarCollapsed)}
-    >
-      <Menu size={14} className="text-secondary transition-all group-hover:text-primary" />
-    </button>
-  );
-});
+const authService = new AuthService();
 
-const HEADER_SEGMENT_LABELS = {
-  ...CORE_HEADER_SEGMENT_LABELS,
-  ...EXTENDED_HEADER_SEGMENT_LABELS,
-};
+const PRIMARY_NAVIGATION = [
+  { label: "Основное", href: "/general/", Icon: Settings },
+  { label: "Почта", href: "/email/", Icon: Mail },
+  { label: "Аутентификация", href: "/authentication/", Icon: LockIcon },
+  { label: "Воркспейсы", href: "/workspace/", Icon: WorkspaceIcon },
+];
+
+const FEATURE_NAVIGATION = [
+  { label: "ИИ", href: "/ai/", Icon: BrainCog, description: "OpenAI модель и API-ключ" },
+  { label: "Изображения", href: "/image/", Icon: Image, description: "Внешние библиотеки изображений" },
+];
 
 export const AdminHeader = observer(function AdminHeader() {
   const pathName = usePathname();
+  const { currentUser, signOut } = useUser();
+  const { resolvedTheme, setTheme } = useNextTheme();
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
 
-  // Function to dynamically generate breadcrumb items based on pathname
-  const generateBreadcrumbItems = (pathname: string) => {
-    const pathSegments = pathname.split("/").slice(1); // removing the first empty string.
-    pathSegments.pop();
+  const isFeatureRoute = FEATURE_NAVIGATION.some((item) => pathName?.startsWith(item.href));
+  const adminName = currentUser?.display_name || currentUser?.email || "Глобальный админ";
+  const avatarName = currentUser?.display_name || currentUser?.email || "DC";
 
-    let currentUrl = "";
-    const breadcrumbItems = pathSegments.map((segment) => {
-      currentUrl += "/" + segment;
-      return {
-        title: HEADER_SEGMENT_LABELS[segment] ?? segment.toUpperCase(),
-        href: currentUrl,
-      };
-    });
-    return breadcrumbItems;
+  const handleThemeSwitch = () => {
+    const newTheme = resolvedTheme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
   };
 
-  const breadcrumbItems = generateBreadcrumbItems(pathName || "");
+  useEffect(() => {
+    if (csrfToken === undefined)
+      void authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
 
   return (
-    <div className="nodedc-admin-header nodedc-glass-modal relative z-10 flex h-header w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-subtle bg-surface-1 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <HamburgerToggle />
-        {breadcrumbItems.length >= 0 && (
-          <nav className="min-w-0" aria-label="Навигация God Mode">
-            <ol className="nodedc-admin-breadcrumbs">
-              <BreadcrumbLink href="/general/" label="Настройки" icon={<Settings className="h-4 w-4" />} />
-              {breadcrumbItems.map((item, index) => {
-                if (!item.title) return null;
-                const isCurrent = index === breadcrumbItems.length - 1;
+    <header className="nodedc-admin-header relative z-30 flex w-full flex-shrink-0 flex-col gap-4">
+      <div className="nodedc-admin-header-top grid w-full items-center gap-4">
+        <a href="/" className="nodedc-admin-logo-link inline-flex w-fit items-center" aria-label="NODE.DC">
+          <img src={NodeDcLogo} alt="NODE.DC" className="nodedc-admin-logo" />
+        </a>
 
-                return (
-                  <Fragment key={`${item.href}-${item.title}`}>
-                    <li className="nodedc-admin-breadcrumb-separator" aria-hidden="true">
-                      <ChevronRight className="size-4" />
-                    </li>
-                    <BreadcrumbLink href={item.href} label={item.title} isCurrent={isCurrent} />
-                  </Fragment>
-                );
-              })}
-            </ol>
-          </nav>
-        )}
+        <nav className="nodedc-admin-top-nav justify-self-center" aria-label="Основная навигация God Mode">
+          {PRIMARY_NAVIGATION.map((item) => {
+            const isActive = item.href === pathName || Boolean(pathName?.startsWith(item.href));
+            return (
+              <Link key={item.href} href={item.href} className="nodedc-admin-top-nav-item" data-active={isActive}>
+                <item.Icon className="size-3.5 stroke-[1.7]" />
+                <span>{item.label}</span>
+              </Link>
+            );
+          })}
+
+          <Menu as="div" className="relative">
+            <Menu.Button className="nodedc-admin-top-nav-item" data-active={isFeatureRoute}>
+              <BrainCog className="size-3.5 stroke-[1.7]" />
+              <span>Возможности</span>
+              <ChevronDown className="size-3 stroke-[2]" />
+            </Menu.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items className="nodedc-glass-popup-surface absolute top-full left-1/2 z-[120] mt-3 flex w-64 -translate-x-1/2 flex-col gap-1 p-2 outline-none">
+                {FEATURE_NAVIGATION.map((item) => {
+                  const isActive = item.href === pathName || Boolean(pathName?.startsWith(item.href));
+                  return (
+                    <Menu.Item key={item.href}>
+                      {({ active }) => (
+                        <Link
+                          href={item.href}
+                          className={cn("nodedc-admin-feature-menu-item", {
+                            "is-active": isActive,
+                            "is-hovered": active,
+                          })}
+                        >
+                          <span className="grid size-9 place-items-center rounded-full bg-white/6">
+                            <item.Icon className="size-4 stroke-[1.7]" />
+                          </span>
+                          <span className="min-w-0">
+                            <span className="block truncate text-13 font-medium text-primary">{item.label}</span>
+                            <span className="block truncate text-11 text-tertiary">{item.description}</span>
+                          </span>
+                        </Link>
+                      )}
+                    </Menu.Item>
+                  );
+                })}
+              </Menu.Items>
+            </Transition>
+          </Menu>
+
+          <a href="/" className="nodedc-admin-top-nav-item">
+            <ExternalLink className="size-3.5 stroke-[1.7]" />
+            <span>В приложение</span>
+          </a>
+        </nav>
+
+        <Menu as="div" className="relative justify-self-end">
+          <Menu.Button className="nodedc-admin-user-button">
+            <span className="min-w-0 text-right">
+              <span className="block max-w-40 truncate text-14 font-medium text-primary">{adminName}</span>
+            </span>
+            <span className="grid size-10 place-items-center rounded-full bg-white/7">
+              {currentUser ? (
+                <Avatar
+                  name={avatarName}
+                  src={getFileURL(currentUser.avatar_url)}
+                  size={32}
+                  shape="circle"
+                  className="!text-body-sm-medium"
+                />
+              ) : (
+                <UserCog2 className="size-5 text-[rgb(var(--nodedc-card-active-rgb))]" />
+              )}
+            </span>
+          </Menu.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="nodedc-glass-popup-surface absolute top-full right-0 z-[120] mt-3 flex w-60 flex-col divide-y divide-white/6 p-2 text-12 outline-none">
+              <div className="flex flex-col gap-1 px-2 pb-2">
+                <span className="truncate text-13 font-medium text-primary">{adminName}</span>
+                <span className="truncate text-11 text-tertiary">{currentUser?.email}</span>
+              </div>
+              <div className="py-2">
+                <Menu.Item as="button" type="button" className="nodedc-admin-menu-action" onClick={handleThemeSwitch}>
+                  <Palette className="h-4 w-4 stroke-[1.5]" />
+                  {resolvedTheme === "dark" ? "Светлая тема" : "Темная тема"}
+                </Menu.Item>
+              </div>
+              <div className="py-2">
+                <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`} onSubmit={signOut}>
+                  <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+                  <Menu.Item as="button" type="submit" className="nodedc-admin-menu-action">
+                    <LogOut className="h-4 w-4 stroke-[1.5]" />
+                    Выйти
+                  </Menu.Item>
+                </form>
+              </div>
+            </Menu.Items>
+          </Transition>
+        </Menu>
       </div>
-    </div>
+    </header>
   );
 });

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

@@ -126,8 +126,7 @@ body {
 
   .nodedc-technical-confirm-modal {
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.048) 0%, rgba(255, 255, 255, 0.014) 100%),
-      rgba(6, 6, 8, 0.76) !important;
+      linear-gradient(180deg, rgba(255, 255, 255, 0.048) 0%, rgba(255, 255, 255, 0.014) 100%), rgba(6, 6, 8, 0.76) !important;
     -webkit-backdrop-filter: blur(54px) saturate(130%);
     backdrop-filter: blur(54px) saturate(130%);
     box-shadow:
@@ -151,8 +150,7 @@ body {
     border: 0 !important;
     border-radius: 1.25rem !important;
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
-      rgba(8, 8, 11, 0.92) !important;
+      linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%), rgba(8, 8, 11, 0.92) !important;
     padding: 0.75rem !important;
     -webkit-backdrop-filter: blur(44px);
     backdrop-filter: blur(44px);
@@ -183,11 +181,133 @@ body {
   }
 
   .nodedc-admin-header {
-    min-height: 4.25rem;
+    min-height: 5.75rem;
     border: 0 !important;
-    border-radius: 0 0 1.35rem 1.35rem;
-    margin: 0.65rem 0.75rem 0;
-    width: calc(100% - 1.5rem) !important;
+    background: transparent !important;
+    padding: 1.75rem clamp(1.25rem, 3vw, 2.75rem) 0.5rem !important;
+  }
+
+  .nodedc-admin-header-top {
+    grid-template-columns: minmax(11rem, 1fr) auto minmax(11rem, 1fr);
+  }
+
+  .nodedc-admin-logo {
+    display: block;
+    width: 9.25rem;
+    height: auto;
+  }
+
+  .nodedc-admin-top-nav {
+    display: inline-flex;
+    max-width: min(100%, 48rem);
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    border-radius: 999px;
+    background: transparent !important;
+    padding: 0;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  .nodedc-admin-top-nav-item {
+    display: inline-flex;
+    min-height: 2.35rem;
+    align-items: center;
+    justify-content: center;
+    gap: 0.45rem;
+    border: 0 !important;
+    border-radius: 999px !important;
+    background: transparent !important;
+    color: rgba(255, 255, 255, 0.72) !important;
+    padding: 0.55rem 0.85rem !important;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    box-shadow: none !important;
+    transition:
+      background-color 160ms ease,
+      color 160ms ease,
+      transform 160ms ease;
+  }
+
+  .nodedc-admin-top-nav-item:hover {
+    background: rgba(255, 255, 255, 0.045) !important;
+    color: var(--text-color-primary) !important;
+  }
+
+  .nodedc-admin-top-nav-item[data-active="true"] {
+    background: rgba(255, 255, 255, 0.94) !important;
+    color: #08090b !important;
+  }
+
+  .nodedc-admin-top-nav-item[data-active="true"] * {
+    color: #08090b !important;
+  }
+
+  .nodedc-admin-feature-menu-item {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 0.75rem;
+    border-radius: 1rem;
+    padding: 0.65rem;
+    color: rgba(255, 255, 255, 0.74);
+    transition:
+      background-color 160ms ease,
+      color 160ms ease;
+  }
+
+  .nodedc-admin-feature-menu-item.is-hovered,
+  .nodedc-admin-feature-menu-item:hover {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text-color-primary);
+  }
+
+  .nodedc-admin-feature-menu-item.is-active {
+    background: rgba(255, 255, 255, 0.09);
+  }
+
+  .nodedc-admin-feature-menu-item.is-active svg {
+    color: rgb(var(--nodedc-accent-rgb));
+  }
+
+  .nodedc-admin-user-button {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    border: 0 !important;
+    border-radius: 999px !important;
+    background: transparent !important;
+    padding: 0 !important;
+    box-shadow: none !important;
+  }
+
+  .nodedc-admin-user-button:hover > span:last-child {
+    background: rgba(255, 255, 255, 0.11) !important;
+  }
+
+  .nodedc-admin-menu-action {
+    display: flex;
+    min-height: 2.35rem;
+    width: 100%;
+    align-items: center;
+    gap: 0.55rem;
+    border-radius: 0.9rem !important;
+    padding: 0.55rem 0.65rem !important;
+    color: rgba(255, 255, 255, 0.72) !important;
+    text-align: left;
+    transition:
+      background-color 160ms ease,
+      color 160ms ease;
+  }
+
+  .nodedc-admin-menu-action:hover {
+    background: rgba(255, 255, 255, 0.06) !important;
+    color: var(--text-color-primary) !important;
   }
 
   .nodedc-admin-breadcrumbs {
@@ -198,14 +318,13 @@ body {
   }
 
   .nodedc-admin-breadcrumb-pill {
-    min-height: 2.5rem;
+    min-height: 2.2rem;
     border: 0 !important;
-    border-radius: 1.25rem !important;
+    border-radius: 999px !important;
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.036) 0%, rgba(255, 255, 255, 0.014) 100%),
-      rgba(255, 255, 255, 0.04) !important;
+      linear-gradient(180deg, rgba(255, 255, 255, 0.036) 0%, rgba(255, 255, 255, 0.014) 100%), rgba(255, 255, 255, 0.04) !important;
     color: rgba(255, 255, 255, 0.72) !important;
-    padding: 0.55rem 0.9rem !important;
+    padding: 0.5rem 0.8rem !important;
     box-shadow: none !important;
     transition:
       background-color 160ms ease,
@@ -214,8 +333,7 @@ body {
 
   .nodedc-admin-breadcrumb-pill:hover {
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.018) 100%),
-      rgba(255, 255, 255, 0.065) !important;
+      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.018) 100%), rgba(255, 255, 255, 0.065) !important;
     color: var(--text-color-primary) !important;
   }
 
@@ -232,7 +350,7 @@ body {
   }
 
   .nodedc-page {
-    padding: 1rem 0 1.5rem;
+    padding: 0.5rem 0 1.5rem;
   }
 
   .nodedc-page-header {
@@ -268,8 +386,7 @@ body {
     border: 0 !important;
     border-radius: 1.35rem !important;
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.044) 0%, rgba(255, 255, 255, 0.016) 100%),
-      rgba(255, 255, 255, 0.04) !important;
+      linear-gradient(180deg, rgba(255, 255, 255, 0.044) 0%, rgba(255, 255, 255, 0.016) 100%), rgba(255, 255, 255, 0.04) !important;
     box-shadow: none !important;
     -webkit-backdrop-filter: blur(18px);
     backdrop-filter: blur(18px);
@@ -279,8 +396,7 @@ body {
     border: 0 !important;
     border-radius: 0.65rem !important;
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.014) 100%),
-      rgba(0, 0, 0, 0.32) !important;
+      linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.014) 100%), rgba(0, 0, 0, 0.32) !important;
     color: rgb(var(--nodedc-accent-rgb)) !important;
     box-shadow: none !important;
   }
@@ -335,8 +451,7 @@ body {
 
   .nodedc-admin-sidebar-action:hover {
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.018) 100%),
-      rgba(255, 255, 255, 0.07) !important;
+      linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.018) 100%), rgba(255, 255, 255, 0.07) !important;
     color: var(--text-color-primary) !important;
   }
 
@@ -490,8 +605,7 @@ body {
     border: 0 !important;
     border-radius: 1.25rem !important;
     background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.022) 100%),
-      rgba(255, 255, 255, 0.055) !important;
+      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.022) 100%), rgba(255, 255, 255, 0.055) !important;
     color: rgba(255, 255, 255, 0.76) !important;
     box-shadow: none !important;
     padding-inline: 1.25rem !important;
@@ -568,4 +682,41 @@ body {
     background: rgba(255, 255, 255, 0.08) !important;
     color: rgb(var(--nodedc-card-active-rgb)) !important;
   }
+
+  @media (max-width: 1180px) {
+    .nodedc-admin-header {
+      min-height: 8.25rem;
+    }
+
+    .nodedc-admin-header-top {
+      grid-template-columns: 1fr auto;
+    }
+
+    .nodedc-admin-top-nav {
+      grid-column: 1 / -1;
+      grid-row: 2;
+      justify-self: start;
+      overflow-x: auto;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .nodedc-admin-header {
+      min-height: 10.5rem;
+      padding-inline: 1rem !important;
+    }
+
+    .nodedc-admin-header-top {
+      grid-template-columns: 1fr;
+    }
+
+    .nodedc-admin-top-nav {
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    .nodedc-admin-user-button {
+      justify-self: start;
+    }
+  }
 }