[WEB-3045] fix: stickies bugs (#6433)

* fix: stickies bugs

* fix: sticky height fixed

---------

Co-authored-by: gakshita <akshitagoyal1516@gmail.com>

web/core/components/stickies/delete-modal.tsx

@@ -7,7 +7,7 @@ import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 
 interface IStickyDelete {
   isOpen: boolean;
-  handleSubmit: () => void;
+  handleSubmit: () => Promise<void>;
   handleClose: () => void;
 }
 
@@ -20,11 +20,11 @@ export const StickyDeleteModal: React.FC<IStickyDelete> = observer((props) => {
     try {
       setLoader(true);
       await handleSubmit();
-    } catch (error) {
+    } catch {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Warning!",
-        message: "Something went wrong please try again later.",
+        message: "Something went wrong. Please try again later.",
       });
     } finally {
       setLoader(false);
@@ -38,7 +38,7 @@ export const StickyDeleteModal: React.FC<IStickyDelete> = observer((props) => {
       isSubmitting={loader}
       isOpen={isOpen}
       title="Delete sticky"
-      content={<>Are you sure you want to delete the sticky? </>}
+      content="Are you sure you want to delete the sticky?"
     />
   );
 });

web/core/components/stickies/layout/stickies-list.tsx

@@ -7,18 +7,17 @@ import type { ElementDragPayload } from "@atlaskit/pragmatic-drag-and-drop/eleme
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import Masonry from "react-masonry-component";
-// plane ui
-import { Loader } from "@plane/ui";
 // components
 import { EmptyState } from "@/components/empty-state";
+import { StickiesEmptyState } from "@/components/home/widgets/empty-states/stickies";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
 // hooks
 import { useSticky } from "@/hooks/use-stickies";
 import { useStickyOperations } from "../sticky/use-operations";
+import { StickiesLoader } from "./stickies-loader";
 import { StickyDNDWrapper } from "./sticky-dnd-wrapper";
 import { getInstructionFromPayload } from "./sticky.helpers";
-import { StickiesEmptyState } from "@/components/home/widgets/empty-states/stickies";
 
 type TStickiesLayout = {
   workspaceSlug: string;
@@ -42,6 +41,14 @@ export const StickiesList = observer((props: TProps) => {
   const itemWidth = `${100 / columnCount}%`;
   const totalRows = Math.ceil(workspaceStickyIds.length / columnCount);
   const isStickiesPage = pathname?.includes("stickies");
+  const masonryRef = useRef<any>(null);
+
+  const handleLayout = () => {
+    if (masonryRef.current) {
+      // Force reflow
+      masonryRef.current.performLayout();
+    }
+  };
 
   // Function to determine if an item is in first or last row
   const getRowPositions = (index: number) => {
@@ -72,19 +79,13 @@ export const StickiesList = observer((props: TProps) => {
   };
 
   if (loader === "init-loader") {
-    return (
-      <div className="min-h-[500px] overflow-scroll pb-2">
-        <Loader>
-          <Loader.Item height="300px" width="255px" />
-        </Loader>
-      </div>
-    );
+    return <StickiesLoader />;
   }
 
   if (loader === "loaded" && workspaceStickyIds.length === 0) {
     return (
       <div className="size-full grid place-items-center">
-        {isStickiesPage ? (
+        {isStickiesPage || searchQuery ? (
           <EmptyState
             type={searchQuery ? EmptyStateType.STICKIES_SEARCH : EmptyStateType.STICKIES}
             layout={searchQuery ? "screen-simple" : "screen-detailed"}
@@ -106,7 +107,7 @@ export const StickiesList = observer((props: TProps) => {
   return (
     <div className="transition-opacity duration-300 ease-in-out">
       {/* @ts-expect-error type mismatch here */}
-      <Masonry elementType="div">
+      <Masonry elementType="div" ref={masonryRef}>
         {workspaceStickyIds.map((stickyId, index) => {
           const { isInFirstRow, isInLastRow } = getRowPositions(index);
           return (
@@ -119,6 +120,7 @@ export const StickiesList = observer((props: TProps) => {
               isLastChild={index === workspaceStickyIds.length - 1}
               isInFirstRow={isInFirstRow}
               isInLastRow={isInLastRow}
+              handleLayout={handleLayout}
             />
           );
         })}

web/core/components/stickies/layout/stickies-loader.tsx

@@ -0,0 +1,45 @@
+// plane ui
+import { Loader } from "@plane/ui";
+
+export const StickiesLoader = () => (
+  <div className="overflow-scroll pb-2 grid grid-cols-4 gap-4">
+    {Array.from({ length: 4 }).map((_, index) => (
+      <Loader key={index} className="space-y-5 border border-custom-border-200 p-3 rounded">
+        <div className="space-y-2">
+          <Loader.Item height="20px" />
+          <Loader.Item height="15px" width="75%" />
+        </div>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+            <Loader.Item height="15px" width="100%" />
+          </div>
+          <div className="flex items-center gap-2">
+            <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+            <Loader.Item height="15px" width="75%" />
+          </div>
+          <div className="flex items-center gap-2">
+            <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+            <Loader.Item height="15px" width="90%" />
+          </div>
+          <div className="flex items-center gap-2">
+            <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+            <Loader.Item height="15px" width="60%" />
+          </div>
+          <div className="flex items-center gap-2">
+            <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+            <Loader.Item height="15px" width="50%" />
+          </div>
+        </div>
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <Loader.Item height="25px" width="25px" />
+            <Loader.Item height="25px" width="25px" />
+            <Loader.Item height="25px" width="25px" />
+          </div>
+          <Loader.Item height="25px" width="25px" className="flex-shrink-0" />
+        </div>
+      </Loader>
+    ))}
+  </div>
+);

web/core/components/stickies/layout/sticky-dnd-wrapper.tsx

@@ -15,123 +15,121 @@ import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { createRoot } from "react-dom/client";
+// plane types
 import { InstructionType } from "@plane/types";
+// plane ui
 import { DropIndicator } from "@plane/ui";
-import { cn } from "@plane/utils";
+// components
 import { StickyNote } from "../sticky";
+// helpers
 import { getInstructionFromPayload } from "./sticky.helpers";
 
-// Draggable Sticky Wrapper Component
-export const StickyDNDWrapper = observer(
-  ({
-    stickyId,
-    workspaceSlug,
-    itemWidth,
-    isLastChild,
-    isInFirstRow,
-    isInLastRow,
-    handleDrop,
-  }: {
-    stickyId: string;
-    workspaceSlug: string;
-    itemWidth: string;
-    isLastChild: boolean;
-    isInFirstRow: boolean;
-    isInLastRow: boolean;
-    handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
-  }) => {
-    const pathName = usePathname();
-    const [isDragging, setIsDragging] = useState(false);
-    const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
-    const elementRef = useRef<HTMLDivElement>(null);
+type Props = {
+  stickyId: string;
+  workspaceSlug: string;
+  itemWidth: string;
+  isLastChild: boolean;
+  isInFirstRow: boolean;
+  isInLastRow: boolean;
+  handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
+  handleLayout: () => void;
+};
 
-    useEffect(() => {
-      const element = elementRef.current;
-      if (!element) return;
+export const StickyDNDWrapper = observer((props: Props) => {
+  const { stickyId, workspaceSlug, itemWidth, isLastChild, isInFirstRow, isInLastRow, handleDrop, handleLayout } =
+    props;
+  // states
+  const [isDragging, setIsDragging] = useState(false);
+  const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
+  // refs
+  const elementRef = useRef<HTMLDivElement>(null);
+  // navigation
+  const pathname = usePathname();
 
-      const initialData = { id: stickyId, type: "sticky" };
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
 
-      if (pathName.includes("stickies"))
-        return combine(
-          draggable({
-            element,
-            dragHandle: element,
-            getInitialData: () => initialData,
-            onDragStart: () => {
-              setIsDragging(true);
-            },
-            onDrop: () => {
-              setIsDragging(false);
-            },
-            onGenerateDragPreview: ({ nativeSetDragImage }) => {
-              setCustomNativeDragPreview({
-                getOffset: pointerOutsideOfPreview({ x: "-200px", y: "0px" }),
-                render: ({ container }) => {
-                  const root = createRoot(container);
-                  root.render(
-                    <div className="scale-50">
-                      <div className="-m-2 max-h-[150px]">
-                        <StickyNote
-                          className={"w-[290px]"}
-                          workspaceSlug={workspaceSlug.toString()}
-                          stickyId={stickyId}
-                          showToolbar={false}
-                        />
-                      </div>
+    const initialData = { id: stickyId, type: "sticky" };
+
+    if (pathname.includes("stickies"))
+      return combine(
+        draggable({
+          element,
+          dragHandle: element,
+          getInitialData: () => initialData,
+          onDragStart: () => {
+            setIsDragging(true);
+          },
+          onDrop: () => {
+            setIsDragging(false);
+          },
+          onGenerateDragPreview: ({ nativeSetDragImage }) => {
+            setCustomNativeDragPreview({
+              getOffset: pointerOutsideOfPreview({ x: "-200px", y: "0px" }),
+              render: ({ container }) => {
+                const root = createRoot(container);
+                root.render(
+                  <div className="scale-50">
+                    <div className="-m-2 max-h-[150px]">
+                      <StickyNote
+                        className={"w-[290px]"}
+                        workspaceSlug={workspaceSlug.toString()}
+                        stickyId={stickyId}
+                        showToolbar={false}
+                      />
                     </div>
-                  );
-                  return () => root.unmount();
-                },
-                nativeSetDragImage,
-              });
-            },
-          }),
-          dropTargetForElements({
-            element,
-            canDrop: ({ source }) => source.data?.type === "sticky",
-            getData: ({ input, element }) => {
-              const blockedStates: InstructionType[] = ["make-child"];
-              if (!isLastChild) {
-                blockedStates.push("reorder-below");
-              }
+                  </div>
+                );
+                return () => root.unmount();
+              },
+              nativeSetDragImage,
+            });
+          },
+        }),
+        dropTargetForElements({
+          element,
+          canDrop: ({ source }) => source.data?.type === "sticky",
+          getData: ({ input, element }) => {
+            const blockedStates: InstructionType[] = ["make-child"];
+            if (!isLastChild) {
+              blockedStates.push("reorder-below");
+            }
 
-              return attachInstruction(initialData, {
-                input,
-                element,
-                currentLevel: 1,
-                indentPerLevel: 0,
-                mode: isLastChild ? "last-in-group" : "standard",
-                block: blockedStates,
-              });
-            },
-            onDrag: ({ self, source, location }) => {
-              const instruction = getInstructionFromPayload(self, source, location);
-              setInstruction(instruction);
-            },
-            onDragLeave: () => {
-              setInstruction(undefined);
-            },
-            onDrop: ({ self, source, location }) => {
-              setInstruction(undefined);
-              handleDrop(self, source, location);
-            },
-          })
-        );
-    }, [stickyId, isDragging]);
+            return attachInstruction(initialData, {
+              input,
+              element,
+              currentLevel: 1,
+              indentPerLevel: 0,
+              mode: isLastChild ? "last-in-group" : "standard",
+              block: blockedStates,
+            });
+          },
+          onDrag: ({ self, source, location }) => {
+            const instruction = getInstructionFromPayload(self, source, location);
+            setInstruction(instruction);
+          },
+          onDragLeave: () => {
+            setInstruction(undefined);
+          },
+          onDrop: ({ self, source, location }) => {
+            setInstruction(undefined);
+            handleDrop(self, source, location);
+          },
+        })
+      );
+  }, [handleDrop, isDragging, isLastChild, pathname, stickyId, workspaceSlug]);
 
-    return (
-      <div className="relative" style={{ width: itemWidth }}>
-        {!isInFirstRow && <DropIndicator isVisible={instruction === "reorder-above"} />}
-        <div
-          ref={elementRef}
-          className={cn("flex min-h-[300px] box-border p-2", {
-            "opacity-50": isDragging,
-          })}
-        >
-          <StickyNote key={stickyId || "new"} workspaceSlug={workspaceSlug} stickyId={stickyId} />
-        </div>
-        {!isInLastRow && <DropIndicator isVisible={instruction === "reorder-below"} />}
-      </div>
-    );
-  }
-);
+  return (
+    <div className="flex min-h-[300px] box-border p-2 flex-col" style={{ width: itemWidth }}>
+      {!isInFirstRow && <DropIndicator isVisible={instruction === "reorder-above"} />}
+      <StickyNote
+        key={stickyId || "new"}
+        workspaceSlug={workspaceSlug}
+        stickyId={stickyId}
+        handleLayout={handleLayout}
+      />
+      {!isInLastRow && <DropIndicator isVisible={instruction === "reorder-below"} />}
+    </div>
+  );
+});

web/core/components/stickies/modal/stickies.tsx

@@ -1,8 +1,11 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Plus, X } from "lucide-react";
+// plane ui
 import { RecentStickyIcon } from "@plane/ui";
+// hooks
 import { useSticky } from "@/hooks/use-stickies";
+// components
 import { StickiesTruncated } from "../layout/stickies-truncated";
 import { useStickyOperations } from "../sticky/use-operations";
 import { StickySearch } from "./search";
@@ -13,8 +16,11 @@ type TProps = {
 
 export const Stickies = observer((props: TProps) => {
   const { handleClose } = props;
+  // navigation
   const { workspaceSlug } = useParams();
+  // store hooks
   const { creatingSticky, toggleShowNewSticky } = useSticky();
+  // sticky operations
   const { stickyOperations } = useStickyOperations({ workspaceSlug: workspaceSlug?.toString() });
 
   return (
@@ -22,9 +28,9 @@ export const Stickies = observer((props: TProps) => {
       {/* header */}
       <div className="flex items-center justify-between mb-6">
         {/* Title */}
-        <div className="text-custom-text-100 flex gap-2">
-          <RecentStickyIcon className="size-5 rotate-90" />
-          <p className="text-lg font-medium">Your stickies</p>
+        <div className="text-custom-text-200 flex items-center gap-2">
+          <RecentStickyIcon className="size-5 rotate-90 flex-shrink-0" />
+          <p className="text-xl font-medium">Your stickies</p>
         </div>
         {/* actions */}
         <div className="flex gap-2">
@@ -50,6 +56,7 @@ export const Stickies = observer((props: TProps) => {
           </button>
           {handleClose && (
             <button
+              type="button"
               onClick={handleClose}
               className="flex-shrink-0 grid place-items-center text-custom-text-300 hover:text-custom-text-100 hover:bg-custom-background-80 rounded p-1 transition-colors my-auto"
             >

web/core/components/stickies/sticky/inputs.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef } from "react";
-import { DebouncedFunc } from "lodash";
 import { Controller, useForm } from "react-hook-form";
 // plane editor
 import { EditorRefApi } from "@plane/editor";
@@ -13,7 +12,7 @@ import { StickyEditor } from "../../editor";
 type TProps = {
   stickyData: TSticky | undefined;
   workspaceSlug: string;
-  handleUpdate: DebouncedFunc<(payload: Partial<TSticky>) => Promise<void>>;
+  handleUpdate: (payload: Partial<TSticky>) => void;
   stickyId: string | undefined;
   showToolbar?: boolean;
   handleChange: (data: Partial<TSticky>) => Promise<void>;

web/core/components/stickies/sticky/root.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useState } from "react";
 import { debounce } from "lodash";
 import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
 import { Minimize2 } from "lucide-react";
 // plane types
 import { TSticky } from "@plane/types";
@@ -13,7 +12,6 @@ import { useSticky } from "@/hooks/use-stickies";
 import { STICKY_COLORS_LIST } from "../../editor/sticky-editor/color-palette";
 import { StickyDeleteModal } from "../delete-modal";
 import { StickyInput } from "./inputs";
-import { StickyItemDragHandle } from "./sticky-item-drag-handle";
 import { useStickyOperations } from "./use-operations";
 
 type TProps = {
@@ -22,11 +20,12 @@ type TProps = {
   className?: string;
   stickyId: string | undefined;
   showToolbar?: boolean;
+  handleLayout?: () => void;
 };
 export const StickyNote = observer((props: TProps) => {
-  const { onClose, workspaceSlug, className = "", stickyId, showToolbar } = props;
+  const { onClose, workspaceSlug, className = "", stickyId, showToolbar, handleLayout } = props;
   // navigation
-  const pathName = usePathname();
+  // const pathName = usePathname();
   // states
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   // store hooks
@@ -35,7 +34,7 @@ export const StickyNote = observer((props: TProps) => {
   const { stickyOperations } = useStickyOperations({ workspaceSlug });
   // derived values
   const stickyData = stickyId ? stickies[stickyId] : undefined;
-  const isStickiesPage = pathName?.includes("stickies");
+  // const isStickiesPage = pathName?.includes("stickies");
   const backgroundColor =
     STICKY_COLORS_LIST.find((c) => c.key === stickyData?.background_color)?.backgroundColor ||
     STICKY_COLORS_LIST[0].backgroundColor;
@@ -79,7 +78,7 @@ export const StickyNote = observer((props: TProps) => {
           backgroundColor,
         }}
       >
-        {isStickiesPage && <StickyItemDragHandle isDragging={false} />}{" "}
+        {/* {isStickiesPage && <StickyItemDragHandle isDragging={false} />}{" "} */}
         {onClose && (
           <button type="button" className="flex w-full" onClick={onClose}>
             <Minimize2 className="size-4 m-auto mr-0" />
@@ -89,7 +88,10 @@ export const StickyNote = observer((props: TProps) => {
         <StickyInput
           stickyData={stickyData}
           workspaceSlug={workspaceSlug}
-          handleUpdate={debouncedFormSave}
+          handleUpdate={(payload) => {
+            handleLayout?.();
+            debouncedFormSave(payload);
+          }}
           stickyId={stickyId}
           handleDelete={() => setIsDeleteModalOpen(true)}
           handleChange={handleChange}