chore: web app use client directive (#4747)

* chore: use client directive

* chore: use client directive

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

web/components/inbox/modals/create-edit-modal/issue-description.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, RefObject } from "react";
 import { observer } from "mobx-react";
 import { EditorRefApi } from "@plane/rich-text-editor";

web/components/inbox/modals/create-edit-modal/issue-title.tsx

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

web/components/inbox/modals/select-duplicate.tsx

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

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, Fragment, useState } from "react";
 import { DayPicker } from "react-day-picker";
 import { Dialog, Transition } from "@headlessui/react";

web/components/inbox/sidebar/inbox-list-item.tsx

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

web/components/inbox/sidebar/root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
@@ -106,13 +108,13 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
             className="w-full h-full overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md"
             ref={containerRef}
           >
-              {filteredInboxIssueIds.length > 0 ? (
+            {filteredInboxIssueIds.length > 0 ? (
               <InboxIssueList
                 setIsMobileSidebar={setIsMobileSidebar}
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 projectIdentifier={currentProjectDetails?.identifier}
-                  inboxIssueIds={filteredInboxIssueIds}
+                inboxIssueIds={filteredInboxIssueIds}
               />
             ) : (
               <div className="flex items-center justify-center h-full w-full">
@@ -128,14 +130,14 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
                 />
               </div>
             )}
-              <div ref={setElementRef}>
-                {inboxIssuePaginationInfo?.next_page_results && (
+            <div ref={setElementRef}>
+              {inboxIssuePaginationInfo?.next_page_results && (
                 <Loader className="mx-auto w-full space-y-4 py-4 px-2">
                   <Loader.Item height="64px" width="w-100" />
                   <Loader.Item height="64px" width="w-100" />
                 </Loader>
-                )}
-              </div>
+              )}
+            </div>
           </div>
         )}
       </div>