feat: show popover if user can't create a project

packages/ui/src/blocks/notification-hub/notification-hub.tsx

@@ -63,7 +63,6 @@ export function NotificationHub(): JSX.Element {
                     await refechMessages();
                   }}
                   onClickDelete={async (messageId) => {
-                    console.log('Clicking delete');
                     await deleteNotificationMessage({ messageId });
                     refechMessages();
                   }}

packages/ui/src/pages/dashboard/create-project-button.tsx

@@ -0,0 +1,96 @@
+import { isENVProd } from '@chirpy-dev/utils';
+import * as React from 'react';
+
+import {
+  Button,
+  Heading,
+  IconPlusCircle,
+  Popover,
+  Text,
+} from '../../components';
+import { useCurrentUser } from '../../contexts';
+
+export type CreateProjectButtonProps = {
+  projectCount?: number;
+  onCreateProject: () => void;
+};
+
+export function CreateProjectButton(
+  props: CreateProjectButtonProps,
+): JSX.Element {
+  const { data } = useCurrentUser();
+  // let disabledType: DisabledType | undefined = 'maintenanceMode';
+  let disabledType: DisabledType | undefined;
+  if (isENVProd && (props.projectCount || 0) > 0) {
+    disabledType = 'projectLimit';
+  } else if (!data.email) {
+    disabledType = 'anonymous';
+  } else if (process.env.NEXT_PUBLIC_MAINTENANCE_MODE) {
+    disabledType = 'maintenanceMode';
+  }
+  const createButtonProps = {
+    variant: 'solid',
+    color: 'primary',
+    className: 'space-x-1',
+  } as const;
+  const createButtonChildren = (
+    <>
+      <IconPlusCircle size={18} />
+      <span>Create project</span>
+    </>
+  );
+  return (
+    <>
+      {disabledType ? (
+        <Popover>
+          <Popover.Button {...createButtonProps}>
+            {createButtonChildren}
+          </Popover.Button>
+          <Popover.Panel type="alert" placement="bottomEnd">
+            {DISABLED_MESSAGE_MAP[disabledType]}
+          </Popover.Panel>
+        </Popover>
+      ) : (
+        <Button onClick={props.onCreateProject} {...createButtonProps}>
+          {createButtonChildren}
+        </Button>
+      )}
+    </>
+  );
+}
+
+type DisabledType = 'anonymous' | 'projectLimit' | 'maintenanceMode';
+const DISABLED_MESSAGE_MAP: Record<DisabledType, JSX.Element> = {
+  anonymous: (
+    <section className="w-[24rem]">
+      <Heading as="h5" className="font-bold">
+        Connect an email with your account
+      </Heading>
+      <Text className="mt-2" variant="secondary">
+        Otherwise, you may lose access to your project after creation. You can
+        re-sign in with your email or social media account.
+      </Text>
+    </section>
+  ),
+  projectLimit: (
+    <section className="w-[24rem]">
+      <Heading as="h5" className="font-bold">
+        Reached the maximum number of projects
+      </Heading>
+      <Text className="mt-2" variant="secondary">
+        You can delete an existing project to create a new one.
+      </Text>
+    </section>
+  ),
+  maintenanceMode: (
+    <section className="w-[24rem]">
+      <Heading as="h5" className="font-bold">
+        System maintenance mode
+      </Heading>
+      <Text className="mt-2" variant="secondary">
+        All editing actions are disabled during this period, Please check back
+        in a little while and try again.
+      </Text>
+    </section>
+  ),
+};

packages/ui/src/pages/dashboard/index.tsx

@@ -15,11 +15,13 @@ import {
   Spinner,
   TextField,
   Text,
+  Heading,
 } from '../../components';
 import { useCurrentUser } from '../../contexts';
 import { useForm } from '../../hooks';
 import { isValidDomain } from '../../utilities';
 import { trpcClient } from '../../utilities/trpc-client';
+import { CreateProjectButton } from './create-project-button';
 
 type FormFields = {
   name: string;
@@ -71,41 +73,16 @@ export function Dashboard(): JSX.Element {
       fetchUserProjects();
     },
   );
-  const disableCreation = isENVProd && (projects?.length || 0) > 0;
-  const isAnonymousUser = !!data.email;
 
   return (
     <SiteLayout title="Dashboard">
       <section className="space-y-10">
         <div className="flex flex-col items-start space-y-5 sm:flex-row sm:justify-between sm:space-x-2 sm:space-y-0">
           <PageTitle>Dashboard</PageTitle>
-          <Popover>
-            <Popover.Button
-              onClick={handleCreateProject}
-              variant="solid"
-              color="primary"
-              className="space-x-1"
-              disabled={
-                disableCreation || !!process.env.NEXT_PUBLIC_MAINTENANCE_MODE
-              }
-            >
-              <IconPlusCircle size={18} />
-              <span>Create project</span>
-            </Popover.Button>
-            <Popover.Panel>
-              {isAnonymousUser && (
-                <div>
-                  <Text>
-                    Sorry, you need an email with your account to create a
-                    project. Otherwise, you may lose access to your project.
-                  </Text>
-                  <Text>
-                    You can re-sign in with your email or social media account
-                  </Text>
-                </div>
-              )}
-            </Popover.Panel>
-          </Popover>
+          <CreateProjectButton
+            projectCount={projects?.length}
+            onCreateProject={handleCreateProject}
+          />
         </div>
         {projects?.length ? (
           <div className="flex flex-row">