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,254 +301,259 @@ 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">
-            <button
+            <div className="flex items-center justify-between gap-2">
-              type="button"
+              <div className="flex w-full flex-col gap-2">
-              className="flex items-center gap-2 text-sm text-brand-secondary"
+                <div className="flex w-full items-center gap-2">
-              onClick={() => router.back()}
-            >
-              <ArrowLeftIcon className="h-4 w-4" />
-              Back
-            </button>
-            <div className="flex flex-wrap gap-1">
-              {pageDetails.labels.length > 0 ? (
-                <>
-                  {pageDetails.labels.map((labelId) => {
-                    const label = labels?.find((label) => label.id === labelId);
-
-                    if (!label) return;
-
-                    return (
-                      <div
-                        key={label.id}
-                        className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
-                        onClick={() => {
-                          const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
-                          partialUpdatePage({ labels_list: updatedLabels });
-                        }}
-                        style={{
-                          backgroundColor: `${
-                            label?.color && label.color !== "" ? label.color : "#000000"
-                          }20`,
-                        }}
-                      >
-                        <span
-                          className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                          style={{
-                            backgroundColor:
-                              label?.color && label.color !== "" ? label.color : "#000000",
-                          }}
-                        />
-                        {label.name}
-                        <XMarkIcon className="h-2.5 w-2.5 group-hover:text-red-500" />
-                      </div>
-                    );
-                  })}
-                  <CustomSearchSelect
-                    customButton={
-                      <button
-                        type="button"
-                        className="flex items-center gap-1 rounded-md bg-brand-surface-2 p-1.5 text-xs"
-                      >
-                        <PlusIcon className="h-3.5 w-3.5" />
-                      </button>
-                    }
-                    value={pageDetails.labels}
-                    onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
-                    options={options}
-                    multiple
-                    noChevron
-                  />
-                </>
-              ) : (
-                <CustomSearchSelect
-                  customButton={
-                    <button
-                      type="button"
-                      className="flex items-center gap-1 rounded-md bg-brand-surface-2 px-3 py-1.5 text-xs"
-                    >
-                      <PlusIcon className="h-3 w-3" />
-                      Add label
-                    </button>
-                  }
-                  value={pageDetails.labels}
-                  onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
-                  footerOption={
-                    <button
-                      type="button"
-                      className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
-                      onClick={() => {
-                        setLabelModal(true);
-                      }}
-                    >
-                      <span className="flex items-center justify-start gap-1 text-brand-secondary">
-                        <PlusIcon className="h-4 w-4" aria-hidden="true" />
-                        <span>Create New Label</span>
-                      </span>
-                    </button>
-                  }
-                  options={options}
-                  multiple
-                  noChevron
-                />
-              )}
-            </div>
-            <div className="flex items-center gap-6 text-brand-secondary">
-              <Tooltip
-                tooltipContent={`Last updated at ${renderShortTime(
-                  pageDetails.updated_at
-                )} on ${renderShortDate(pageDetails.updated_at)}`}
-              >
-                <p className="text-sm">{renderShortTime(pageDetails.updated_at)}</p>
-              </Tooltip>
-              <button className="flex items-center gap-2" onClick={handleCopyText}>
-                <LinkIcon className="h-4 w-4" />
-              </button>
-              <div className="flex-shrink-0">
-                <Popover className="relative grid place-items-center">
-                  {({ open }) => (
-                    <>
-                      <Popover.Button
-                        type="button"
-                        className={`group inline-flex items-center outline-none ${
-                          open ? "text-brand-base" : "text-brand-secondary"
-                        }`}
-                      >
-                        {watch("color") && watch("color") !== "" ? (
-                          <span
-                            className="h-4 w-4 rounded"
-                            style={{
-                              backgroundColor: watch("color") ?? "black",
-                            }}
-                          />
-                        ) : (
-                          <ColorPalletteIcon height={16} width={16} />
-                        )}
-                      </Popover.Button>
-
-                      <Transition
-                        as={React.Fragment}
-                        enter="transition ease-out duration-200"
-                        enterFrom="opacity-0 translate-y-1"
-                        enterTo="opacity-100 translate-y-0"
-                        leave="transition ease-in duration-150"
-                        leaveFrom="opacity-100 translate-y-0"
-                        leaveTo="opacity-0 translate-y-1"
-                      >
-                        <Popover.Panel className="absolute top-full right-0 z-20 mt-1 max-w-xs px-2 sm:px-0">
-                          <TwitterPicker
-                            color={pageDetails.color}
-                            onChange={(val) => partialUpdatePage({ color: val.hex })}
-                          />
-                        </Popover.Panel>
-                      </Transition>
-                    </>
-                  )}
-                </Popover>
-              </div>
-              {pageDetails.created_by === user?.id && (
-                <Tooltip
-                  tooltipContent={`${
-                    pageDetails.access
-                      ? "This page is only visible to you."
-                      : "This page can be viewed by anyone in the project."
-                  }`}
-                  theme="dark"
-                >
-                  {pageDetails.access ? (
-                    <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
-                      <LockClosedIcon className="h-4 w-4" />
-                    </button>
-                  ) : (
-                    <button
-                      onClick={() => partialUpdatePage({ access: 1 })}
-                      type="button"
-                      className="z-10"
-                    >
-                      <LockOpenIcon className="h-4 w-4" />
-                    </button>
-                  )}
-                </Tooltip>
-              )}
-              {pageDetails.is_favorite ? (
-                <button onClick={handleRemoveFromFavorites} className="z-10">
-                  <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                </button>
-              ) : (
-                <button onClick={handleAddToFavorites} type="button" className="z-10">
-                  <StarIcon className="h-4 w-4" />
-                </button>
-              )}
-            </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">
-            {pageBlocks ? (
-              <>
-                <DragDropContext onDragEnd={handleOnDragEnd}>
-                  {pageBlocks.length !== 0 && (
-                    <StrictModeDroppable droppableId="blocks-list">
-                      {(provided) => (
-                        <div ref={provided.innerRef} {...provided.droppableProps}>
-                          {pageBlocks.map((block, index) => (
-                            <SinglePageBlock
-                              key={block.id}
-                              block={block}
-                              projectDetails={projectDetails}
-                              index={index}
-                            />
-                          ))}
-                          {provided.placeholder}
-                        </div>
-                      )}
-                    </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"
+                    className="flex items-center gap-2 text-sm text-brand-secondary"
-                    onClick={handleNewBlock}
+                    onClick={() => router.back()}
                   >
-                    <PlusIcon className="h-3 w-3" />
+                    <ArrowLeftIcon className="h-4 w-4" />
-                    Add new block
                   </button>
-                )}
+
-                {createBlockForm && (
+                  <TextArea
-                  <div className="mt-4" ref={scrollToRef}>
+                    id="name"
-                    <CreateUpdateBlockInline
+                    name="name"
-                      handleClose={() => setCreateBlockForm(false)}
+                    placeholder="Page Title"
-                      focus="name"
+                    value={watch("name")}
-                    />
+                    onBlur={handleSubmit(updatePage)}
-                  </div>
+                    onChange={(e) => setValue("name", e.target.value)}
-                )}
+                    required={true}
-                {labelModal && typeof projectId === "string" && (
+                    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]"
-                  <CreateLabelModal
+                    role="textbox"
-                    isOpen={labelModal}
-                    handleClose={() => setLabelModal(false)}
-                    projectId={projectId}
                   />
-                )}
+                </div>
-              </>
+
-            ) : (
+                <div className="flex w-full flex-wrap gap-1">
-              <Loader>
+                  {pageDetails.labels.length > 0 ? (
-                <Loader.Item height="150px" />
+                    <>
-                <Loader.Item height="150px" />
+                      {pageDetails.labels.map((labelId) => {
-              </Loader>
+                        const label = labels?.find((label) => label.id === labelId);
-            )}
+
+                        if (!label) return;
+
+                        return (
+                          <div
+                            key={label.id}
+                            className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs hover:border-red-500 hover:bg-red-50"
+                            onClick={() => {
+                              const updatedLabels = pageDetails.labels.filter((l) => l !== labelId);
+                              partialUpdatePage({ labels_list: updatedLabels });
+                            }}
+                            style={{
+                              backgroundColor: `${
+                                label?.color && label.color !== "" ? label.color : "#000000"
+                              }20`,
+                            }}
+                          >
+                            <span
+                              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                              style={{
+                                backgroundColor:
+                                  label?.color && label.color !== "" ? label.color : "#000000",
+                              }}
+                            />
+                            {label.name}
+                            <XMarkIcon className="h-2.5 w-2.5 group-hover:text-red-500" />
+                          </div>
+                        );
+                      })}
+                      <CustomSearchSelect
+                        customButton={
+                          <button
+                            type="button"
+                            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>
+                        }
+                        value={pageDetails.labels}
+                        onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
+                        options={options}
+                        multiple
+                        noChevron
+                      />
+                    </>
+                  ) : (
+                    <CustomSearchSelect
+                      customButton={
+                        <button
+                          type="button"
+                          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
+                        </button>
+                      }
+                      value={pageDetails.labels}
+                      onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
+                      footerOption={
+                        <button
+                          type="button"
+                          className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+                          onClick={() => {
+                            setLabelModal(true);
+                          }}
+                        >
+                          <span className="flex items-center justify-start gap-1 text-brand-secondary">
+                            <PlusIcon className="h-4 w-4" aria-hidden="true" />
+                            <span>Create New Label</span>
+                          </span>
+                        </button>
+                      }
+                      options={options}
+                      multiple
+                      noChevron
+                    />
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center">
+                <div className="flex items-center gap-6 text-brand-secondary">
+                  <Tooltip
+                    tooltipContent={`Last updated at ${renderShortTime(
+                      pageDetails.updated_at
+                    )} on ${renderShortDate(pageDetails.updated_at)}`}
+                  >
+                    <p className="text-sm">{renderShortTime(pageDetails.updated_at)}</p>
+                  </Tooltip>
+                  <button className="flex items-center gap-2" onClick={handleCopyText}>
+                    <LinkIcon className="h-4 w-4" />
+                  </button>
+                  <div className="flex-shrink-0">
+                    <Popover className="relative grid place-items-center">
+                      {({ open }) => (
+                        <>
+                          <Popover.Button
+                            type="button"
+                            className={`group inline-flex items-center outline-none ${
+                              open ? "text-brand-base" : "text-brand-secondary"
+                            }`}
+                          >
+                            {watch("color") && watch("color") !== "" ? (
+                              <span
+                                className="h-4 w-4 rounded"
+                                style={{
+                                  backgroundColor: watch("color") ?? "black",
+                                }}
+                              />
+                            ) : (
+                              <ColorPalletteIcon height={16} width={16} />
+                            )}
+                          </Popover.Button>
+
+                          <Transition
+                            as={React.Fragment}
+                            enter="transition ease-out duration-200"
+                            enterFrom="opacity-0 translate-y-1"
+                            enterTo="opacity-100 translate-y-0"
+                            leave="transition ease-in duration-150"
+                            leaveFrom="opacity-100 translate-y-0"
+                            leaveTo="opacity-0 translate-y-1"
+                          >
+                            <Popover.Panel className="absolute top-full right-0 z-20 mt-1 max-w-xs px-2 sm:px-0">
+                              <TwitterPicker
+                                color={pageDetails.color}
+                                onChange={(val) => partialUpdatePage({ color: val.hex })}
+                              />
+                            </Popover.Panel>
+                          </Transition>
+                        </>
+                      )}
+                    </Popover>
+                  </div>
+                  {pageDetails.created_by === user?.id && (
+                    <Tooltip
+                      tooltipContent={`${
+                        pageDetails.access
+                          ? "This page is only visible to you."
+                          : "This page can be viewed by anyone in the project."
+                      }`}
+                      theme="dark"
+                    >
+                      {pageDetails.access ? (
+                        <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
+                          <LockClosedIcon className="h-4 w-4" />
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => partialUpdatePage({ access: 1 })}
+                          type="button"
+                          className="z-10"
+                        >
+                          <LockOpenIcon className="h-4 w-4" />
+                        </button>
+                      )}
+                    </Tooltip>
+                  )}
+                  {pageDetails.is_favorite ? (
+                    <button onClick={handleRemoveFromFavorites} className="z-10">
+                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button onClick={handleAddToFavorites} type="button" className="z-10">
+                      <StarIcon className="h-4 w-4" />
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-4 h-full w-full">
+              {pageBlocks ? (
+                <>
+                  <DragDropContext onDragEnd={handleOnDragEnd}>
+                    {pageBlocks.length !== 0 && (
+                      <StrictModeDroppable droppableId="blocks-list">
+                        {(provided) => (
+                          <div
+                            className="flex w-full flex-col gap-2"
+                            ref={provided.innerRef}
+                            {...provided.droppableProps}
+                          >
+                            {pageBlocks.map((block, index) => (
+                              <SinglePageBlock
+                                key={block.id}
+                                block={block}
+                                projectDetails={projectDetails}
+                                index={index}
+                              />
+                            ))}
+                            {provided.placeholder}
+                          </div>
+                        )}
+                      </StrictModeDroppable>
+                    )}
+                  </DragDropContext>
+                  {createBlockForm && (
+                    <div className="mt-4" ref={scrollToRef}>
+                      <CreateUpdateBlockInline
+                        handleClose={() => setCreateBlockForm(false)}
+                        focus="name"
+                      />
+                    </div>
+                  )}
+                  {labelModal && typeof projectId === "string" && (
+                    <CreateLabelModal
+                      isOpen={labelModal}
+                      handleClose={() => setLabelModal(false)}
+                      projectId={projectId}
+                    />
+                  )}
+                </>
+              ) : (
+                <Loader>
+                  <Loader.Item height="150px" />
+                  <Loader.Item height="150px" />
+                </Loader>
+              )}
+            </div>
+          </div>
+          <div>
+            <CreateBlock />
           </div>
         </div>
       ) : (