chore: web app use client directive (#4747)

* chore: use client directive

* chore: use client directive

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";