style: page detail (#1030)

* style: page detail header styling

* style: page detail ui

* style: page block, create block styling

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

@@ -0,0 +1,113 @@
+import React, { KeyboardEventHandler, useCallback, useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// services
+import pagesService from "services/pages.service";
+
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { TextArea } from "components/ui";
+// types
+import { IPageBlock } from "types";
+// fetch-keys
+import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+
+const defaultValues = {
+  name: "",
+};
+
+export const CreateBlock = () => {
+  const [blockTitle, setBlockTitle] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, pageId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const {
+    handleSubmit,
+    register,
+    control,
+    watch,
+    setValue,
+    setFocus,
+    reset,
+    formState: { isSubmitting },
+  } = useForm<IPageBlock>({
+    defaultValues,
+  });
+
+  const createPageBlock = async () => {
+    if (!workspaceSlug || !projectId || !pageId) return;
+
+    await pagesService
+      .createPageBlock(workspaceSlug as string, projectId as string, pageId as string, {
+        name: watch("name"),
+      })
+      .then((res) => {
+        mutate<IPageBlock[]>(
+          PAGE_BLOCKS_LIST(pageId as string),
+          (prevData) => [...(prevData as IPageBlock[]), res],
+          false
+        );
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be created. Please try again.",
+        });
+      });
+
+    reset();
+  };
+
+  const handleKeyDown = (e: any) => {
+    const keyCombination =
+      ((e.ctrlKey || e.metaKey) && e.key === "Enter") || (e.shiftKey && e.key === "Enter");
+
+    if (e.key === "Enter" && !keyCombination) {
+      if (watch("name") && watch("name") !== "") {
+        e.preventDefault();
+        createPageBlock();
+        reset();
+      }
+    }
+  };
+
+  return (
+    <div className="relative">
+      <form
+        className="flex flex-col items-center justify-between rounded border-2 border-brand-base p-2"
+        onSubmit={handleSubmit(createPageBlock)}
+      >
+        <div className="flex min-h-[75px] w-full">
+          <TextArea
+            id="name"
+            name="name"
+            placeholder="Title"
+            register={register}
+            className="min-h-10 block max-h-24 w-full resize-none overflow-hidden border-none bg-transparent px-1 py-1 text-sm font-medium"
+            role="textbox"
+            onKeyDown={handleKeyDown}
+            maxLength={255}
+          />
+        </div>
+
+        <div className="flex w-full items-center justify-end gap-2 p-1">
+          <button type="submit">
+            <PaperAirplaneIcon className="h-5 w-5 text-brand-base" />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};

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

@@ -18,7 +18,7 @@ import useToast from "hooks/use-toast";
 // components
 import { GptAssistantModal } from "components/core";
 // ui
-import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // types
 import { IPageBlock } from "types";
 // fetch-keys
@@ -253,17 +253,17 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   return (
     <div className="relative">
       <form
-        className="divide-y divide-brand-base rounded-[10px] border border-brand-base shadow"
+        className="divide-y divide-brand-base rounded border border-brand-base shadow"
         onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
       >
         <div className="pt-2">
           <div className="flex justify-between">
-            <Input
+            <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-lg font-medium"
+              className="min-h-10 font medium block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base"
               autoComplete="off"
               maxLength={255}
             />

apps/app/components/pages/index.ts

@@ -7,3 +7,4 @@ export * from "./pages-view";
 export * from "./single-page-block";
 export * from "./single-page-detailed-item";
 export * from "./single-page-list-item";
+export * from "./create-block";

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

@@ -20,7 +20,7 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu, TextArea } from "components/ui";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
 import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
@@ -274,12 +274,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
       {(provided, snapshot) => (
         <>
           {createBlockForm ? (
-            <div
+            <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-              className="mb-4 pt-4"
-              ref={provided.innerRef}
-              {...provided.draggableProps}
-              {...provided.dragHandleProps}
-            >
               <CreateUpdateBlockInline
                 handleAiAssistance={handleAiAssistance}
                 handleClose={() => setCreateBlockForm(false)}
@@ -290,15 +285,15 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
             </div>
           ) : (
             <div
-              className={`group relative text-brand-secondary ${
+              className={`group relative w-full rounded bg-brand-surface-2 text-brand-secondary ${
-                snapshot.isDragging ? "rounded-[10px] bg-brand-surface-2 p-6 shadow" : ""
+                snapshot.isDragging ? "bg-brand-base p-4 shadow" : ""
               }`}
               ref={provided.innerRef}
               {...provided.draggableProps}
             >
               <button
                 type="button"
-                className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
+                className="absolute top-4 -left-0 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
                 {...provided.dragHandleProps}
               >
                 <EllipsisVerticalIcon className="h-[18px]" />
@@ -306,12 +301,12 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
               </button>
               <div
                 ref={actionSectionRef}
-                className={`absolute top-4 right-0 hidden items-center gap-2 pl-4 group-hover:!flex ${
+                className={`absolute top-4 right-2 hidden items-center gap-2 bg-brand-surface-2 pl-4 group-hover:!flex ${
                   isMenuActive ? "!flex" : ""
                 }`}
               >
                 {block.issue && block.sync && (
-                  <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-brand-surface-2 py-1 px-1.5 text-xs">
+                  <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded py-1 px-1.5 text-xs">
                     {isSyncing ? (
                       <ArrowPathIcon className="h-3 w-3 animate-spin" />
                     ) : (
@@ -322,8 +317,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 )}
                 <button
                   type="button"
-                  className={`flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2 ${
+                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
-                    iAmFeelingLucky ? "cursor-wait bg-brand-surface-2" : ""
+                    iAmFeelingLucky ? "cursor-wait" : ""
                   }`}
                   onClick={handleAutoGenerateDescription}
                   disabled={iAmFeelingLucky}
@@ -338,7 +333,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
                   onClick={() => setGptAssistantModal((prevData) => !prevData)}
                 >
                   <SparklesIcon className="h-4 w-4" />
@@ -346,7 +341,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs hover:bg-brand-surface-2"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
                   onClick={() => setCreateBlockForm(true)}
                 >
                   <PencilIcon className="h-3.5 w-3.5" />
@@ -354,7 +349,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 <CustomMenu
                   customButton={
                     <button
-                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded bg-brand-surface-1 px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-2"
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-1"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
                       <BoltIcon className="h-4.5 w-3.5" />
@@ -392,16 +387,12 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                   </CustomMenu.MenuItem>
                 </CustomMenu>
               </div>
-              <div
+              <div className={`flex items-start gap-2 px-3 ${snapshot.isDragging ? "" : "py-4"}`}>
-                className={`flex items-start gap-2 ${
-                  snapshot.isDragging ? "" : "border-brand-base py-4 [&:not(:last-child)]:border-b"
-                }`}
-              >
                 <div
                   className="w-full cursor-pointer overflow-hidden break-all px-4"
                   onClick={() => setCreateBlockForm(true)}
                 >
-                  <div className="flex">
+                  <div className="flex items-center">
                     {block.issue && (
                       <div className="mr-1.5 flex">
                         <Link
@@ -414,9 +405,11 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                         </Link>
                       </div>
                     )}
-                    <h3 className="max-w-[1000px] overflow-hidden text-sm text-brand-base">
+                    <TextArea
-                      {block.name}
+                      name="blockName"
-                    </h3>
+                      value={block.name}
+                      className="min-h-5 block w-full resize-none overflow-hidden border-none bg-transparent px-0 py-0 text-sm text-brand-base"
+                    />
                   </div>
                   {block?.description_stripped.length > 0 && (
                     <p className="mt-3 h-5 truncate text-sm font-normal text-brand-secondary">

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -25,6 +25,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
 import { CreateLabelModal } from "components/labels";
+import { CreateBlock } from "components/pages/create-block";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { CustomSearchSelect, Loader, PrimaryButton, TextArea, Tooltip } from "components/ui";
@@ -287,18 +288,6 @@ const SinglePage: NextPage = () => {
     });
   }, [reset, pageDetails]);
 
-  useEffect(() => {
-    const openCreateBlockForm = (e: KeyboardEvent) => {
-      if (e.shiftKey && e.key === "Enter") handleNewBlock();
-    };
-
-    window.addEventListener("keydown", openCreateBlockForm);
-
-    return () => {
-      window.removeEventListener("keydown", openCreateBlockForm);
-    };
-  }, [handleNewBlock, createBlockForm]);
-
   return (
     <ProjectAuthorizationWrapper
       meta={{
@@ -312,17 +301,33 @@ const SinglePage: NextPage = () => {
       }
     >
       {pageDetails ? (
-        <div className="space-y-4 p-4">
+        <div className="flex h-full flex-col justify-between space-y-4 overflow-hidden p-4">
-          <div className="flex items-center justify-between gap-2 px-3">
+          <div className="h-full w-full overflow-y-auto">
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex w-full flex-col gap-2">
+                <div className="flex w-full items-center gap-2">
                   <button
                     type="button"
                     className="flex items-center gap-2 text-sm text-brand-secondary"
                     onClick={() => router.back()}
                   >
                     <ArrowLeftIcon className="h-4 w-4" />
-              Back
                   </button>
-            <div className="flex flex-wrap gap-1">
+
+                  <TextArea
+                    id="name"
+                    name="name"
+                    placeholder="Page Title"
+                    value={watch("name")}
+                    onBlur={handleSubmit(updatePage)}
+                    onChange={(e) => setValue("name", e.target.value)}
+                    required={true}
+                    className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
+                    role="textbox"
+                  />
+                </div>
+
+                <div className="flex w-full flex-wrap gap-1">
                   {pageDetails.labels.length > 0 ? (
                     <>
                       {pageDetails.labels.map((labelId) => {
@@ -360,7 +365,7 @@ const SinglePage: NextPage = () => {
                         customButton={
                           <button
                             type="button"
-                        className="flex items-center gap-1 rounded-md bg-brand-surface-2 p-1.5 text-xs"
+                            className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
                           >
                             <PlusIcon className="h-3.5 w-3.5" />
                           </button>
@@ -377,7 +382,7 @@ const SinglePage: NextPage = () => {
                       customButton={
                         <button
                           type="button"
-                      className="flex items-center gap-1 rounded-md bg-brand-surface-2 px-3 py-1.5 text-xs"
+                          className="flex items-center gap-1 rounded-sm bg-brand-surface-2 px-3 py-1.5 text-xs"
                         >
                           <PlusIcon className="h-3 w-3" />
                           Add label
@@ -405,6 +410,8 @@ const SinglePage: NextPage = () => {
                     />
                   )}
                 </div>
+              </div>
+              <div className="flex items-center">
                 <div className="flex items-center gap-6 text-brand-secondary">
                   <Tooltip
                     tooltipContent={`Last updated at ${renderShortTime(
@@ -493,27 +500,20 @@ const SinglePage: NextPage = () => {
                   )}
                 </div>
               </div>
-          <div className="px-4 pt-6">
-            <TextArea
-              id="name"
-              name="name"
-              placeholder="Page Title"
-              value={watch("name")}
-              onBlur={handleSubmit(updatePage)}
-              onChange={(e) => setValue("name", e.target.value)}
-              required={true}
-              className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 placeholder:text-[#858E96]"
-              role="textbox"
-            />
             </div>
-          <div className="px-7">
+
+            <div className="mt-4 h-full w-full">
               {pageBlocks ? (
                 <>
                   <DragDropContext onDragEnd={handleOnDragEnd}>
                     {pageBlocks.length !== 0 && (
                       <StrictModeDroppable droppableId="blocks-list">
                         {(provided) => (
-                        <div ref={provided.innerRef} {...provided.droppableProps}>
+                          <div
+                            className="flex w-full flex-col gap-2"
+                            ref={provided.innerRef}
+                            {...provided.droppableProps}
+                          >
                             {pageBlocks.map((block, index) => (
                               <SinglePageBlock
                                 key={block.id}
@@ -528,16 +528,6 @@ const SinglePage: NextPage = () => {
                       </StrictModeDroppable>
                     )}
                   </DragDropContext>
-                {!createBlockForm && (
-                  <button
-                    type="button"
-                    className="mt-4 flex items-center gap-1 rounded-full bg-brand-base px-2 py-1 pr-2.5 text-xs hover:bg-brand-surface-2"
-                    onClick={handleNewBlock}
-                  >
-                    <PlusIcon className="h-3 w-3" />
-                    Add new block
-                  </button>
-                )}
                   {createBlockForm && (
                     <div className="mt-4" ref={scrollToRef}>
                       <CreateUpdateBlockInline
@@ -562,6 +552,10 @@ const SinglePage: NextPage = () => {
               )}
             </div>
           </div>
+          <div>
+            <CreateBlock />
+          </div>
+        </div>
       ) : (
         <Loader className="p-8">
           <Loader.Item height="200px" />