style: pages UI (#769)

* style: pages ui

* chore: added toast alert and tooltip

* fix: fixed issues in pages block

* fix: ai buttons inside pages block

apps/app/components/cycles/modal.tsx

@@ -23,7 +23,6 @@ import {
   CYCLE_DRAFT_LIST,
   CYCLE_INCOMPLETE_LIST,
 } from "constants/fetch-keys";
-import { IncomingMessage } from "http";
 
 type CycleModalProps = {
   isOpen: boolean;

apps/app/components/pages/create-update-block-inline.tsx

@@ -1,9 +1,17 @@
+import React, { useCallback, useEffect, useState } from "react";
+
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
 
-import { mutate } from "swr";
+import useSWR, { mutate } from "swr";
 
-import { SparklesIcon } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
+import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
+import {
+  BoltIcon,
+  SparklesIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
@@ -12,22 +20,24 @@ import pagesService from "services/pages.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Loader, PrimaryButton, SecondaryButton, CustomMenu, TextArea } from "components/ui";
 // types
 import { IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
-import { useCallback, useEffect } from "react";
 import issuesService from "services/issues.service";
+import aiService from "services/ai.service";
 
 type Props = {
   handleClose: () => void;
   data?: IPageBlock;
   setIsSyncing?: React.Dispatch<React.SetStateAction<boolean>>;
   focus?: keyof IPageBlock;
-  handelAutoGenerateDescription?: () => Promise<void>;
-  iAmFeelingLucky?: boolean;
   setGptAssistantModal: () => void;
+  handleBlockSync?: () => void;
+  handleCopyText?: () => void;
+  pushBlockIntoIssues?: () => void;
+  deletePageBlock?: () => void;
 };
 
 const defaultValues = {
@@ -49,10 +59,15 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   data,
   setIsSyncing,
   focus,
-  handelAutoGenerateDescription,
   setGptAssistantModal,
-  iAmFeelingLucky,
+  handleBlockSync,
+  handleCopyText,
+  pushBlockIntoIssues,
+  deletePageBlock,
 }) => {
+
+  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
+
   const router = useRouter();
   const { workspaceSlug, projectId, pageId } = router.query;
 
@@ -141,6 +156,46 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
       .finally(() => onClose());
   };
 
+  const handleAutoGenerateDescription = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIAmFeelingLucky(true);
+
+    aiService
+      .createGptTask(workspaceSlug as string, projectId as string, {
+        prompt: watch("name"),
+        task: "Generate a proper description for this issue in context of a project management software.",
+      })
+      .then((res) => {
+        if (res.response === "")
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "Block title isn't informative enough to generate the description. Please try with a different title.",
+          });
+        else {
+          setValue("description", {});
+          setValue("description_html", `${watch("description_html")}<p>${res.response}</p>`);
+        }
+      })
+      .catch((err) => {
+        if (err.status === 429)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have reached the maximum number of requests of 50 requests per month per user.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Some error occurred. Please try again.",
+          });
+      }).finally(()=>setIAmFeelingLucky(false));
+  };
+
   useEffect(() => {
     if (focus) setFocus(focus);
 
@@ -167,49 +222,82 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   }, [handleClose]);
 
   return (
-    <div className="border rounded-[10px] p-2 ml-6">
-      <form onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}>
-        <Input
-          id="name"
-          name="name"
-          placeholder="Title"
-          register={register}
-          className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base ring-0 -ml-2 focus:ring-gray-200"
-          role="textbox"
-          autoComplete="off"
-          maxLength={255}
-        />
-        <div className="page-block-section font relative -mx-3 -mt-3">
-          <Controller
-            name="description"
-            control={control}
-            render={({ field: { value } }) => (
-              <RemirrorRichTextEditor
-                value={
-                  !value || (typeof value === "object" && Object.keys(value).length === 0)
-                    ? watch("description_html")
-                    : value
-                }
-                onJSONChange={(jsonValue) => setValue("description", jsonValue)}
-                onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-                placeholder="Description"
-                aria-hidden
-                customClassName="text-sm"
-                noBorder
-                borderOnFocus={false}
-              />
-            )}
-          />
-        </div>
-        <div className="flex justify-end items-center gap-2">
-          { data &&
-            <>
-              {console.log(handelAutoGenerateDescription, setGptAssistantModal, iAmFeelingLucky)}
+    <div>
+      <form
+        className="border divide-y rounded-md shadow-md"
+        onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
+      >
+        <div className="px-4 pt-4">
+          <div className="flex justify-between">
+            <TextArea
+              id="name"
+              name="name"
+              placeholder="Title"
+              register={register}
+              className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-xl font-semibold ring-0 focus:ring-gray-200"
+              role="textbox"
+              autoComplete="off"
+              maxLength={255}
+            />
+            <CustomMenu label={<BoltIcon className="h-4.5 w-3.5" />} noBorder noChevron>
+              {data?.issue ? (
+                <>
+                  <CustomMenu.MenuItem onClick={handleBlockSync}>
+                    <span className="flex items-center gap-1">
+                      <ArrowPathIcon className="h-4 w-4" />
+                      <span>Turn sync {data?.sync ? "off" : "on"}</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center gap-1">
+                      <LinkIcon className="h-4 w-4" />
+                      Copy issue link
+                    </span>
+                  </CustomMenu.MenuItem>
+                </>
+              ) : (
+                <CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
+                  <span className="flex items-center gap-1">
+                    <LayerDiagonalIcon className="h-4 w-4" />
+                    Push into issues
+                  </span>
+                </CustomMenu.MenuItem>
+              )}
+              <CustomMenu.MenuItem onClick={deletePageBlock}>
+                <span className="flex items-center gap-1">
+                  <TrashIcon className="h-4 w-4" />
+                  Delete block
+                </span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+          <div className="page-block-section text-[#495057] relative">
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { value } }) => (
+                <RemirrorRichTextEditor
+                  value={
+                    !value || (typeof value === "object" && Object.keys(value).length === 0)
+                      ? watch("description_html")
+                      : value
+                  }
+                  onJSONChange={(jsonValue) => setValue("description", jsonValue)}
+                  onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
+                  placeholder="Write something..."
+                  customClassName="text-sm"
+                  noBorder
+                  borderOnFocus={false}
+                />
+              )}
+            />
+            <div className="flex m-2 mt-6 ml-2">
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
-                  }`}
-                onClick={handelAutoGenerateDescription}
+                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs border hover:bg-gray-100 ${
+                  iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
+                }`}
+                onClick={handleAutoGenerateDescription}
                 disabled={iAmFeelingLucky}
               >
                 {iAmFeelingLucky ? (
@@ -220,19 +308,21 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   </>
                 )}
               </button>
