chore: web app use client directive (#4747)

* chore: use client directive

* chore: use client directive

web/components/auth-screens/project/join-project.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 import Image from "next/image";
 import { useParams } from "next/navigation";

web/components/command-palette/actions/help-actions.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { Command } from "cmdk";
 import { FileText, GithubIcon, MessageSquare, Rocket } from "lucide-react";
 // ui

web/components/common/empty-state.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 
 import Image from "next/image";

web/components/common/new-empty-state.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState } from "react";
 
 import Image from "next/image";

web/components/common/product-updates-modal.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import useSWR from "swr";
 // headless ui

web/components/core/filters/date-filter-modal.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { Fragment } from "react";
 
 import { DayPicker } from "react-day-picker";

web/components/core/filters/date-filter-select.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { CalendarDays } from "lucide-react";
 // ui

web/components/core/list/list-item.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { FC } from "react";
 import { useRouter } from "next/navigation";
 // ui

web/components/core/modals/alert-modal.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { AlertTriangle, Info, LucideIcon } from "lucide-react";
 // ui
 import { Button, TButtonVariant } from "@plane/ui";

web/components/core/multiple-select/entity-select-action.tsx

@@ -1,3 +1,4 @@
+"use client";
 // ui
 import { Checkbox } from "@plane/ui";
 // helpers

web/components/core/multiple-select/group-select-action.tsx

@@ -1,3 +1,4 @@
+"use client";
 // ui
 import { Checkbox } from "@plane/ui";
 // helpers

web/components/core/sidebar/links-list.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { observer } from "mobx-react";
 // icons
 import { Pencil, Trash2, LinkIcon, ExternalLink } from "lucide-react";

web/components/core/sidebar/sidebar-progress-stats.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";

web/components/core/theme/color-picker-input.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { FC, Fragment } from "react";
 // react-form
 import { ColorResult, SketchPicker } from "react-color";

web/components/core/theme/custom-theme-selector.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import { Controller, useForm } from "react-hook-form";

web/components/core/theme/theme-switch.tsx

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

web/components/cycles/active-cycle/cycle-stats.tsx

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

web/components/cycles/active-cycle/header.tsx

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

web/components/cycles/active-cycle/progress.tsx

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

web/components/cycles/active-cycle/root.tsx

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

web/components/cycles/active-cycle/stats.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { Fragment } from "react";
 import { Tab } from "@headlessui/react";
 import { ICycle } from "@plane/types";

web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx

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

web/components/cycles/archived-cycles/modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, Fragment } from "react";
 import { useRouter } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";

web/components/cycles/board/cycles-board-card.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, MouseEvent, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -136,8 +138,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
     e.preventDefault();
     e.stopPropagation();
 
-    const query = generateQueryParams(searchParams, ['peekCycle']);
-    if (searchParams.has('peekCycle')) {
+    const query = generateQueryParams(searchParams, ["peekCycle"]);
+    if (searchParams.has("peekCycle")) {
       router.push(`${pathname}?${query}`);
     } else {
       router.push(`${pathname}?${query}&peekCycle=${cycleId}`);

web/components/cycles/delete-modal.tsx

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

web/components/cycles/form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // types

web/components/cycles/gantt-chart/blocks.tsx

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

web/components/cycles/list/cycle-list-group-header.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC } from "react";
 import { ChevronDown } from "lucide-react";
 // types

web/components/cycles/list/cycle-list-item-action.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
 import { CalendarCheck2, CalendarClock, MoveRight, Users } from "lucide-react";

web/components/cycles/list/cycles-list-item.tsx

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

web/components/cycles/modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 // types
 import type { CycleDateCheckData, ICycle, TCycleTabOptions } from "@plane/types";

web/components/cycles/quick-actions.tsx

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

web/components/cycles/sidebar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useCallback, useEffect, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";

web/components/cycles/transfer-issues-modal.tsx

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

web/components/cycles/transfer-issues.tsx

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

web/components/dashboard/project-empty-state.tsx

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

web/components/dashboard/widgets/dropdowns/duration-filter.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { ChevronDown } from "lucide-react";
 // components

web/components/dashboard/widgets/error-states/issues.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { AlertTriangle, RefreshCcw } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";

web/components/dashboard/widgets/issue-panels/issue-list-item.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import isToday from "date-fns/isToday";
 import { observer } from "mobx-react-lite";
 import { TIssue, TWidgetIssue } from "@plane/types";

web/components/dashboard/widgets/issue-panels/issues-list.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import { TAssignedIssuesWidgetResponse, TCreatedIssuesWidgetResponse, TIssue, TIssuesListTypes } from "@plane/types";
 // hooks

web/components/dashboard/widgets/loaders/assigned-issues.tsx

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

web/components/dashboard/widgets/loaders/issues-by-priority.tsx

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

web/components/dashboard/widgets/loaders/issues-by-state-group.tsx

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

web/components/dashboard/widgets/loaders/overview-stats.tsx

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

web/components/dashboard/widgets/loaders/recent-activity.tsx

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

web/components/dashboard/widgets/loaders/recent-collaborators.tsx

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

web/components/dashboard/widgets/loaders/recent-projects.tsx

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

web/components/dashboard/widgets/recent-activity.tsx

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

web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx

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

web/components/dashboard/widgets/recent-collaborators/default-list.tsx

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

web/components/dashboard/widgets/recent-collaborators/search-list.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";

web/components/dashboard/widgets/recent-projects.tsx

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

web/components/dropdowns/buttons.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 // helpers
 import { Tooltip } from "@plane/ui";
 import { cn } from "@/helpers/common.helper";

web/components/dropdowns/cycle/cycle-options.tsx

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

web/components/dropdowns/cycle/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ChevronDown } from "lucide-react";

