fix: client component rendering

admin/app/ai/form.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { Lightbulb } from "lucide-react";

admin/app/authentication/github/form.tsx

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

admin/app/authentication/google/form.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { FC, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import Link from "next/link";

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

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

web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/header.tsx

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

web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/header.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -205,8 +207,9 @@ const CycleIssuesHeader: React.FC = observer(() => {
                           {issuesCount && issuesCount > 0 ? (
                             <Tooltip
                               isMobile={isMobile}
-                              tooltipContent={`There are ${issuesCount} ${issuesCount > 1 ? "issues" : "issue"
+                              tooltipContent={`There are ${issuesCount} ${
-                                } in this cycle`}
+                                issuesCount > 1 ? "issues" : "issue"
+                              } in this cycle`}
                               position="bottom"
                             >
                               <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">

web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/mobile-header.tsx

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

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

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

web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/mobile-header.tsx

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

web/app/[workspaceSlug]/@header/projects/[projectId]/draft-issues/header.tsx

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

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -43,9 +45,7 @@ const ProjectInboxHeader: FC = observer(() => {
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={
+              link={<BreadcrumbLink label="Inbox" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
-                <BreadcrumbLink label="Inbox" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
-              }
             />
           </Breadcrumbs>
 

web/app/[workspaceSlug]/@header/projects/[projectId]/issues/[issueId]/header.tsx

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

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

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

web/app/[workspaceSlug]/@header/projects/[projectId]/issues/mobile-header.tsx

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

web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/header.tsx

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

web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/mobile-header.tsx

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

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

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

web/app/[workspaceSlug]/@header/projects/[projectId]/modules/mobile-header.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import { CustomMenu } from "@plane/ui";
 import { MODULE_VIEW_LAYOUTS } from "@/constants/module";

web/app/[workspaceSlug]/@header/projects/[projectId]/pages/[pageId]/header.tsx

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

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

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

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

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

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

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

web/app/[workspaceSlug]/@header/projects/header.tsx

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

web/app/[workspaceSlug]/projects/[projectId]/settings/sidebar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
@@ -43,10 +45,11 @@ const ProjectSettingsSidebar = () => {
               projectMemberInfo >= link.access && (
                 <Link key={link.key} href={`/${workspaceSlug}/projects/${projectId}${link.href}`}>
                   <div
-                    className={`rounded-md px-4 py-2 text-sm font-medium ${link.highlight(pathname, `/${workspaceSlug}/projects/${projectId}`)
+                    className={`rounded-md px-4 py-2 text-sm font-medium ${
+                      link.highlight(pathname, `/${workspaceSlug}/projects/${projectId}`)
                         ? "bg-custom-primary-100/10 text-custom-primary-100"
                         : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                      }`}
+                    }`}
                   >
                     {link.label}
                   </div>

web/app/[workspaceSlug]/settings/billing/page.tsx

@@ -1,23 +1,4 @@
-<<<<<<< HEAD:web/app/[workspaceSlug]/settings/billing/page.tsx
 "use client";
-=======
-import { observer } from "mobx-react";
-// hooks
-import { Button } from "@plane/ui";
-import { PageHead } from "@/components/core";
-import { WorkspaceSettingHeader } from "@/components/headers";
-import { MARKETING_PRICING_PAGE_LINK } from "@/constants/common";
-import { EUserWorkspaceRoles } from "@/constants/workspace";
-import { useUser, useWorkspace } from "@/hooks/store";
-// layouts
-import { AppLayout } from "@/layouts/app-layout";
-import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
-// component
-// ui
-// types
-import { NextPageWithLayout } from "@/lib/types";
-// constants
->>>>>>> 59fdd611e4b840993e93fc53c89a75a3787f248d:web/pages/[workspaceSlug]/settings/billing.tsx
 
 import { observer } from "mobx-react";
 // ui
@@ -73,4 +54,4 @@ const BillingSettingsPage = observer(() => {
   );
 });
 
-export default BillingSettingsPage;
+export default BillingSettingsPage;

web/app/profile/activity/page.tsx

@@ -11,12 +11,6 @@ import { EmptyState } from "@/components/empty-state";
 import { ProfileActivityListPage } from "@/components/profile";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
-//hooks
-import { useAppTheme } from "@/hooks/store";
-// layouts
-import { ProfileSettingsLayout } from "@/layouts/settings-layout";
-// type
-import { NextPageWithLayout } from "@/lib/types";
 
 const PER_PAGE = 100;
 
@@ -26,8 +20,6 @@ const ProfileActivityPage = observer(() => {
   const [totalPages, setTotalPages] = useState(0);
   const [resultsCount, setResultsCount] = useState(0);
   const [isEmpty, setIsEmpty] = useState(false);
-  // store hooks
-  const { toggleSidebar } = useAppTheme();
 
   const updateTotalPages = (count: number) => setTotalPages(count);
 

web/components/account/auth-forms/email.tsx

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

web/components/account/auth-forms/password.tsx

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

web/components/account/auth-forms/unique-code.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
 import { Button, Input, Spinner } from "@plane/ui";

web/components/account/deactivate-account-modal.tsx

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

web/components/analytics/custom-analytics/graph/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 // nivo
 import { BarDatum } from "@nivo/bar";
 // components

web/components/analytics/custom-analytics/main-content.tsx

@@ -1,16 +1,17 @@
+"use client";
+
 import { useParams } from "next/navigation";
 import { mutate } from "swr";
-import { IAnalyticsParams, IAnalyticsResponse } from "@plane/types";
-
-// components
-import { Button, Loader } from "@plane/ui";
-import { AnalyticsGraph, AnalyticsTable } from "@/components/analytics";
-// ui
-// helpers
-import { ANALYTICS } from "@/constants/fetch-keys";
-import { convertResponseToBarGraphData } from "@/helpers/analytics.helper";
 // types
+import { IAnalyticsParams, IAnalyticsResponse } from "@plane/types";
+// ui
+import { Button, Loader } from "@plane/ui";
+// components
+import { AnalyticsGraph, AnalyticsTable } from "@/components/analytics";
 // fetch-keys
+import { ANALYTICS } from "@/constants/fetch-keys";
+// helpers
+import { convertResponseToBarGraphData } from "@/helpers/analytics.helper";
 
 type Props = {
   analytics: IAnalyticsResponse | undefined;

web/components/analytics/custom-analytics/select/project.tsx

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

web/components/analytics/custom-analytics/select/segment.tsx

@@ -1,6 +1,7 @@
+"use client";
+
 import { useParams } from "next/navigation";
 import { IAnalyticsParams, TXAxisValues } from "@plane/types";
-
 // ui
 import { CustomSelect } from "@plane/ui";
 

web/components/analytics/custom-analytics/select/x-axis.tsx

@@ -1,6 +1,7 @@
+"use client";
+
 import { useParams } from "next/navigation";
 import { IAnalyticsParams, TXAxisValues } from "@plane/types";
-
 // ui
 import { CustomSelect } from "@plane/ui";
 

web/components/analytics/custom-analytics/select/y-axis.tsx

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

web/components/analytics/custom-analytics/sidebar/sidebar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -159,8 +161,8 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
               (cycleId
                 ? cycleDetails?.created_at
                 : moduleId
-                ? moduleDetails?.created_at
+                  ? moduleDetails?.created_at
-                : projectDetails?.created_at) ?? ""
+                  : projectDetails?.created_at) ?? ""
             )}
           </div>
         )}

web/components/analytics/custom-analytics/table.tsx

@@ -1,5 +1,6 @@
-import { BarDatum } from "@nivo/bar";
+"use client";
 
+import { BarDatum } from "@nivo/bar";
 // icons
 import { IAnalyticsParams, IAnalyticsResponse, TIssuePriorities } from "@plane/types";
 import { PriorityIcon } from "@plane/ui";

web/components/analytics/scope-and-demand/scope-and-demand.tsx

@@ -1,14 +1,13 @@
+"use client";
 import { useParams } from "next/navigation";
-
 import useSWR from "swr";
-
-// services
-// components
-import { Button, Loader } from "@plane/ui";
-import { AnalyticsDemand, AnalyticsLeaderBoard, AnalyticsScope, AnalyticsYearWiseIssues } from "@/components/analytics";
 // ui
+import { Button, Loader } from "@plane/ui";
+// components
+import { AnalyticsDemand, AnalyticsLeaderBoard, AnalyticsScope, AnalyticsYearWiseIssues } from "@/components/analytics";
 // fetch-keys
 import { DEFAULT_ANALYTICS } from "@/constants/fetch-keys";
+// services
 import { AnalyticsService } from "@/services/analytics.service";
 
 type Props = {

web/components/api-token/delete-token-modal.tsx

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

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

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

web/components/api-token/modal/create-token-modal.tsx

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

web/components/api-token/modal/form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { add } from "date-fns";
 import { Controller, useForm } from "react-hook-form";

web/components/api-token/modal/generated-token-details.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Copy } from "lucide-react";
 import { IApiToken } from "@plane/types";
 // ui

web/components/api-token/token-list-item.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { XCircle } from "lucide-react";
 import { IApiToken } from "@plane/types";

web/components/auth-screens/workspace/not-a-member.tsx

@@ -1,9 +1,10 @@
-import Link from "next/link";
+"use client";
 
-// layouts
+import Link from "next/link";
-import { Button } from "@plane/ui";
-import DefaultLayout from "@/layouts/default-layout";
 // ui
+import { Button } from "@plane/ui";
+// layouts
+import DefaultLayout from "@/layouts/default-layout";
 
 export const NotAWorkspaceMember = () => (
   <DefaultLayout>

web/components/automation/auto-archive-automation.tsx

@@ -1,16 +1,18 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-// hooks
-// component
 import { ArchiveRestore } from "lucide-react";
+// types
 import { IProject } from "@plane/types";
+// ui
 import { CustomSelect, Loader, ToggleSwitch } from "@plane/ui";
+// component
 import { SelectMonthModal } from "@/components/automation";
-// icon
 // constants
 import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "@/constants/project";
+// hooks
 import { useProject, useUser } from "@/hooks/store";
-// types
 
 type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;

web/components/automation/auto-close-automation.tsx

@@ -1,16 +1,19 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-// hooks
-import { ArchiveX } from "lucide-react";
-import { IProject } from "@plane/types";
-import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon, Loader } from "@plane/ui";
-import { SelectMonthModal } from "@/components/automation";
-import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "@/constants/project";
-import { useProject, useProjectState, useUser } from "@/hooks/store";
-// component
 // icons
+import { ArchiveX } from "lucide-react";
 // types
+import { IProject } from "@plane/types";
+// ui
+import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon, Loader } from "@plane/ui";
+// component
+import { SelectMonthModal } from "@/components/automation";
 // constants
+import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "@/constants/project";
+// hooks
+import { useProject, useProjectState, useUser } from "@/hooks/store";
 
 type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;

web/components/automation/select-month-modal.tsx

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

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { Command } from "cmdk";
 import { ContrastIcon, FileText } from "lucide-react";
 // hooks

web/components/command-palette/helpers.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 // types
 import { Briefcase, FileText, LayoutGrid } from "lucide-react";
 import {

web/components/common/breadcrumb-link.tsx

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

web/components/common/logo.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 // emoji-picker-react
 import { Emoji } from "emoji-picker-react";

web/components/core/activity.tsx

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

web/components/core/image-picker-popover.tsx

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

web/components/core/modals/bulk-delete-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/core/modals/existing-issues-list-modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 import { Rocket, Search, X } from "lucide-react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";

web/components/core/modals/gpt-assistant-popover.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState, useRef, Fragment, Ref } from "react";
 import { Placement } from "@popperjs/core";
 import { useParams } from "next/navigation";

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

@@ -1,5 +1,6 @@
-import { FC, useEffect, Fragment } from "react";
+"use client";
 
+import { FC, useEffect, Fragment } from "react";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // headless ui

web/components/core/modals/user-image-upload-modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useDropzone } from "react-dropzone";

web/components/core/modals/workspace-image-upload-modal.tsx

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

web/components/empty-state/comic-box-button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Ref, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover } from "@headlessui/react";

web/components/issues/issue-modal/form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, useState, useRef, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { useParams } from "next/navigation";
@@ -28,9 +30,6 @@ import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper"
 import { getChangedIssuefields, getDescriptionPlaceholder } from "@/helpers/issue.helper";
 import { shouldRenderProject } from "@/helpers/project.helper";
 // hooks
-<<<<<<< HEAD
-import { useAppRouter, useEstimate, useInstance, useIssueDetail, useProject, useWorkspace } from "@/hooks/store";
-=======
 import {
   useAppRouter,
   useProjectEstimates,
@@ -39,7 +38,6 @@ import {
   useProject,
   useWorkspace,
 } from "@/hooks/store";
->>>>>>> 59fdd611e4b840993e93fc53c89a75a3787f248d
 import useKeypress from "@/hooks/use-keypress";
 import { useProjectIssueProperties } from "@/hooks/use-project-issue-properties";
 // services

web/components/issues/issue-modal/modal.tsx

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

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

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

web/components/issues/peek-overview/issue-attachments.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo } from "react";
 // hooks
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";

web/components/issues/peek-overview/root.tsx

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

web/components/issues/sub-issues/issue-list-item.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { observer } from "mobx-react";
 import { ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";

web/components/issues/sub-issues/root.tsx

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

web/components/labels/create-label-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/applied-filters/members.tsx

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

web/components/project/applied-filters/root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { X } from "lucide-react";
 // types
 import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";

web/components/project/dropdowns/filters/lead.tsx

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

web/components/project/dropdowns/filters/members.tsx

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

web/components/project/dropdowns/order-by.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react";
 import { TProjectOrderByOptions } from "@plane/types";
 // ui

web/components/project/project-feature-update.tsx

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

web/components/project/project-settings-member-defaults.tsx

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

web/components/project/settings/archive-project/archive-restore-modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, Fragment } from "react";
 import { useRouter } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";
@@ -8,6 +10,7 @@ import { useProject } from "@/hooks/store";
 
 type Props = {
   workspaceSlug: string;
+
   projectId: string;
   isOpen: boolean;
   onClose: () => void;

web/components/project/settings/archive-project/selection.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { ChevronRight, ChevronUp } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";

web/components/project/settings/delete-project-section.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { ChevronRight, ChevronUp } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";

web/components/project/settings/features-list.tsx

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

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { 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/states/create-state-modal.tsx

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

web/components/states/create-update-state-inline.tsx

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

web/components/states/delete-state-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/states/project-setting-state-list-item.tsx

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

web/components/states/project-setting-state-list.tsx

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

web/components/ui/labels-list.tsx

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

web/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx

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

web/components/views/delete-view-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/views/form.tsx

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

web/components/views/modal.tsx

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

web/components/views/quick-actions.tsx

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

web/components/views/view-list-item.tsx

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

web/components/web-hooks/create-webhook-modal.tsx

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

web/components/web-hooks/delete-webhook-modal.tsx

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

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

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

web/components/web-hooks/form/delete-section.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { Button } from "@plane/ui";

web/components/web-hooks/form/form.tsx

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

web/components/web-hooks/form/input.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Input } from "@plane/ui";
 
 type Props = {