-              <button
+              {data && <button
                 type="button"
-                className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
+                className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs border ml-4 hover:bg-gray-100"
                 onClick={() => {
-                  handleClose();
+                  onClose();
                   setGptAssistantModal();
                 }}
               >
                 <SparklesIcon className="h-4 w-4" />
                 AI
-              </button>
-            </>
-          }
+              </button>}
+            </div>
+          </div>
+        </div>
+        <div className="flex p-4 justify-end items-center gap-2">
           <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
           <PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
             {data

apps/app/components/pages/pages-list/recent-pages-list.tsx

@@ -37,16 +37,21 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
     <>
       {pages ? (
         Object.keys(pages).length > 0 && !isEmpty ? (
-          <div className="mt-4 space-y-4">
+          <div className="mt-4 space-y-4 flex flex-col gap-5">
             {Object.keys(pages).map((key) => {
               if (pages[key].length === 0) return null;
 
               return (
                 <React.Fragment key={key}>
-                  <h2 className="text-xl font-medium capitalize">
-                    {replaceUnderscoreIfSnakeCase(key)}
-                  </h2>
-                  <PagesView pages={pages[key as keyof RecentPagesResponse]} viewType={viewType} />
+                  <div>
+                    <h2 className="text-xl font-semibold capitalize mb-4">
+                      {replaceUnderscoreIfSnakeCase(key)}
+                    </h2>
+                    <PagesView
+                      pages={pages[key as keyof RecentPagesResponse]}
+                      viewType={viewType}
+                    />
+                  </div>
                 </React.Fragment>
               );
             })}

apps/app/components/pages/pages-view.tsx

@@ -207,7 +207,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
               ))}
             </ul>
           ) : viewType === "detailed" ? (
-            <div className="rounded-[10px] border border-gray-200 bg-white">
+            <div className="rounded-[10px] border divide-y  border-gray-200 bg-white">
               {pages.map((page) => (
                 <SinglePageDetailedItem
                   key={page.id}

apps/app/components/pages/single-page-block.tsx

@@ -23,13 +23,14 @@ import { CreateUpdateBlockInline } from "components/pages";
 import { CustomMenu, Loader } from "components/ui";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
-import { ArrowPathIcon } from "@heroicons/react/20/solid";
+import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
 import {
   BoltIcon,
   CheckIcon,
   EllipsisVerticalIcon,
   PencilIcon,
   SparklesIcon,
+  TrashIcon,
 } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
@@ -173,7 +174,7 @@ export const SinglePageBlock: React.FC<Props> = ({
       });
   };
 
-  const handelAutoGenerateDescription = async () => {
+  const handleAutoGenerateDescription = async () => {
     if (!workspaceSlug || !projectId) return;
 
     setIAmFeelingLucky(true);
@@ -303,17 +304,19 @@ export const SinglePageBlock: React.FC<Props> = ({
               {...provided.dragHandleProps}
             >
               <CreateUpdateBlockInline
-                handelAutoGenerateDescription={handelAutoGenerateDescription}
-                setGptAssistantModal={()=>setGptAssistantModal((prev)=>!prev)}
-                iAmFeelingLucky={iAmFeelingLucky}
+                setGptAssistantModal={() => setGptAssistantModal((prev) => !prev)}
                 handleClose={() => setCreateBlockForm(false)}
                 data={block}
                 setIsSyncing={setIsSyncing}
+                deletePageBlock={deletePageBlock}
+                handleBlockSync={handleBlockSync}
+                handleCopyText={handleCopyText}
+                pushBlockIntoIssues={pushBlockIntoIssues}
               />
             </div>
           ) : (
             <div
-              className={`group relative pl-6 ${
+              className={`group relative ${
                 snapshot.isDragging ? "border-2 bg-white border-theme shadow-lg rounded-md p-6" : ""
               }`}
               ref={provided.innerRef}
@@ -321,13 +324,13 @@ export const SinglePageBlock: React.FC<Props> = ({
             >
               <button
                 type="button"
-                className="absolute top-4 -left-2 p-0.5 hover:bg-gray-100 rounded hidden group-hover:flex"
+                className="absolute top-4 -left-4 p-0.5 hover:bg-gray-100 rounded hidden group-hover:!flex"
                 {...provided.dragHandleProps}
               >
                 <EllipsisVerticalIcon className="h-[18px]" />
                 <EllipsisVerticalIcon className="h-[18px] -ml-3" />
               </button>
-              <div className="absolute top-4 right-0 items-center gap-2 hidden group-hover:flex bg-white pl-4">
+              <div className="absolute top-4 right-0 items-center gap-2 hidden group-hover:!flex bg-white pl-4">
                 {block.issue && block.sync && (
                   <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-gray-100 py-1 px-1.5 text-xs">
                     {isSyncing ? (
@@ -343,7 +346,7 @@ export const SinglePageBlock: React.FC<Props> = ({
                   className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${
                     iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
                   }`}
-                  onClick={handelAutoGenerateDescription}
+                  onClick={handleAutoGenerateDescription}
                   disabled={iAmFeelingLucky}
                 >
                   {iAmFeelingLucky ? (
@@ -373,18 +376,32 @@ export const SinglePageBlock: React.FC<Props> = ({
                   {block.issue ? (
                     <>
                       <CustomMenu.MenuItem onClick={handleBlockSync}>
-                        <>Turn sync {block.sync ? "off" : "on"}</>
+                        <span className="flex items-center gap-1">
+                          <ArrowPathIcon className="h-4 w-4" />
+                          <span>Turn sync {block.sync ? "off" : "on"}</span>
+                        </span>
                       </CustomMenu.MenuItem>
                       <CustomMenu.MenuItem onClick={handleCopyText}>
-                        Copy issue link
+                        <span className="flex items-center gap-1">
+                          <LinkIcon className="h-4 w-4" />
+                          Copy issue link
+                        </span>
                       </CustomMenu.MenuItem>
                     </>
                   ) : (
                     <CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
-                      Push into issues
+                      <span className="flex items-center gap-1">
+                        <LayerDiagonalIcon className="h-4 w-4" />
+                        Push into issues
+                      </span>
                     </CustomMenu.MenuItem>
                   )}
-                  <CustomMenu.MenuItem onClick={deletePageBlock}>Delete block</CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={deletePageBlock}>
+                    <span className="flex items-center gap-1">
+                      <TrashIcon className="h-4 w-4" />
+                      Delete block
+                    </span>
+                  </CustomMenu.MenuItem>
                 </CustomMenu>
               </div>
               <div
@@ -392,20 +409,33 @@ export const SinglePageBlock: React.FC<Props> = ({
                   snapshot.isDragging ? "" : "py-4 [&:not(:last-child)]:border-b"
                 }`}
               >
-                {block.issue && (
-                  <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}>
-                    <a className="flex flex-shrink-0 items-center gap-1 rounded bg-gray-100 px-1.5 py-1 text-xs">
-                      <LayerDiagonalIcon height="16" width="16" color="black" />
-                      {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
-                    </a>
-                  </Link>
-                )}
-                <h3
-                  className="font-medium text-sm break-all"
+                <div
+                  className="px-4 w-full overflow-hidden break-all cursor-pointer"
                   onClick={() => setCreateBlockForm(true)}
                 >
-                  {block.name}
-                </h3>
+                  <div className="flex">
+                    {block.issue && (
+                      <div className="flex mr-1.5">
+                        <Link
+                          href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
+                        >
+                          <a className="flex flex-shrink-0 items-center gap-1 rounded h-6 bg-gray-100 px-1.5 py-1 text-xs">
+                            <LayerDiagonalIcon height="16" width="16" color="black" />
+                            {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
+                          </a>
+                        </Link>
+                      </div>
+                    )}
+                    <h3 className="font-medium text-base overflow-hidden max-w-[1000px]">
+                      {block.name}
+                    </h3>
+                  </div>
+                  {block?.description_stripped.length > 0 && (
+                    <p className="mt-3 text-sm text-gray-500 font-normal h-5 truncate">
+                      {block.description_stripped}
+                    </p>
+                  )}
+                </div>
               </div>
               <GptAssistantModal
                 block={block}

apps/app/components/pages/single-page-detailed-item.tsx

@@ -17,7 +17,7 @@ import {
 } from "@heroicons/react/24/outline";
 // helpers
 import { truncateText } from "helpers/string.helper";
-import { renderShortTime } from "helpers/date-time.helper";
+import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
 // types
 import { IPage } from "types";
 
@@ -44,12 +44,12 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
   const { user } = useUser();
 
   return (
-    <div className="relative first:rounded-t last:rounded-b border">
+    <div className="relative">
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
-        <a className="block p-4">
+        <a className="block py-4 px-6">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-2">
-              <p className="mr-2 truncate text-sm font-medium">{truncateText(page.name, 75)}</p>
+              <p className="mr-2 truncate text-xl font-semibold">{truncateText(page.name, 75)}</p>
               {page.label_details.length > 0 &&
                 page.label_details.map((label) => (
                   <div
@@ -74,7 +74,14 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
             </div>
 
             <div className="flex items-center gap-2">
-              <p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
+              <Tooltip
+                tooltipContent={`Last updated at ${
+                  renderShortTime(page.updated_at) +
+                  ` ${new Date(page.updated_at).getHours() < 12 ? "am" : "pm"}`
+                } on ${renderShortDate(page.updated_at)}`}
+              >
+                <p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
+              </Tooltip>
               {page.is_favorite ? (
                 <button
                   type="button"
@@ -153,7 +160,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
               </CustomMenu>
             </div>
           </div>
-          <div className="relative mt-2 space-y-2 text-sm text-gray-600">
+          <div className="relative mt-2 space-y-2 text-base font-normal text-gray-600">
             {page.blocks.length > 0
               ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>)
               : null}

apps/app/components/pages/single-page-list-item.tsx

@@ -16,6 +16,7 @@ import {
   StarIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
+import { PencilScribbleIcon } from "components/icons";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { renderShortDate, renderShortTime } from "helpers/date-time.helper";
@@ -48,11 +49,13 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
     <li>
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
         <a>
-          <div className="relative rounded p-4 hover:bg-gray-100">
+          <div className="relative rounded p-4 hover:bg-[#E9ECEF]">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <DocumentTextIcon className="h-4 w-4" />
-                <p className="mr-2 truncate text-sm font-medium">{truncateText(page.name, 75)}</p>
+                <PencilScribbleIcon className="h-4 w-4" />
+                <p className="mr-2 truncate text-base text-[#212529] font-medium">
+                  {truncateText(page.name, 75)}
+                </p>
                 {page.label_details.length > 0 &&
                   page.label_details.map((label) => (
                     <div
@@ -78,9 +81,8 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
               <div className="ml-2 flex flex-shrink-0">
                 <div className="flex items-center gap-2">
                   <Tooltip
-                    tooltipContent={`Last updated at ${renderShortTime(
-                      page.updated_at
-                    )} ${renderShortDate(page.updated_at)}`}
+                    tooltipContent={`Last updated at ${
+                      renderShortTime(page.updated_at)} on ${renderShortDate(page.updated_at)}`}
                   >
                     <p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
                   </Tooltip>