web/core/components/stickies/sticky/sticky-item-drag-handle.tsx (1)

18-20: Consider accessibility improvements for drag handle.

The drag handle's visibility relies solely on hover state (group-hover). This might cause accessibility issues for keyboard and touch device users.

Consider adding keyboard focus visibility:

-"hidden group-hover/sticky:flex absolute top-3 left-1/2 -translate-x-1/2 items-center justify-center rounded text-custom-sidebar-text-400 cursor-grab mr-2 rotate-90"
+"hidden group-hover/sticky:flex focus-within:flex absolute top-3 left-1/2 -translate-x-1/2 items-center justify-center rounded text-custom-sidebar-text-400 cursor-grab mr-2 rotate-90"

web/core/components/stickies/sticky/inputs.tsx (2)

76-76: Consider using CSS custom properties for dimensions.

Hardcoding dimensions in class names makes it harder to maintain consistent spacing across components.

Consider using CSS variables:

-containerClassName={"px-0 text-base min-h-[250px] w-full text-[#455068]"}
+containerClassName={"px-0 text-base min-h-[var(--sticky-min-height)] w-full text-[var(--text-color-secondary)]"}

---

78-78: Consider adding a default value for showToolbar prop.

The showToolbar prop is passed through without a default value, which could lead to undefined behavior.

Add a default value in the destructuring:

-showToolbar={showToolbar}
+showToolbar={showToolbar ?? true}

web/core/components/stickies/sticky/root.tsx (2)

24-25: Consider memoizing pathname check.

The pathname check could cause unnecessary re-renders when the path changes but doesn't affect the sticky functionality.

Consider using useMemo:

-const pathName = usePathname();
+const showDragHandle = useMemo(() => {
+  const pathName = usePathname();
+  return pathName?.includes("stickies") ?? false;
+}, [usePathname()]);

---

69-69: Remove unnecessary string literal.

The empty string literal after the conditional rendering is unnecessary.

-{pathName?.includes("stickies") && <StickyItemDragHandle isDragging={false} />}{" "}
+{pathName?.includes("stickies") && <StickyItemDragHandle isDragging={false} />}

web/core/components/editor/sticky-editor/editor.tsx (1)

85-106: Consider extracting toolbar visibility logic.

The toolbar visibility logic combines multiple concerns: conditional rendering, animation, and state management.

Consider extracting this into a separate component:

interface ToolbarWrapperProps {
  show: boolean;
  isFocused: boolean;
  editorRef: EditorRefApi | null;
  handleDelete: () => void;
  handleColorChange: (data: Partial<TSticky>) => Promise<void>;
}

const ToolbarWrapper: React.FC<ToolbarWrapperProps> = ({
  show,
  isFocused,
  editorRef,
  handleDelete,
  handleColorChange,
}) => {
  if (!show) return null;
  
  return (
    <div
      className={cn(
        "transition-all duration-300 ease-out origin-top",
        isFocused ? "max-h-[200px] opacity-100 scale-y-100 mt-3" : "max-h-0 opacity-0 scale-y-0 invisible"
      )}
    >
      <Toolbar
        executeCommand={(item) => {
          editorRef?.executeMenuItemCommand({
            itemKey: item.itemKey,
            ...item.extraProps,
          });
        }}
        handleDelete={handleDelete}
        handleColorChange={handleColorChange}
        editorRef={editorRef}
      />
    </div>
  );
};

web/core/components/stickies/layout/stickies-truncated.tsx (1)

17-21: Consider adding error handling for SWR data fetching

The SWR configuration disables revalidation, but there's no error handling or loading state management visible.

