chore: pwa issue detail improvement (#5540)

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx

@@ -2,16 +2,13 @@
 
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { PanelRight } from "lucide-react";
 // ui
 import { Breadcrumbs, LayersIcon, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { IssueDetailQuickActions } from "@/components/issues";
-// helpers
-import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
+import { useIssueDetail, useProject } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 
 export const ProjectIssueDetailsHeader = observer(() => {
@@ -20,13 +17,11 @@ export const ProjectIssueDetailsHeader = observer(() => {
   const { workspaceSlug, projectId, issueId } = useParams();
   // store hooks
   const { currentProjectDetails, loader } = useProject();
-  const { issueDetailSidebarCollapsed, toggleIssueDetailSidebar } = useAppTheme();
   const {
     issue: { getIssueById },
   } = useIssueDetail();
   // derived values
   const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
-  const isSidebarCollapsed = issueDetailSidebarCollapsed;
 
   return (
     <Header>
@@ -82,11 +77,6 @@ export const ProjectIssueDetailsHeader = observer(() => {
           projectId={projectId.toString()}
           issueId={issueId.toString()}
         />
-        <button className="block md:hidden" onClick={() => toggleIssueDetailSidebar()}>
-          <PanelRight
-            className={cn("h-4 w-4 ", !isSidebarCollapsed ? "text-custom-primary-100" : " text-custom-text-200")}
-          />
-        </button>
       </Header.RightItem>
     </Header>
   );

web/core/components/issues/issue-detail/main-content.tsx

@@ -13,10 +13,12 @@ import {
   IssueTitleInput,
   IssueDescriptionInput,
   IssueDetailWidgets,
+  PeekOverviewProperties,
 } from "@/components/issues";
 // hooks
 import { useIssueDetail, useUser } from "@/hooks/store";
 import useReloadConfirmations from "@/hooks/use-reload-confirmation";
+import useSize from "@/hooks/use-window-size";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
 // types
@@ -37,6 +39,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
   // states
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   // hooks
+  const windowSize = useSize();
   const { data: currentUser } = useUser();
   const {
     issue: { getIssueById },
@@ -115,6 +118,16 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
         disabled={!isEditable || isArchived}
       />
 
+      {windowSize[0] < 768 && (
+        <PeekOverviewProperties
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          issueOperations={issueOperations}
+          disabled={!isEditable || isArchived}
+        />
+      )}
+
       <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={isArchived} />
     </>
   );