UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: корректный flow уведомлений Tasker

plane-src/apps/web/app/(all)/workspace-invitations/layout.tsx

@@ -11,4 +11,4 @@ export default function WorkspaceInvitationsLayout() {
   return <Outlet />;
 }
 
-export const meta: Route.MetaFunction = () => [{ title: "Workspace Invitations" }];
+export const meta: Route.MetaFunction = () => [{ title: "Workspace приглашение - NODE.DC Tasker" }];

plane-src/apps/web/app/(all)/workspace-invitations/page.tsx

@@ -5,13 +5,14 @@
  */
 
 import { observer } from "mobx-react";
+import type { ReactNode } from "react";
 import { useSearchParams } from "next/navigation";
 import useSWR from "swr";
-import { Boxes, User2 } from "lucide-react";
-import { CheckIcon, CloseIcon } from "@plane/propel/icons";
+import { ArrowRight, Check, MailCheck, X } from "lucide-react";
+import { Button } from "@plane/propel/button";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
-import { EmptySpace, EmptySpaceItem } from "@/components/ui/empty-space";
+import { NodeDCStandaloneShell } from "@/components/nodedc/standalone-shell";
 // constants
 import { WORKSPACE_INVITATION } from "@/constants/fetch-keys";
 // helpers
@@ -45,82 +46,140 @@ function WorkspaceInvitationPage() {
       : null
   );
 
-  const handleAccept = () => {
+  const handleAccept = async () => {
     if (!invitationDetail) return;
-    workspaceService
-      .joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, {
+    try {
+      await workspaceService.joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, {
         accepted: true,
         token: token,
-      })
-      .then(() => {
-        if (invitationDetail.email === currentUser?.email) {
-          router.push(`/${invitationDetail.workspace.slug}`);
-        } else {
-          router.push("/");
-        }
-      })
-      .catch((err: unknown) => console.error(err));
+      });
+      router.push(invitationDetail.email === currentUser?.email ? `/${invitationDetail.workspace.slug}` : "/");
+    } catch (err: unknown) {
+      console.error(err);
+    }
   };
 