Consider adding error and loading states:

 useSWR(
   workspaceSlug ? `WORKSPACE_STICKIES_${workspaceSlug}` : null,
   workspaceSlug ? () => fetchWorkspaceStickies(workspaceSlug.toString()) : null,
-  { revalidateIfStale: false, revalidateOnFocus: false }
+  {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+    onError: (error) => {
+      // Handle error appropriately
+      console.error("Failed to fetch stickies:", error);
+    }
+  }

web/core/components/stickies/widget.tsx (1)

41-41: Consider adding loading state for StickiesTruncated

The StickiesTruncated component might benefit from a loading state while data is being fetched.

-        <StickiesTruncated />
+        {/* Add a loading state wrapper */}
+        <Suspense fallback={<LoadingSpinner />}>
+          <StickiesTruncated />
+        </Suspense>

web/core/components/stickies/modal/stickies.tsx (1)

63-63: Add aria-label for better accessibility

The scrollable content area should have an appropriate aria-label.

-      <div className="mb-4 max-h-[625px] overflow-scroll">
+      <div 
+        className="mb-4 max-h-[625px] overflow-scroll"
+        aria-label="Stickies content"
+      >

web/app/[workspaceSlug]/(projects)/stickies/layout.tsx (1)

6-13: LGTM! Consider using type alias for props

The layout implementation is clean and follows best practices. Consider extracting the props type to improve reusability:

type WorkspaceStickiesLayoutProps = {
  children: React.ReactNode;
};

export default function WorkspaceStickiesLayout({ children }: WorkspaceStickiesLayoutProps) {
  // ... rest of the implementation
}

web/app/[workspaceSlug]/(projects)/stickies/page.tsx (1)

14-14: Improve type safety for workspaceSlug

Instead of type casting, consider using type guard for better type safety:

const workspaceSlug = typeof routeWorkspaceSlug === 'string' ? routeWorkspaceSlug : undefined;

apiserver/plane/db/models/sticky.py (1)

39-44: Consider handling potential HTML processing errors.

While the HTML stripping logic is correct, it should handle potential exceptions from the strip_tags function to prevent save failures.

 def save(self, *args, **kwargs):
     # Strip the html tags using html parser
-    self.description_stripped = (
-        None
-        if (self.description_html == "" or self.description_html is None)
-        else strip_tags(self.description_html)
-    )
+    try:
+        self.description_stripped = (
+            None
+            if (self.description_html == "" or self.description_html is None)
+            else strip_tags(self.description_html)
+        )
+    except Exception as e:
+        # Log the error but don't block the save
+        self.description_stripped = None

web/core/components/stickies/layout/sticky.helpers.ts (1)

18-45: Consider adding error boundaries for edge cases.

The function handles multiple scenarios well, but could benefit from additional error handling for malformed data.

 export const getInstructionFromPayload = (
   dropTarget: TDropTarget,
   source: TDropTarget,
   location: IPragmaticPayloadLocation
 ): InstructionType | undefined => {
+  // Early validation of required parameters
+  if (!dropTarget || !source || !location) {
+    console.warn('Invalid parameters provided to getInstructionFromPayload');
+    return undefined;
+  }

   const dropTargetData = dropTarget?.data as TargetData;
   const sourceData = source?.data as TargetData;
   const allDropTargets = location?.current?.dropTargets;

apiserver/plane/app/views/workspace/sticky.py (1)

42-44: Consider adding index for performance optimization.

The ordering and filtering on sort_order and description_stripped fields would benefit from database indexes for better query performance.

Consider adding the following indexes to your model:

class Meta:
    indexes = [
        models.Index(fields=['-sort_order']),
        models.Index(fields=['description_stripped']),
    ]

web/core/components/stickies/layout/stickies-infinite.tsx (2)

29-32: Add debouncing to prevent rapid load more calls.

The handleLoadMore function should be debounced to prevent multiple rapid calls when scrolling.

+import { debounce } from 'lodash';

-const handleLoadMore = () => {
+const handleLoadMore = debounce(() => {
   if (loader === "pagination") return;
   fetchNextWorkspaceStickies(workspaceSlug?.toString());
-};
+}, 300);

---

46-57: Consider adding aria-label for accessibility.

The intersection element should include appropriate ARIA attributes for screen readers.

 <div
   className={cn("flex min-h-[300px] box-border p-2 w-full")}
   ref={setElementRef}
   id="intersection-element"
+  role="status"
+  aria-label="Loading more stickies"
 >

web/core/components/stickies/modal/search.tsx (1)

41-46: Consider memoizing dependencies for debounced search.

The debouncedSearch callback depends on fetchStickies, but fetchStickies itself depends on workspaceSlug and fetchWorkspaceStickies. Consider including these dependencies in the dependency array to prevent stale closures.

  const debouncedSearch = useCallback(
    debounce(async () => {
      await fetchStickies();
    }, 500),
-    [fetchWorkspaceStickies]
+    [fetchWorkspaceStickies, workspaceSlug]
  );

web/core/components/stickies/sticky/use-operations.tsx (1)

23-26: Cache random color generation function.

The getRandomStickyColor function should be memoized to prevent unnecessary recalculations.

+ const memoizedGetRandomStickyColor = useMemo(() => {
    const getRandomStickyColor = (): string => {
      const randomIndex = Math.floor(Math.random() * STICKY_COLORS.length);
      return STICKY_COLORS[randomIndex];
    };
+   return getRandomStickyColor;
+ }, []);

web/core/components/core/content-overflow-HOC.tsx (1)

12-12: Add type constraints for customButton prop.

The customButton prop should have stricter type constraints to ensure proper rendering.

- customButton?: ReactNode;
+ customButton?: JSX.Element;

web/core/components/stickies/layout/stickies-list.tsx (1)

114-122: Extract breakpoint values as named constants

The magic numbers in the column count logic could be more maintainable as named constants.

Consider this refactoring:

+  const BREAKPOINTS = {
+    SM: 640,
+    MD: 768,
+    LG: 1024,
+    XL: 1280,
+  } as const;
+
+  const COLUMN_COUNTS = {
+    DEFAULT: 4,
+    SM: 2,
+    MD: 3,
+    LG: 4,
+    XL: 5,
+    XXL: 6,
+  } as const;
+
   const getColumnCount = (width: number | null): number => {
-    if (width === null) return 4;
+    if (width === null) return COLUMN_COUNTS.DEFAULT;
 
-    if (width < 640) return 2; // sm
-    if (width < 768) return 3; // md
-    if (width < 1024) return 4; // lg
-    if (width < 1280) return 5; // xl
-    return 6; // 2xl and above
+    if (width < BREAKPOINTS.SM) return COLUMN_COUNTS.SM;
+    if (width < BREAKPOINTS.MD) return COLUMN_COUNTS.MD;
+    if (width < BREAKPOINTS.LG) return COLUMN_COUNTS.LG;
+    if (width < BREAKPOINTS.XL) return COLUMN_COUNTS.XL;
+    return COLUMN_COUNTS.XXL;
   };

web/core/components/stickies/empty.tsx (2)

12-46: Enhance accessibility for empty state

The empty state could benefit from improved accessibility.

Consider these improvements:

-    <div className="flex justify-center min-h-[500px] rounded border-[1.5px] border-custom-border-100 mx-2 h-full">
+    <div 
+      className="flex justify-center min-h-[500px] rounded border-[1.5px] border-custom-border-100 mx-2 h-full"
+      role="region"
+      aria-label={query ? "No search results" : "Empty stickies state"}
+    >
       <div className="m-auto">
         <div
           className={`mb-2 rounded-full mx-auto last:rounded-full w-[50px] h-[50px] flex items-center justify-center bg-custom-background-80/40 transition-transform duration-300`}
+          aria-hidden="true"
         >
           <StickyIcon className="size-[30px] rotate-90 text-custom-text-350/20" />
         </div>

---

36-44: Improve loading state accessibility

The loading spinner needs proper ARIA attributes.

Consider this enhancement:

             {creatingSticky && (
-              <div className="flex items-center justify-center ml-2">
+              <div 
+                className="flex items-center justify-center ml-2"
+                role="status"
+                aria-live="polite"
+              >
                 <div
                   className={`w-4 h-4 border-2 border-t-transparent rounded-full animate-spin border-custom-primary-100`}
-                  role="status"
-                  aria-label="loading"
+                  aria-hidden="true"
                 />
+                <span className="sr-only">Creating sticky note...</span>
               </div>
             )}

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

113-113: Remove isDragging from useEffect dependency array

Including isDragging in the dependency array causes the useEffect hook to re-run whenever isDragging changes, leading to unnecessary re-executions and potential issues with event registrations. Consider removing isDragging from the dependency array.

Apply this diff to adjust the dependency array:

- }, [stickyId, isDragging]);
+ }, [stickyId]);