web/components/dropdowns/date-range.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { DateRange, DayPicker, Matcher } from "react-day-picker";

web/components/dropdowns/member/avatar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 // icons
 import { LucideIcon, Users } from "lucide-react";
@@ -36,9 +38,5 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
     }
   }
 
-  return Icon ? (
-    <Icon className="h-3 w-3 flex-shrink-0" />
-  ) : (
-    <Users className="h-3 w-3 flex-shrink-0" />
-  );
+  return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className="h-3 w-3 flex-shrink-0" />;
 });

web/components/dropdowns/member/member-options.tsx

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

web/components/dropdowns/module/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ChevronDown, X } from "lucide-react";

web/components/dropdowns/module/module-options.tsx

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

web/components/dropdowns/priority.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, ReactNode, useRef, useState } from "react";
 import { useTheme } from "next-themes";
 import { usePopper } from "react-popper";

web/components/dropdowns/state.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";

web/components/editor/lite-text-editor/toolbar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState, useCallback } from "react";
 import { Globe2, Lock, LucideIcon } from "lucide-react";
 // editor

web/components/empty-state/empty-state.tsx

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

web/components/estimates/create/modal.tsx

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

web/components/estimates/create/stage-one.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { Crown, Info } from "lucide-react";
 import { TEstimateSystemKeys } from "@plane/types";

web/components/estimates/delete/modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";

web/components/estimates/empty-screen.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";

web/components/estimates/estimate-disable-switch.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";

web/components/estimates/loader-screen.tsx

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

web/components/estimates/points/create-root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Dispatch, FC, SetStateAction, useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { Plus } from "lucide-react";

web/components/estimates/points/create.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, MouseEvent, FocusEvent, useState } from "react";
 import { observer } from "mobx-react";
 import { Check, Info, X } from "lucide-react";

web/components/estimates/points/delete.tsx

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

web/components/estimates/points/select-dropdown.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useRef, Fragment, useState } from "react";
 import { Info, Check, ChevronDown } from "lucide-react";
 import { Listbox, Transition } from "@headlessui/react";

web/components/estimates/points/update.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, MouseEvent, useEffect, FocusEvent, useState } from "react";
 import { observer } from "mobx-react";
 import { Check, Info, X } from "lucide-react";

web/components/estimates/update/modal.tsx

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

web/components/estimates/update/stage-one.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { Crown } from "lucide-react";
 import { TEstimateUpdateStageKeys } from "@plane/types";

web/components/exporter/export-modal.tsx

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

web/components/exporter/guide.tsx

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

web/components/exporter/single-export.tsx

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

web/components/gantt-chart/helpers/add-block.tsx

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

web/components/gantt-chart/sidebar/cycles/sidebar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject } from "react";
 // ui
 import { Loader } from "@plane/ui";

web/components/gantt-chart/sidebar/gantt-dnd-HOC.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/gantt-chart/sidebar/issues/sidebar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject } from "react";
 // ui
 import { Loader } from "@plane/ui";

web/components/gantt-chart/sidebar/modules/sidebar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { MutableRefObject } from "react";
 // ui
 import { Loader } from "@plane/ui";

web/components/inbox/content/inbox-issue-header.tsx

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

web/components/inbox/content/inbox-issue-mobile-header.tsx

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

web/components/inbox/content/issue-properties.tsx

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

web/components/inbox/content/issue-root.tsx

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

web/components/inbox/inbox-filter/applied-filters/member.tsx

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

web/components/inbox/inbox-filter/applied-filters/priority.tsx

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

web/components/inbox/inbox-filter/applied-filters/state.tsx

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

web/components/inbox/inbox-filter/filters/labels.tsx

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

web/components/inbox/inbox-filter/filters/members.tsx

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

web/components/inbox/inbox-filter/filters/priority.tsx

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

web/components/inbox/inbox-filter/filters/state.tsx

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

web/components/inbox/inbox-filter/sorting/order-by.tsx

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

web/components/inbox/modals/accept-issue-modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { CheckCircle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";

web/components/inbox/modals/create-edit-modal/create-root.tsx

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

web/components/inbox/modals/create-edit-modal/edit-root.tsx

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