chore: web app use client directive (#4747)

* chore: use client directive

* chore: use client directive

web/components/issues/archive-issue-modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { TIssue } from "@plane/types";

web/components/issues/attachment/attachment-detail.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";

web/components/issues/attachment/root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo } from "react";
 // hooks
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";

web/components/issues/bulk-operations/upgrade-banner.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 // ui
 import { getButtonStyling } from "@plane/ui";
 // constants

web/components/issues/confirm-issue-discard.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 
 // headless ui

web/components/issues/delete-issue-modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 // types
 import { TIssue } from "@plane/types";

web/components/issues/description-input.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useEffect, useState } from "react";
 import debounce from "lodash/debounce";
 import { observer } from "mobx-react";

web/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { RotateCcw } from "lucide-react";

web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks

web/components/issues/issue-detail/issue-activity/activity/actions/default.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks

web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, ReactNode } from "react";
 import { Network } from "lucide-react";
 // hooks

web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 // hooks
 import { Tooltip } from "@plane/ui";

web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks

web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks

web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";

web/components/issues/issue-detail/issue-activity/root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { History, LucideIcon, MessageCircle } from "lucide-react";

web/components/issues/issue-detail/label/create-label.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState, Fragment, useEffect } from "react";
 import { TwitterPicker } from "react-color";
 import { Controller, useForm } from "react-hook-form";

web/components/issues/issue-detail/label/root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { IIssueLabel, TIssue } from "@plane/types";

web/components/issues/issue-detail/links/create-update-link-modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect, Fragment } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";

web/components/issues/issue-detail/links/link-detail.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 // hooks
 // ui

web/components/issues/issue-detail/links/root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useMemo, useState } from "react";
 import { Plus } from "lucide-react";
 import { TIssueLink } from "@plane/types";

web/components/issues/issue-detail/main-content.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // types

web/components/issues/issue-detail/parent-select.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";

web/components/issues/issue-detail/parent/root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";

web/components/issues/issue-detail/parent/sibling-item.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";

web/components/issues/issue-detail/reactions/issue-comment.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { IUser } from "@plane/types";

web/components/issues/issue-detail/reactions/issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { IUser } from "@plane/types";

web/components/issues/issue-detail/relation-select.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";

web/components/issues/issue-detail/root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter } from "next/navigation";

web/components/issues/issue-detail/sidebar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";

web/components/issues/issue-detail/subscription.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import isNil from "lodash/isNil";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/calendar/base-calendar-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/calendar/calendar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";

web/components/issues/issue-layouts/calendar/day-tile.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/calendar/issue-block.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint-disable react/display-name */
 import { useState, useRef, forwardRef } from "react";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { differenceInCalendarDays } from "date-fns";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/empty-states/cycle.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";
@@ -65,8 +67,8 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
   const emptyStateType = isCompletedAndEmpty
     ? EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES
     : isEmptyFilters
-    ? EmptyStateType.PROJECT_EMPTY_FILTER
-    : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
+      ? EmptyStateType.PROJECT_EMPTY_FILTER
+      : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
   const additionalPath = isCompletedAndEmpty ? undefined : activeLayout ?? "list";
 
   return (

web/components/issues/issue-layouts/empty-states/module.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react-lite";
 // types

web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 import { TCycleGroups } from "@plane/types";

web/components/issues/issue-layouts/filters/applied-filters/members.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // ui

web/components/issues/issue-layouts/filters/applied-filters/module.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // hooks

web/components/issues/issue-layouts/filters/applied-filters/priority.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 
 // icons

web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 
 // icons

web/components/issues/issue-layouts/filters/applied-filters/state.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 
 // icons

web/components/issues/issue-layouts/filters/header/filters/assignee.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";

web/components/issues/issue-layouts/filters/header/filters/created-by.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";

web/components/issues/issue-layouts/filters/header/filters/cycle.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/header/filters/labels.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/header/filters/mentions.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";

web/components/issues/issue-layouts/filters/header/filters/module.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/header/filters/priority.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 

web/components/issues/issue-layouts/filters/header/filters/project.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/header/filters/state-group.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // components

web/components/issues/issue-layouts/filters/header/filters/state.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { Fragment, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";

web/components/issues/issue-layouts/filters/header/layout-selection.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 // ui

web/components/issues/issue-layouts/gantt/blocks.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 // hooks
 // ui

web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState, useRef, FC } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/kanban/block.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";

web/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -133,7 +135,16 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
         element,
       })
     );
-  }, [columnRef, groupId, sub_group_id, setIsDraggingOverColumn, orderBy, isDropDisabled, dropErrorMessage, handleOnDrop]);
+  }, [
+    columnRef,
+    groupId,
+    sub_group_id,
+    setIsDraggingOverColumn,
+    orderBy,
+    isDropDisabled,
+    dropErrorMessage,
+    handleOnDrop,
+  ]);
 
   const prePopulateQuickAddData = (
     groupByKey: string | undefined,
@@ -201,7 +212,7 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
       ref={columnRef}
     >
       <GroupDragOverlay
-        dragColumnOrientation={sub_group_by ? "justify-start": "justify-center" }
+        dragColumnOrientation={sub_group_by ? "justify-start" : "justify-center"}
         canOverlayBeVisible={canOverlayBeVisible}
         isDropDisabled={isDropDisabled}
         dropErrorMessage={dropErrorMessage}

web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";

web/components/issues/issue-layouts/list/block-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/list/block.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Dispatch, MouseEvent, SetStateAction, useEffect, useRef } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";

web/components/issues/issue-layouts/list/list-group.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

web/components/issues/issue-layouts/list/quick-add-issue-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";

web/components/issues/issue-layouts/properties/all-properties.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useMemo } from "react";
 import xor from "lodash/xor";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/properties/labels.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";

web/components/issues/issue-layouts/roots/project-layout-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/save-filter-view.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 import { Button } from "@plane/ui";

web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 //ui
 import {
   ArrowDownWideNarrow,

web/components/issues/issue-layouts/spreadsheet/issue-row.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Dispatch, MouseEvent, MutableRefObject, SetStateAction, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";

web/components/issues/issue-layouts/utils.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import clone from "lodash/clone";
 import concat from "lodash/concat";

web/components/issues/issue-modal/draft-issue-layout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";

web/components/issues/label.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 // components
 import { Tooltip } from "@plane/ui";

web/components/issues/parent-issues-list-modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 // headless ui

web/components/issues/peek-overview/properties.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import {

web/components/issues/title-input.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState, useEffect, useCallback } from "react";
 import { observer } from "mobx-react";
 // components