chore: web app use client directive (#4747)

* chore: use client directive

* chore: use client directive

web/components/project/card.tsx

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

web/components/project/confirm-project-member-remove.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useParams } from "next/navigation";
@@ -112,8 +114,8 @@ export const ConfirmProjectMemberRemove: React.FC<Props> = observer((props) => {
                         ? "Leaving..."
                         : "Leave"
                       : isDeleteLoading
-                      ? "Removing..."
-                      : "Remove"}
+                        ? "Removing..."
+                        : "Remove"}
                   </Button>
                 </div>
               </Dialog.Panel>

web/components/project/create-project-form.tsx

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

web/components/project/delete-project-modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { useParams, useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";

web/components/project/empty-state.tsx

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

web/components/project/form-loader.tsx

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

web/components/project/form.tsx

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

web/components/project/integration-card.tsx

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

web/components/project/join-project-modal.tsx

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

web/components/project/leave-project-modal.tsx

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

web/components/project/member-list-item.tsx

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

web/components/project/member-list.tsx

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

web/components/project/member-select.tsx

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

web/components/project/publish-project/modal.tsx

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

web/components/project/send-project-invitation-modal.tsx

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

web/components/project/sidebar-list.tsx

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