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

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

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

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

@@ -9,23 +9,20 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 
 import useSWR, { mutate } from "swr";
-import { CheckCircle2 } from "lucide-react";
+import { ArrowRight, Bell, CheckCircle2, MailCheck, Sparkles } from "lucide-react";
 // plane imports
 import { ROLE_DETAILS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
 import { Button } from "@plane/propel/button";
-import { PlaneLogo } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 import { truncateText } from "@plane/utils";
-// assets
-import emptyInvitation from "@/app/assets/empty-state/invitation.svg?url";
-// components
-import { EmptyState } from "@/components/common/empty-state";
+import { NodeDCStandaloneShell } from "@/components/nodedc/standalone-shell";
 import { WorkspaceLogo } from "@/components/workspace/logo";
 import { USER_WORKSPACES_LIST } from "@/constants/fetch-keys";
 // hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUser, useUserProfile } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -47,14 +44,29 @@ function UserInvitationsPage() {
   const { data: currentUser } = useUser();
   const { updateUserProfile } = useUserProfile();
 
-  const { fetchWorkspaces } = useWorkspace();
+  const { fetchWorkspaces, workspaces } = useWorkspace();
+  const { unreadNotificationsCount, getUnreadNotificationsCount } = useWorkspaceNotifications();
 
   const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS", () => workspaceService.userWorkspaceInvitations());
+  useSWR(USER_WORKSPACES_LIST, () => fetchWorkspaces());
+
+  const fallbackWorkspaceSlug = Object.values(workspaces ?? {})?.[0]?.slug;
+
+  useSWR(
+    fallbackWorkspaceSlug ? ["STANDALONE_UNREAD_NOTIFICATION_COUNT", fallbackWorkspaceSlug] : null,
+    fallbackWorkspaceSlug ? () => getUnreadNotificationsCount(fallbackWorkspaceSlug) : null
+  );
+
+  const notificationsCount =
+    unreadNotificationsCount.mention_unread_notifications_count > 0
+      ? unreadNotificationsCount.mention_unread_notifications_count
+      : unreadNotificationsCount.total_unread_notifications_count || invitations?.length || 0;
 
   const redirectWorkspaceSlug =
     // currentUserSettings?.workspace?.last_workspace_slug ||
     // currentUserSettings?.workspace?.fallback_workspace_slug ||
     "";
+  const hasInvitations = !!invitations && invitations.length > 0;
 
   const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
     if (action === "accepted") {
@@ -64,7 +76,7 @@ function UserInvitationsPage() {
     }
   };
 
-  const submitInvitations = () => {
+  const submitInvitations = async () => {
     if (invitationsRespond.length === 0) {
       setToast({
         type: TOAST_TYPE.ERROR,
@@ -76,88 +88,102 @@ function UserInvitationsPage() {
 
     setIsJoiningWorkspaces(true);
 
-    workspaceService
-      .joinWorkspaces({ invitations: invitationsRespond })
-      .then(() => {
-        mutate(USER_WORKSPACES_LIST);
-        const firstInviteId = invitationsRespond[0];
-        const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace;
-        updateUserProfile({ last_workspace_id: redirectWorkspace?.id })
-          .then(() => {
-            setIsJoiningWorkspaces(false);
-            fetchWorkspaces().then(() => {
-              router.push(`/${redirectWorkspace?.slug}`);
-            });
-          })
-          .catch(() => {
-            setToast({
-              type: TOAST_TYPE.ERROR,
-              title: t("error"),
-              message: t("something_went_wrong_please_try_again"),
-            });
-            setIsJoiningWorkspaces(false);
-          });
-      })
-      .catch((_err) => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: t("error"),
-          message: t("something_went_wrong_please_try_again"),
-        });
-        setIsJoiningWorkspaces(false);
+    try {
+      await workspaceService.joinWorkspaces({ invitations: invitationsRespond });
+      void mutate(USER_WORKSPACES_LIST);
+      const firstInviteId = invitationsRespond[0];
+      const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace;
+      await updateUserProfile({ last_workspace_id: redirectWorkspace?.id });
+      await fetchWorkspaces();
+      router.push(redirectWorkspace?.slug ? `/${redirectWorkspace.slug}` : "/");
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("something_went_wrong_please_try_again"),
       });
+    } finally {
+      setIsJoiningWorkspaces(false);
+    }
+  };
+
+  const openNotifications = () => {
+    if (fallbackWorkspaceSlug) {
+      router.push(`/${fallbackWorkspaceSlug}?workspaceNotifications=open`);
+      return;
+    }
+
+    router.push("/invitations");
   };
 
   return (
     <AuthenticationWrapper>
-      <div className="flex min-h-screen flex-col bg-surface-1 sm:flex-row">
-        <div className="flex items-center justify-between border-b border-subtle px-5 py-4 sm:w-72 sm:flex-col sm:items-start sm:justify-between sm:border-b-0 sm:px-8 sm:py-8">
-          <Link href="/" className="inline-flex items-center">
-            <PlaneLogo className="h-9 w-auto text-primary" />
-          </Link>
-          <div className="text-13 text-primary sm:pt-6">{currentUser?.email}</div>
-        </div>
+      <NodeDCStandaloneShell
+        notificationsCount={notificationsCount}
+        onOpenNotifications={openNotifications}
+        showUserControls={!!currentUser}
+      >
         {invitations ? (
-          invitations.length > 0 ? (
-            <div className="flex flex-1 items-center justify-center px-6 py-8 sm:px-12 sm:py-12">
-              <div className="w-full max-w-3xl space-y-10">
-                <div className="space-y-3">
-                  <h5 className="text-16">{t("we_see_that_someone_has_invited_you_to_join_a_workspace")}</h5>
-                  <h4 className="text-20 font-semibold">{t("join_a_workspace")}</h4>
+          hasInvitations ? (
+            <div className="flex flex-1 items-center justify-center py-10">
+              <div className="w-full max-w-4xl space-y-7">
+                <div className="nodedc-glass-surface rounded-[2rem] border-0 px-6 py-6 sm:px-8">
+                  <div className="flex flex-wrap items-start justify-between gap-5">
+                    <div className="min-w-0 space-y-3">
+                      <div className="inline-flex items-center gap-2 rounded-full bg-white/6 px-3 py-1.5 text-11 font-semibold tracking-[0.16em] text-[rgb(var(--nodedc-accent-rgb))] uppercase">
+                        <Bell className="size-3.5" />
+                        Новые приглашения
+                      </div>
+                      <div>
+                        <h1 className="text-28 font-semibold tracking-[-0.03em] text-primary">Принять доступ</h1>
+                        <p className="mt-2 max-w-2xl text-13 leading-6 text-secondary">
+                          Выберите рабочие пространства, к которым хотите присоединиться. После принятия Tasker
+                          откроет первый выбранный workspace.
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex size-14 items-center justify-center rounded-[1.15rem] bg-[rgb(var(--nodedc-card-active-rgb))] text-[rgb(var(--nodedc-on-card-active-rgb))]">
+                      <MailCheck className="size-7" />
+                    </div>
+                  </div>
                 </div>
-                <div className="max-h-[45vh] space-y-4 overflow-y-auto md:max-h-[52vh] md:max-w-2xl">
+
+                <div className="max-h-[48vh] space-y-3 overflow-y-auto pr-1 md:max-h-[54vh]">
                   {invitations.map((invitation) => {
                     const isSelected = invitationsRespond.includes(invitation.id);
 
                     return (
-                      <div
+                      <button
+                        type="button"
                         key={invitation.id}
-                        className={`flex cursor-pointer items-center gap-2 rounded-sm border px-3.5 py-5 ${
-                          isSelected ? "border-accent-strong" : "border-subtle hover:bg-layer-1"
+                        className={`group flex w-full cursor-pointer items-center gap-4 rounded-[1.6rem] px-4 py-4 text-left transition ${
+                          isSelected
+                            ? "bg-[rgb(var(--nodedc-card-active-rgb))] text-[rgb(var(--nodedc-on-card-active-rgb))]"
+                            : "nodedc-settings-card hover:bg-white/[0.055]"
                         }`}
                         onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
                       >
-                        <div className="flex-shrink-0">
+                        <div className="flex-shrink-0 rounded-full bg-black/10 p-1">
                           <WorkspaceLogo
                             logo={invitation.workspace.logo_url}
                             name={invitation.workspace.name}
-                            classNames="size-9 flex-shrink-0"
+                            classNames="size-11 flex-shrink-0"
                           />
                         </div>
                         <div className="min-w-0 flex-1">
-                          <div className="text-13 font-medium">{truncateText(invitation.workspace.name, 30)}</div>
-                          <p className="text-11 text-secondary">
+                          <div className="text-15 font-semibold">{truncateText(invitation.workspace.name, 42)}</div>
+                          <p className={`mt-1 text-12 ${isSelected ? "opacity-70" : "text-secondary"}`}>
                             {t(ROLE_DETAILS[invitation.role as keyof typeof ROLE_DETAILS]?.i18n_title || "")}
                           </p>
                         </div>
-                        <span className={`flex-shrink-0 ${isSelected ? "text-accent-primary" : "text-secondary"}`}>
+                        <span className={`flex-shrink-0 ${isSelected ? "opacity-100" : "text-tertiary"}`}>
                           <CheckCircle2 className="h-5 w-5" />
                         </span>
-                      </div>
+                      </button>
                     );
                   })}
                 </div>
-                <div className="flex items-center gap-3">
+                <div className="flex flex-wrap items-center gap-3">
                   <Button
                     variant="primary"
                     type="submit"
@@ -165,13 +191,14 @@ function UserInvitationsPage() {
                     onClick={submitInvitations}
                     disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
                     loading={isJoiningWorkspaces}
+                    className="nodedc-empty-state-primary min-w-[12rem]"
                   >
-                    {t("accept_and_join")}
+                    Принять выбранные
                   </Button>
                   <Link href={`/${redirectWorkspaceSlug}`}>
                     <span>
-                      <Button variant="secondary" size="lg">
-                        {t("go_home")}
+                      <Button variant="secondary" size="lg" className="nodedc-empty-state-secondary">
+                        Вернуться на главную
                       </Button>
                     </span>
                   </Link>
@@ -179,20 +206,32 @@ function UserInvitationsPage() {
               </div>
             </div>
           ) : (
-            <div className="fixed top-0 left-0 grid h-full w-full place-items-center">
-              <EmptyState
-                title={t("no_pending_invites")}
-                description={t("you_can_see_here_if_someone_invites_you_to_a_workspace")}
-                image={emptyInvitation}
-                primaryButton={{
-                  text: t("back_to_home"),
-                  onClick: () => router.push("/"),
-                }}
-              />
+            <div className="flex flex-1 items-center justify-center py-10">
+              <div className="nodedc-glass-surface relative w-full max-w-[34rem] 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))]">
+                  <Sparkles className="size-11" />
+                </div>
+                <div className="mt-6 space-y-2">
+                  <h1 className="text-24 font-semibold tracking-[-0.03em]">Нет ожидающих приглашений</h1>
+                  <p className="mx-auto max-w-sm text-13 leading-6 text-secondary">
+                    Когда вас пригласят в workspace, здесь появится карточка доступа с возможностью принять приглашение.
+                  </p>
+                </div>
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={() => router.push("/")}
+                  className="nodedc-empty-state-primary mt-7"
+                  appendIcon={<ArrowRight className="size-4" />}
+                >
+                  Вернуться на главную
+                </Button>
+              </div>
             </div>
           )
         ) : null}
-      </div>
+      </NodeDCStandaloneShell>
     </AuthenticationWrapper>
   );
 }

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>
+  );
+}