[WEB-4017] fix: hooks and store refactoring for issue-details (#7107)

* fix: hooks and store splitting for issue-details

* fix: refactoring

* fix: refactoring

* fix: refactor

* fix: css

web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx

@@ -6,6 +6,7 @@ import { useParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane imports
+import { EIssueServiceType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Loader } from "@plane/ui";
 // components
@@ -16,6 +17,7 @@ import { IssueDetailRoot } from "@/components/issues";
 import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
 // assets
 import { useAppRouter } from "@/hooks/use-app-router";
+import { useWorkItemProperties } from "@/plane-web/hooks/use-issue-properties";
 import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
 import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp";
 import emptyIssueLight from "@/public/empty-state/search/issues-light.webp";
@@ -53,6 +55,13 @@ const IssueDetailsPage = observer(() => {
   const issueLoader = !issue || isLoading;
   const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
 
+  useWorkItemProperties(
+    projectId,
+    workspaceSlug.toString(),
+    issueId,
+    issue?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES
+  );
+
   useEffect(() => {
     const handleToggleIssueDetailSidebar = () => {
       if (window && window.innerWidth < 768) {

web/ce/hooks/use-issue-properties.tsx

@@ -0,0 +1,10 @@
+import { TIssueServiceType } from "@plane/types";
+
+export const useWorkItemProperties = (
+  projectId: string | null | undefined,
+  workspaceSlug: string | null | undefined,
+  workItemId: string | null | undefined,
+  issueServiceType: TIssueServiceType
+) => {
+  if (!projectId || !workspaceSlug || !workItemId) return;
+};

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

@@ -12,6 +12,7 @@ import {
   ISSUE_RESTORED,
   EUserPermissions,
   EUserPermissionsLevel,
+  EIssueServiceType,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TIssue, IWorkItemPeekOverview } from "@plane/types";
@@ -23,6 +24,7 @@ import { IssueView, TIssueOperations } from "@/components/issues";
 // hooks
 import { useEventTracker, useIssueDetail, useIssues, useUserPermissions } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import { useWorkItemProperties } from "@/plane-web/hooks/use-issue-properties";
 
 
 export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) => {
@@ -51,6 +53,13 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
   const storeType = issueStoreFromProps ?? issueStoreType;
   const { issues } = useIssues(storeType);
   const { captureIssueEvent } = useEventTracker();
+
+  useWorkItemProperties(
+    peekIssue?.projectId,
+    peekIssue?.workspaceSlug,
+    peekIssue?.issueId,
+    storeType === EIssuesStoreType.EPIC ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES
+  );
   // state
   const [error, setError] = useState(false);
 

web/core/components/settings/content-wrapper.tsx

@@ -12,7 +12,7 @@ export const SettingsContentWrapper = observer((props: TProps) => {
   return (
     <div
       className={cn("flex flex-col w-full items-center mx-auto py-4 md:py-0", {
-        "md:p-4 max-w-[800px] 2xl:max-w-[1000px]": size === "md",
+        "md:px-4 max-w-[800px] 2xl:max-w-[1000px]": size === "md",
         "md:px-16": size === "lg",
       })}
     >

web/core/hooks/store/use-issue-detail.ts

@@ -4,7 +4,7 @@ import { TIssueServiceType } from "@plane/types";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
 // types
-import { IIssueDetail } from "@/store/issue/issue-details/root.store";
+import { IIssueDetail } from "@/plane-web/store/issue/issue-details/root.store";
 
 export const useIssueDetail = (serviceType: TIssueServiceType = EIssueServiceType.ISSUES): IIssueDetail => {
   const context = useContext(StoreContext);

web/core/store/issue/issue-details/root.store.ts

@@ -114,7 +114,7 @@ export interface IIssueDetail
   relation: IIssueRelationStore;
 }
 
-export class IssueDetail implements IIssueDetail {
+export abstract class IssueDetail implements IIssueDetail {
   // observables
   peekIssue: TPeekIssue | undefined = undefined;
   relationKey: TIssueRelationTypes | null = null;

web/ee/hooks/use-issue-properties.tsx

@@ -0,0 +1 @@
+export * from "ce/hooks/use-issue-properties";