chore: web app use client directive (#4747)

* chore: use client directive

* chore: use client directive

admin/app/email/email-config-form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 // types

admin/app/image/form.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";

admin/components/common/breadcrumb-link.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import { Tooltip } from "@plane/ui";
 

admin/components/common/confirm-discard-modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Link from "next/link";
 // headless ui
@@ -43,33 +45,22 @@ export const ConfirmDiscardModal: React.FC<Props> = (props) => {
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-300">
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-300"
-                      >
                         You have unsaved changes
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-400">
-                          Changes you made will be lost if you go back. Do you
+                          Changes you made will be lost if you go back. Do you wish to go back?
-                          wish to go back?
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
-                  <Button
+                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    variant="neutral-primary"
-                    size="sm"
-                    onClick={handleClose}
-                  >
                     Keep editing
                   </Button>
-                  <Link
+                  <Link href={onDiscardHref} className={getButtonStyling("primary", "sm")}>
-                    href={onDiscardHref}
-                    className={getButtonStyling("primary", "sm")}
-                  >
                     Go back
                   </Link>
                 </div>

admin/components/common/empty-state.tsx

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

admin/components/common/toast.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useTheme } from "next-themes";
 // ui
 import { Toast as ToastComponent } from "@plane/ui";

packages/editor/core/src/ui/extensions/code/code-block-node-view.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 import { common, createLowlight } from "lowlight";

packages/editor/core/src/ui/mentions/mention-list.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Editor } from "@tiptap/react";
 import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "src/lib/utils";

packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@plane/editor-core";
 import { Editor } from "@tiptap/core";
 import tippy from "tippy.js";

packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 // @ts-nocheck
 import { Button } from "@plane/ui";
 import { NodeViewWrapper } from "@tiptap/react";

space/components/editor/toolbar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState, useCallback } from "react";
 // editor
 import { EditorMenuItemNames, EditorRefApi } from "@plane/lite-text-editor";

space/components/issues/issue-layouts/properties/state.tsx

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

space/components/issues/peek-overview/comment/add-comment.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import { useForm, Controller } from "react-hook-form";

space/components/issues/peek-overview/comment/comment-reactions.tsx

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

space/components/issues/peek-overview/full-screen-peek-view.tsx

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

space/components/issues/peek-overview/header.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { Link2, MoveRight } from "lucide-react";

space/components/issues/peek-overview/issue-activity.tsx

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

space/components/issues/peek-overview/issue-emoji-reactions.tsx

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

space/components/issues/peek-overview/issue-properties.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { CalendarCheck2, Signal } from "lucide-react";
 // ui
 import { DoubleCircleIcon, StateGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";

space/components/issues/peek-overview/side-peek-view.tsx

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

web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/header.tsx

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

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']);
+    const query = generateQueryParams(searchParams, ["peekCycle"]);
-    if (searchParams.has('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 ? (
+  return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className="h-3 w-3 flex-shrink-0" />;
-    <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";