-  const handleReject = () => {
+  const handleReject = async () => {
     if (!invitationDetail || !token) return;
-    void workspaceService
-      .joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, {
+    try {
+      await workspaceService.joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, {
         accepted: false,
         token: token,
-      })
-      .then(() => {
-        router.push("/");
-      })
-      .catch((err: unknown) => console.error(err));
+      });
+      router.push("/");
+    } catch (err: unknown) {
+      console.error(err);
+    }
   };
 
   return (
     <AuthenticationWrapper pageType={EPageTypes.PUBLIC}>
-      <div className="flex h-full w-full flex-col items-center justify-center px-3">
+      <NodeDCStandaloneShell showUserControls={!!currentUser}>
         {invitationDetail && !invitationDetail.responded_at ? (
           error ? (
-            <div className="shadow-2xl flex w-full flex-col space-y-4 rounded-sm border border-subtle bg-surface-1 px-4 py-8 text-center md:w-1/3">
-              <h2 className="text-18 uppercase">INVITATION NOT FOUND</h2>
-            </div>
+            <InvitationShell
+              title="Приглашение не найдено"
+              description="Ссылка устарела или была отозвана администратором workspace."
+              action={<HomeButton routerPush={() => router.push("/")} />}
+            />
           ) : (
-            <EmptySpace
-              title={`You have been invited to ${invitationDetail.workspace.name}`}
-              description="Your workspace is where you'll create projects, collaborate on your work items, and organize different streams of work in your NODE.DC account."
-            >
-              <EmptySpaceItem Icon={CheckIcon} title="Accept" action={handleAccept} />
-              <EmptySpaceItem Icon={CloseIcon} title="Ignore" action={handleReject} />
-            </EmptySpace>
+            <InvitationShell
+              eyebrow="Workspace invite"
+              title={`Вас пригласили в ${invitationDetail.workspace.name}`}
+              description="Примите приглашение, чтобы получить доступ к workspace и связанным проектам Tasker."
+              action={
+                <div className="flex flex-wrap justify-center gap-3">
+                  <Button
+                    variant="primary"
+                    size="lg"
+                    onClick={handleAccept}
+                    className="nodedc-empty-state-primary"
+                    prependIcon={<Check className="size-4" />}
+                  >
+                    Принять
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="lg"
+                    onClick={handleReject}
+                    className="nodedc-empty-state-secondary"
+                    prependIcon={<X className="size-4" />}
+                  >
+                    Отклонить
+                  </Button>
+                </div>
+              }
+            />
           )
         ) : error || invitationDetail?.responded_at ? (
           invitationDetail?.accepted ? (
-            <EmptySpace
-              title={`You are already a member of ${invitationDetail.workspace.name}`}
-              description="Your workspace is where you'll create projects, collaborate on your work items, and organize different streams of work in your NODE.DC account."
-            >
-              <EmptySpaceItem Icon={Boxes} title="Continue to home" href="/" />
-            </EmptySpace>
+            <InvitationShell
+              title={`Вы уже участник ${invitationDetail.workspace.name}`}
+              description="Приглашение принято. Можно вернуться в Tasker и продолжить работу."
+              action={<HomeButton routerPush={() => router.push("/")} />}
+            />
           ) : (
-            <EmptySpace
-              title="This invitation link is not active anymore."
-              description="Your workspace is where you'll create projects, collaborate on your work items, and organize different streams of work in your NODE.DC account."
-              link={{ text: "Or start from an empty project", href: "/" }}
-            >
-              {!currentUser ? (
-                <EmptySpaceItem Icon={User2} title="Sign in to continue" href="/" />
-              ) : (
-                <EmptySpaceItem Icon={Boxes} title="Continue to home" href="/" />
-              )}
-            </EmptySpace>
+            <InvitationShell
+              title="Ссылка приглашения больше не активна"
+              description={
+                currentUser
+                  ? "Вернитесь на главную страницу Tasker или запросите новое приглашение."
+                  : "Войдите через NODE.DC и запросите новое приглашение, если доступ всё ещё нужен."
+              }
+              action={<HomeButton routerPush={() => router.push("/")} />}
+            />
           )
         ) : (
-          <div className="flex h-full w-full items-center justify-center">
+          <div className="relative z-[1] flex h-full w-full items-center justify-center">
             <LogoSpinner />
           </div>
         )}
-      </div>
+      </NodeDCStandaloneShell>
     </AuthenticationWrapper>
   );
 }
 
 export default observer(WorkspaceInvitationPage);
+
+function InvitationShell({
+  action,
+  description,
+  eyebrow = "NODE.DC Tasker",
+  title,
+}: {
+  action: ReactNode;
+  description: string;
+  eyebrow?: string;
+  title: string;
+}) {
+  return (
+    <div className="nodedc-glass-surface relative z-[1] w-full max-w-[36rem] overflow-hidden rounded-[2.2rem] px-8 py-9 text-center">
+      <div className="pointer-events-none absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-[rgb(var(--nodedc-accent-rgb))]/55 to-transparent" />
+      <div className="mx-auto flex size-24 items-center justify-center rounded-[2rem] bg-white/[0.035] text-[rgb(var(--nodedc-accent-rgb))]">
+        <MailCheck className="size-11" />
+      </div>
+      <div className="mt-6 space-y-2">
+        <div className="text-11 font-semibold tracking-[0.18em] text-[rgb(var(--nodedc-accent-rgb))] uppercase">
+          {eyebrow}
+        </div>
+        <h1 className="text-24 font-semibold tracking-[-0.03em]">{title}</h1>
+        <p className="mx-auto max-w-sm text-13 leading-6 text-secondary">{description}</p>
+      </div>
+      <div className="mt-7">{action}</div>
+    </div>
+  );
+}
+
+function HomeButton({ routerPush }: { routerPush: () => void }) {
+  return (
+    <Button
+      variant="primary"
+      size="lg"
+      onClick={routerPush}
+      className="nodedc-empty-state-primary"
+      appendIcon={<ArrowRight className="size-4" />}
+    >
+      Вернуться на главную
+    </Button>
+  );
+}