---

69-69: Eliminate unnecessary .toString() on workspaceSlug

The workspaceSlug is already a string as per its type definition, so calling .toString() is unnecessary.

Apply this diff to simplify the code:

- workspaceSlug={workspaceSlug.toString()}
+ workspaceSlug={workspaceSlug}

---

124-124: Simplify the key prop usage

Since stickyId is always a string (as it's a required prop), the fallback "new" is unnecessary. You can directly use stickyId as the key.

Apply this diff:

- <StickyNote key={stickyId || "new"} workspaceSlug={workspaceSlug} stickyId={stickyId} />
+ <StickyNote key={stickyId} workspaceSlug={workspaceSlug} stickyId={stickyId} />

web/core/store/sticky/sticky.store.ts (1)

139-143: Improve loader state management

Setting this.loader inside conditional blocks may lead to inconsistent loader states if multiple requests are initiated simultaneously. This can cause UI flickering or incorrect loading indicators.

Consider refactoring the loader state management to handle multiple concurrent requests more gracefully, possibly by implementing a request counter or using separate loader states for different requests.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

web/core/components/stickies/layout/stickies-list.tsx (1)

44-61: ⚠️ Potential issue

Simplify handleDrop logic and improve error handling

The nested conditionals make the code harder to follow, and the error handling could be more robust.

The previous review comment's suggestion to refactor this function is still valid and should be implemented.

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

45-117: ⚠️ Potential issue

Ensure proper cleanup in useEffect

The previous review comment's suggestion about adding proper cleanup is still valid and should be implemented.

Add error handling in drag preview rendering

The drag preview rendering lacks error handling which could cause issues if the rendering fails.

  render: ({ container }) => {
+   try {
      const root = createRoot(container);
      root.render(
        // ... existing code
      );
      return () => root.unmount();
+   } catch (error) {
+     console.error("Failed to render drag preview:", error);
+     return () => {};
+   }
  },

web/core/components/stickies/layout/stickies-list.tsx (1)

73-84: Add loading state during sticky creation

The empty state handles the creation action but doesn't show a loading indicator while the sticky is being created. This could lead to a poor user experience if the creation takes time.

Consider adding a loading state:

  return (
    <EmptyState
      query={searchQuery}
      creatingSticky={creatingSticky}
      handleCreate={() => {
+       if (creatingSticky) return;
        toggleShowNewSticky(true);
        stickyOperations.create();
      }}
+     isLoading={creatingSticky}
    />
  );

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

21-44: Add prop validation for required fields

While the props are well-typed, runtime validation for required props would improve reliability.

Consider adding validation:

+  if (!stickyId || !workspaceSlug) {
+    console.error("stickyId and workspaceSlug are required");
+    return null;
+  }

---

86-116: Improve type safety for instruction system

The instruction system could benefit from stronger type safety to prevent potential runtime errors.

Consider adding type guards:

+ const isValidInstruction = (instruction: unknown): instruction is InstructionType => {
+   return instruction === "make-child" || instruction === "reorder-above" || instruction === "reorder-below";
+ };

  onDrag: ({ self, source, location }) => {
    const instruction = getInstructionFromPayload(self, source, location);
+   if (!isValidInstruction(instruction)) return;
    setInstruction(instruction);
  },

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

web/core/components/home/widgets/empty-states/links.tsx (1)

1-13: Consider implementing a compound component pattern

Given that this component is part of a larger feature change, consider implementing a compound component pattern to maintain flexibility. This would allow different parts of the application to either use this static version or wrap it with interactive features as needed.

Example structure:

const Links = {
  EmptyState: LinksEmptyState,
  // Other related components can be added here
  // Interactive: LinksInteractive,
  // Container: LinksContainer,
};

export default Links;

web/core/components/home/widgets/empty-states/recents.tsx (2)

4-4: Consider using literal type for better type safety

Instead of using a generic string type, consider using a union type of specific values to ensure type safety.

-export const RecentsEmptyState = ({ type }: { type: string }) => {
+type RecentsType = 'project' | 'page' | 'issue' | 'all item';
+export const RecentsEmptyState = ({ type }: { type: RecentsType }) => {

---

5-28: Extract constants for better maintainability

Consider extracting the display content configurations into constants to improve maintainability and reusability.

+const DISPLAY_CONTENT_CONFIG = {
+  project: {
+    icon: <Briefcase size={30} className="text-custom-text-400/40" />,
+    text: "Your recent projects will appear here once you visit one.",
+  },
+  page: {
+    icon: <FileText size={30} className="text-custom-text-400/40" />,
+    text: "Your recent pages will appear here once you visit one.",
+  },
+  issue: {
+    icon: <LayersIcon className="text-custom-text-400/40 w-[30px] h-[30px]" />,
+    text: "Your recent issues will appear here once you visit one.",
+  },
+  default: {
+    icon: <History size={30} className="text-custom-text-400/40" />,
+    text: "You don't have any recent items yet.",
+  },
+};

 const getDisplayContent = () => {
-  switch (type) {
-    case "project":
-      return {
-        icon: <Briefcase size={30} className="text-custom-text-400/40" />,
-        text: "Your recent projects will appear here once you visit one.",
-      };
-    // ... other cases
-    default:
-      return {
-        icon: <History size={30} className="text-custom-text-400/40" />,
-        text: "You don't have any recent items yet.",
-      };
-  }
+  return DISPLAY_CONTENT_CONFIG[type as keyof typeof DISPLAY_CONTENT_CONFIG] 
+    ?? DISPLAY_CONTENT_CONFIG.default;
 };

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

web/core/components/stickies/modal/search.tsx (1)

76-79: ⚠️ Potential issue

Add error handling for debouncedSearch call.

The search operation could fail, but errors are not handled.

   onChange={(e) => {
     updateSearchQuery(e.target.value);
-    debouncedSearch();
+    debouncedSearch().catch((error) => {
+      console.error("Search failed:", error);
+      // Consider showing a user-friendly error message
+    });
   }}

web/core/components/home/widgets/empty-states/recents.tsx (3)

4-4: Consider using a union type for better type safety.

Instead of using a generic string type, consider defining specific valid values to prevent potential runtime errors.

-export const RecentsEmptyState = ({ type }: { type: string }) => {
+type RecentsType = 'project' | 'page' | 'issue' | 'default';
+export const RecentsEmptyState = ({ type }: { type: RecentsType }) => {

---

5-28: LGTM! Well-structured content generation logic.

The switch statement is well-organized with consistent object structure and appropriate default case handling.

Consider standardizing icon styling approach.

While the implementation works, there's a slight inconsistency in how the LayersIcon styling is applied compared to other icons.

-          icon: <LayersIcon className="text-custom-text-400/40 w-[30px] h-[30px]" />,
+          icon: <LayersIcon size={30} className="text-custom-text-400/40" />,

---

31-37: Consider adding ARIA labels for better accessibility.

The layout and styling look good, but consider adding appropriate ARIA labels to improve accessibility.

-    <div className="min-h-[120px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
+    <div 
+      className="min-h-[120px] flex w-full justify-center py-6 bg-custom-border-100 rounded"
+      role="status"
+      aria-label={`No recent ${type === 'default' ? 'items' : type + 's'}`}
+    >

web/core/components/stickies/sticky/use-operations.tsx (2)

23-38: Consider a more SSR-friendly approach for HTML content validation.

The current implementation uses DOM manipulation which could cause issues in SSR environments. Consider using a regex-based approach or a lightweight HTML parser library.

-const isHtmlContentEmpty = (html: string): boolean => {
-  // Create a temporary DOM element
-  const tempElement = document.createElement("div");
-  tempElement.innerHTML = html;
-
-  // Get text content and trim whitespace
-  const textContent = tempElement.textContent || "";
-  const trimmedContent = textContent.trim();
-
-  return trimmedContent.length === 0;
-};
+const isHtmlContentEmpty = (html: string): boolean => {
+  // Remove HTML tags and decode entities
+  const textContent = html
+    .replace(/<[^>]*>/g, '')
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>');
+  return textContent.trim().length === 0;
+};

---

40-43: Consider memoizing color selection for performance.

If this function is called frequently, consider memoizing the random color selection or moving it to a constant if the color doesn't need to change during the session.

+const memoizedRandomColor = useMemo(() => {
+  const randomIndex = Math.floor(Math.random() * STICKY_COLORS.length);
+  return STICKY_COLORS[randomIndex];
+}, []); // Color stays constant during session
+
 export const getRandomStickyColor = (): string => {
-  const randomIndex = Math.floor(Math.random() * STICKY_COLORS.length);
-  return STICKY_COLORS[randomIndex];
+  return memoizedRandomColor;
 };

web/core/components/stickies/modal/search.tsx (2)

Line range hint 3-18: Consider memoizing the fetchStickies function.

The fetchStickies function is recreated on every render but used in the useCallback hook's dependency array. This could lead to unnecessary re-renders.

-  const fetchStickies = async () => {
-    await fetchWorkspaceStickies(workspaceSlug.toString());
-  };

+  const fetchStickies = useCallback(async () => {
+    await fetchWorkspaceStickies(workspaceSlug.toString());
+  }, [fetchWorkspaceStickies, workspaceSlug]);

---

41-46: Consider adding a loading state during search.

The debounced search operation could take time, but there's no visual feedback to users.

+ const [isSearching, setIsSearching] = useState(false);

  const debouncedSearch = useCallback(
    debounce(async () => {
+     setIsSearching(true);
      try {
        await fetchStickies();
+     } finally {
+       setIsSearching(false);
+     }
    }, 500),
    [fetchWorkspaceStickies]
  );

web/core/store/sticky/sticky.store.ts (1)

102-135: Consider adding retry logic for fetchNextWorkspaceStickies.

The method handles errors but doesn't provide any retry mechanism, which could be useful for handling temporary network issues.

+ const MAX_RETRIES = 3;
+ const RETRY_DELAY = 1000;

  fetchNextWorkspaceStickies = async (workspaceSlug: string) => {
+   let retries = 0;
    try {
      if (!this.paginationInfo?.next_cursor || !this.paginationInfo.next_page_results || this.loader === "pagination") {
        return;
      }
      this.loader = "pagination";
+     while (retries < MAX_RETRIES) {
        try {
          const response = await this.stickyService.getStickies(
            workspaceSlug,
            this.paginationInfo.next_cursor,
            this.searchQuery
          );
          // ... rest of the success logic ...
+         break;
+       } catch (e) {
+         retries++;
+         if (retries === MAX_RETRIES) throw e;
+         await new Promise(resolve => setTimeout(resolve, RETRY_DELAY));
+       }
+     }
    } catch (e) {
      console.error(e);
      runInAction(() => {
        this.loader = "loaded";
      });
    }
  };

web/core/components/stickies/layout/stickies-truncated.tsx (1)

10-13: Add type safety for workspaceSlug parameter.

Consider adding type safety by explicitly typing the params object:

-  const { workspaceSlug } = useParams();
+  const { workspaceSlug } = useParams() as { workspaceSlug: string };

web/core/components/home/widgets/empty-states/links.tsx (1)

4-4: Consider accessibility improvements

The component could benefit from semantic HTML and accessibility attributes.

Consider this enhancement:

-    <div className="min-h-[110px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
+    <section aria-label="Quick Links Empty State" className="min-h-[110px] flex w-full justify-center py-6 bg-custom-border-100 rounded">

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

24-42: Add prop validation for required props

The component accepts several required props but lacks validation. Consider adding runtime checks to provide helpful error messages during development.

 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;
   }) => {
+    if (!stickyId || !workspaceSlug) {
+      console.error('StickyDNDWrapper: stickyId and workspaceSlug are required');
+      return null;
+    }

web/core/components/stickies/layout/stickies-list.tsx (2)

36-42: Memoize row position calculations for better performance

The getRowPositions function is recreated on every render and performs calculations that could be memoized.

+  const getRowPositions = useMemo(() => (index: number) => {
     const currentRow = Math.floor(index / columnCount);
     return {
       isInFirstRow: currentRow === 0,
       isInLastRow: currentRow === totalRows - 1 || index >= workspaceStickies.length - columnCount,
     };
-  };
+  }, [columnCount, totalRows, workspaceStickies.length]);

---

130-138: Extract breakpoints and column counts to configuration

The breakpoint values and corresponding column counts should be extracted to configuration constants for better maintainability.

+const BREAKPOINTS = {
+  SM: 640,
+  MD: 768,
+  LG: 1024,
+  XL: 1280,
+} as const;
+
+const COLUMN_COUNTS = {
+  DEFAULT: 4,
+  SM: 2,
+  MD: 3,
+  LG: 4,
+  XL: 5,
+  XXL: 6,
+} as const;
+
 const getColumnCount = (width: number | null): number => {
-    if (width === null) return 4;
+    if (width === null) return COLUMN_COUNTS.DEFAULT;

-    if (width < 640) return 2; // sm
-    if (width < 768) return 3; // md
-    if (width < 1024) return 4; // lg
-    if (width < 1280) return 5; // xl
-    return 6; // 2xl and above
+    if (width < BREAKPOINTS.SM) return COLUMN_COUNTS.SM;
+    if (width < BREAKPOINTS.MD) return COLUMN_COUNTS.MD;
+    if (width < BREAKPOINTS.LG) return COLUMN_COUNTS.LG;
+    if (width < BREAKPOINTS.XL) return COLUMN_COUNTS.XL;
+    return COLUMN_COUNTS.XXL;
   };

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

web/core/components/stickies/sticky/use-operations.tsx (2)

64-85: ⚠️ Potential issue

Fix the empty sticky check logic.

The empty sticky check has several issues that need to be addressed.

The condition getWorkspaceStickies(workspaceSlug).length >= 0 is always true, and there's a redundant call to getWorkspaceStickies. This should be fixed as suggested in the previous review.

---

151-151: ⚠️ Potential issue

Add missing dependencies to useMemo.

The dependency array is missing several dependencies that are used within the memoized operations.

This issue was previously identified and should be fixed as suggested in the earlier review.

web/core/components/stickies/sticky/use-operations.tsx (2)

23-38: Consider optimizing HTML content check for SSR compatibility.

The current implementation uses DOM manipulation which could cause issues in SSR environments. Consider using a regex-based approach or a lightweight HTML parser library.

-const isHtmlContentEmpty = (html: string): boolean => {
-  // Create a temporary DOM element
-  const tempElement = document.createElement("div");
-  tempElement.innerHTML = html;
-
-  // Get text content and trim whitespace
-  const textContent = tempElement.textContent || "";
-  const trimmedContent = textContent.trim();
-
-  return trimmedContent.length === 0;
-};
+const isHtmlContentEmpty = (html: string): boolean => {
+  // Remove HTML tags and decode entities
+  const textContent = html
+    .replace(/<[^>]*>/g, '')
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>');
+  
+  return textContent.trim().length === 0;
+};

---

40-43: Consider memoizing the random color selection.

The getRandomStickyColor function is simple and effective. However, if it's called frequently (e.g., during rapid sticky creation), consider memoizing the result for a short duration.

+const colorCache = {
+  color: '',
+  timestamp: 0,
+  TTL: 1000, // 1 second
+};
+
 export const getRandomStickyColor = (): string => {
+  const now = Date.now();
+  if (now - colorCache.timestamp < colorCache.TTL) {
+    return colorCache.color;
+  }
+
   const randomIndex = Math.floor(Math.random() * STICKY_COLORS.length);
-  return STICKY_COLORS[randomIndex];
+  colorCache.color = STICKY_COLORS[randomIndex];
+  colorCache.timestamp = now;
+  return colorCache.color;
 };

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

web/core/components/home/widgets/empty-states/root.tsx (1)

Line range hint 33-40: Add aria-label to the create project button for better accessibility.

The button's onClick handler should also have proper error handling and feedback for users without permissions.

 cta: {
   text: "Create Project",
+  ariaLabel: "Create a new project",
   onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     if (!canCreateProject) {
+      e.preventDefault();
+      e.stopPropagation();
+      // Show a tooltip or notification explaining why the action is not allowed
+      return;
     }
     e.preventDefault();
     e.stopPropagation();
     setTrackElement("Sidebar");
     toggleCreateProjectModal(true);
   },
 },

web/core/components/stickies/action-bar.tsx (2)

33-36: Add null checks and improve color fallback logic.

The derived value helps centralize color management, but consider these improvements:

1. Add null check for stickies[recentStickyId] to prevent runtime errors
2. Consider a more explicit fallback color instead of relying on the first color in the list

   const recentStickyBackgroundColor = recentStickyId
-    ? STICKY_COLORS_LIST.find((c) => c.key === stickies[recentStickyId].background_color)?.backgroundColor
-    : STICKY_COLORS_LIST[0].backgroundColor;
+    ? STICKY_COLORS_LIST.find((c) => c.key === stickies[recentStickyId]?.background_color)?.backgroundColor
+      ?? '#E2E8F0' // explicit fallback color
+    : '#E2E8F0';

---

Line range hint 78-92: Consider accessibility improvements for tooltips.

While the tooltip implementation is good, consider these accessibility enhancements:

1. Add aria-label to buttons
2. Consider adding keyboard navigation support for the tooltip content

   <button
     className="btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-custom-background-100"
     onClick={() => setShowRecentSticky(true)}
+    aria-label="Show recent sticky note"
     style={{ color: recentStickyBackgroundColor }}
   >

web/core/components/stickies/sticky/inputs.tsx (2)

38-45: Add error handling to form submission.

The form submission callback should include error handling to gracefully handle potential failures.

Consider updating the implementation:

 const handleFormSubmit = useCallback(
   async (formdata: Partial<TSticky>) => {
+    try {
       await handleUpdate({
         description_html: formdata.description_html ?? "<p></p>",
       });
+    } catch (error) {
+      console.error("Failed to update sticky:", error);
+      // Consider adding user notification here
+    }
   },
   [handleUpdate]
 );

---

71-74: Consider improvements to editor configuration.

A few suggestions to enhance the editor configuration:

1. The placeholder text could be more descriptive for better user guidance
2. Consider making the min-height configurable through props

Consider these improvements:

-placeholder="Click to type here"
+placeholder="Enter your note content here..."
-containerClassName="px-0 text-base min-h-[250px] w-full"
+containerClassName={`px-0 text-base min-h-[${minHeight ?? '250px'}] w-full`}

Add the minHeight prop to TProps:

type TProps = {
  // ... existing props
  minHeight?: string;
};

web/core/components/home/widgets/manage/widget-item.tsx (2)

49-49: Add null check for widget title lookup.

Consider adding a fallback for cases where the widget key might not exist in HOME_WIDGETS_LIST.

-  const widgetTitle = HOME_WIDGETS_LIST[widget.key]?.title;
+  const widgetTitle = HOME_WIDGETS_LIST[widget.key]?.title ?? widget.key.replaceAll("_", " ");

---

Line range hint 52-119: Consider adding error boundaries for drag-and-drop operations.

The drag-and-drop implementation is robust, but adding error boundaries would help gracefully handle any potential failures during drag operations and prevent the entire widget management interface from breaking.

Would you like me to provide an example implementation of an error boundary component for the drag-and-drop operations?

web/core/components/home/widgets/empty-states/stickies.tsx (1)

4-13: LGTM! Consider adding aria-label for better accessibility.

The empty state implementation is clean and follows React best practices. The styling is consistent with Tailwind conventions.

Consider adding an aria-label to improve accessibility:

-  <div className="min-h-[110px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
+  <div className="min-h-[110px] flex w-full justify-center py-6 bg-custom-border-100 rounded" aria-label="No stickies available">

web/core/components/editor/sticky-editor/color-palette.tsx (2)

50-52: Consider adding validation for color keys.

The type definition looks good, but consider adding validation to ensure background_color matches the available color keys.

type TColorKey = typeof STICKY_COLORS_LIST[number]['key'];

type TProps = {
  handleUpdate: (data: Partial<Omit<TSticky, 'background_color'> & { background_color: TColorKey }>) => Promise<void>;
};

---

54-78: Consider keyboard navigation improvements.

The color palette implementation is good, but could benefit from keyboard navigation enhancements.

Consider these improvements:

1. Add aria-label to buttons with color names
2. Implement arrow key navigation between colors
3. Add role="toolbar" to the color palette container

-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap gap-2" role="toolbar">
       {STICKY_COLORS_LIST.map((color) => (
         <button
           key={color.key}
           type="button"
+          aria-label={`${color.label} background color`}
           onClick={() => {

web/core/components/home/home-dashboard-widgets.tsx (1)

68-93: Consider extracting widget rendering logic to a separate component.

The conditional rendering logic for widgets could be extracted to improve readability and maintainability.

+const WidgetRenderer: React.FC<{
+  widgetKey: THomeWidgetKeys;
+  widgetComponent: React.FC<THomeWidgetProps> | null;
+  isEnabled: boolean;
+  workspaceSlug: string;
+}> = ({ widgetKey, widgetComponent: WidgetComponent, isEnabled, workspaceSlug }) => {
+  if (!WidgetComponent || !isEnabled) return null;
+  return (
+    <div key={widgetKey} className="py-4">
+      <WidgetComponent workspaceSlug={workspaceSlug.toString()} />
+    </div>
+  );
+};

 {isAnyWidgetEnabled ? (
   <div className="flex flex-col divide-y-[1px] divide-custom-border-100">
     {orderedWidgets.map((key) => {
-      const WidgetComponent = HOME_WIDGETS_LIST[key]?.component;
-      const isEnabled = widgetsMap[key]?.is_enabled;
-      if (!WidgetComponent || !isEnabled) return null;
-      return (
-        <div key={key} className="py-4">
-          <WidgetComponent workspaceSlug={workspaceSlug.toString()} />
-        </div>
-      );
+      return (
+        <WidgetRenderer
+          key={key}
+          widgetKey={key}
+          widgetComponent={HOME_WIDGETS_LIST[key]?.component}
+          isEnabled={widgetsMap[key]?.is_enabled}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      );
     })}
   </div>
 ) : (
   // ... empty state remains the same
 )}

web/core/components/home/widgets/empty-states/root.tsx (1)

Line range hint 20-24: Consider memoizing the canCreateProject value.

Since this value depends on permissions that may not change frequently, memoizing it could prevent unnecessary recalculations.

-const canCreateProject = allowPermissions(
+const canCreateProject = React.useMemo(() => allowPermissions(
   [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
   EUserPermissionsLevel.WORKSPACE
-);
+), [allowPermissions]);

web/core/components/empty-state/empty-state.tsx (1)

78-79: Consider destructuring primaryButtonConfig for better readability.

The repeated access to primaryButtonConfig properties could be simplified.

+const { size, variant } = primaryButtonConfig;
 const commonProps = {
-  size: primaryButtonConfig.size,
-  variant: primaryButtonConfig.variant,
+  size,
+  variant,
   prependIcon: primaryButton.icon,
   onClick: primaryButtonOnClick ? primaryButtonOnClick : undefined,
   disabled: !isEditingAllowed,
 };

web/core/constants/empty-state.tsx (1)

946-957: Consider adding a secondary action for widget management.

The HOME_WIDGETS empty state could benefit from a secondary action to help users understand what widgets are available.

 [EmptyStateType.HOME_WIDGETS]: {
   key: EmptyStateType.HOME_WIDGETS,
   title: "It's Quiet Without Widgets, Turn Them On",
   description: "It looks like all your widgets are turned off. Enable them\nnow to enhance your experience!",
   path: "/empty-state/dashboard/widgets",
   primaryButton: {
     icon: <Shapes className="size-4" />,
     text: "Manage widgets",
   },
+  secondaryButton: {
+    text: "Learn about widgets",
+    comicBox: {
+      title: "Widgets enhance your dashboard",
+      description: "Widgets show you quick links, recent activity, and your stickies at a glance.",
+    },
+  },
   access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
   accessType: "workspace",
 },

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

web/app/[workspaceSlug]/(projects)/stickies/page.tsx (2)

7-16: Add loading state and error handling.

While the implementation is clean, consider these improvements for better user experience and reliability:

1. Add a loading state while StickiesInfinite is initializing
2. Wrap StickiesInfinite with an error boundary

 export default function WorkspaceStickiesPage() {
   return (
     <>
       <PageHead title="Your stickies" />
-      <div className="relative h-full w-full overflow-hidden overflow-y-auto">
-        <StickiesInfinite />
+      <div className="relative h-full w-full overflow-hidden overflow-y-auto" role="main">
+        <ErrorBoundary fallback={<StickyErrorState />}>
+          <Suspense fallback={<StickiesLoader />}>
+            <StickiesInfinite />
+          </Suspense>
+        </ErrorBoundary>
       </div>
     </>
   );
 }

---

11-11: Add ARIA landmark for better accessibility.

The main content div should have an ARIA landmark role for better screen reader navigation.

-<div className="relative h-full w-full overflow-hidden overflow-y-auto">
+<div className="relative h-full w-full overflow-hidden overflow-y-auto" role="main">

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro