From 400236c417d0f850177308ec42fa25f8c252eddb Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 7 Nov 2023 12:58:25 +0530
Subject: [PATCH 1/4] style: issue peek overview improvement

---
 .../issues/issue-peek-overview/properties.tsx | 22 +++++++++----------
 .../issues/sidebar-select/cycle.tsx           |  8 +++----
 .../issues/sidebar-select/module.tsx          | 10 +++++----
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/web/components/issues/issue-peek-overview/properties.tsx b/web/components/issues/issue-peek-overview/properties.tsx
index 303687d3931..c04f8542072 100644
--- a/web/components/issues/issue-peek-overview/properties.tsx
+++ b/web/components/issues/issue-peek-overview/properties.tsx
@@ -190,7 +190,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         <div className="flex flex-col gap-5 py-5 w-full">
           {/* state */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
               <p>State</p>
             </div>
@@ -201,7 +201,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* assignee */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
               <p>Assignees</p>
             </div>
@@ -216,7 +216,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* priority */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <Signal className="h-4 w-4 flex-shrink-0" />
               <p>Priority</p>
             </div>
@@ -231,7 +231,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* estimate */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <Triangle className="h-4 w-4 flex-shrink-0 " />
               <p>Estimate</p>
             </div>
@@ -246,7 +246,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* start date */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <CalendarDays className="h-4 w-4 flex-shrink-0" />
               <p>Start date</p>
             </div>
@@ -264,7 +264,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* due date */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <CalendarDays className="h-4 w-4 flex-shrink-0" />
               <p>Due date</p>
             </div>
@@ -282,7 +282,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* parent */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <User2 className="h-4 w-4 flex-shrink-0" />
               <p>Parent</p>
             </div>
@@ -295,8 +295,8 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         <span className="border-t border-custom-border-200" />
 
         <div className="flex flex-col gap-5 py-5 w-full">
-          <div className="flex items-center gap-2 w-80">
-            <div className="flex items-center gap-2 w-40 text-sm">
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <ContrastIcon className="h-4 w-4 flex-shrink-0" />
               <p>Cycle</p>
             </div>
@@ -309,8 +309,8 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             </div>
           </div>
 
-          <div className="flex items-center gap-2 w-80">
-            <div className="flex items-center gap-2 w-40 text-sm">
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <DiceIcon className="h-4 w-4 flex-shrink-0" />
               <p>Module</p>
             </div>
diff --git a/web/components/issues/sidebar-select/cycle.tsx b/web/components/issues/sidebar-select/cycle.tsx
index ff37cc68f8c..2507bb12e3e 100644
--- a/web/components/issues/sidebar-select/cycle.tsx
+++ b/web/components/issues/sidebar-select/cycle.tsx
@@ -79,17 +79,17 @@ export const SidebarCycleSelect: React.FC<Props> = ({ issueDetail, handleCycleCh
           <Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}>
             <button
               type="button"
-              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
+              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
                 disabled ? "cursor-not-allowed" : ""
-              }`}
+              } max-w-[10rem]`}
             >
               <span
                 className={`flex items-center gap-1.5 truncate ${
                   issueCycle ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
-                {issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}
-                {issueCycle ? issueCycle.cycle_detail.name : "No cycle"}
+                <span className="flex-shrink-0">{issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}</span>
+                <span className="truncate">{issueCycle ? issueCycle.cycle_detail.name : "No cycle"}</span>
               </span>
             </button>
           </Tooltip>
diff --git a/web/components/issues/sidebar-select/module.tsx b/web/components/issues/sidebar-select/module.tsx
index 9948753d422..0eff28a1e72 100644
--- a/web/components/issues/sidebar-select/module.tsx
+++ b/web/components/issues/sidebar-select/module.tsx
@@ -74,17 +74,19 @@ export const SidebarModuleSelect: React.FC<Props> = ({ issueDetail, handleModule
           >
             <button
               type="button"
-              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
+              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
                 disabled ? "cursor-not-allowed" : ""
-              }`}
+              } max-w-[10rem]`}
             >
               <span
                 className={`flex items-center gap-1.5 truncate ${
                   issueModule ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
-                {issueModule && <DiceIcon className="h-3.5 w-3.5" />}
-                {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
+                <span className="flex-shrink-0">{issueModule && <DiceIcon className="h-3.5 w-3.5" />}</span>
+                <span className="truncate">
+                  {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
+                </span>
               </span>
             </button>
           </Tooltip>

From f58bcc0f5e5b0b9168a03da7805cb81afd1ba41e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 7 Nov 2023 13:02:54 +0530
Subject: [PATCH 2/4] style: peek overview improvement

---
 web/components/issues/issue-peek-overview/view.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/components/issues/issue-peek-overview/view.tsx b/web/components/issues/issue-peek-overview/view.tsx
index 3342cbf4065..23a365c5410 100644
--- a/web/components/issues/issue-peek-overview/view.tsx
+++ b/web/components/issues/issue-peek-overview/view.tsx
@@ -174,7 +174,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
             }}
           >
             {/* header */}
-            <div className="relative flex items-center justify-between p-5 border-b border-custom-border-200">
+            <div
+              className={`relative flex items-center justify-between p-4 ${
+                currentMode?.key === "full-screen" ? "border-b border-custom-border-200" : ""
+              }`}
+            >
               <div className="flex items-center gap-4">
                 <button onClick={removeRoutePeekId}>
                   <MoveRight className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
@@ -250,7 +254,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                 issue && (
                   <>
                     {["side-peek", "modal"].includes(peekMode) ? (
-                      <div className="flex flex-col gap-3 py-6 px-8">
+                      <div className="flex flex-col gap-3 py-5 px-8">
                         <PeekOverviewIssueDetails
                           workspaceSlug={workspaceSlug}
                           issue={issue}

From e2d42c807c7fe25efdf17c4283756196ca1f3414 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 7 Nov 2023 13:12:51 +0530
Subject: [PATCH 3/4] fix: subscribe issue from peek overview fix and
 validation added

---
 .../issues/issue-peek-overview/view.tsx       | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/web/components/issues/issue-peek-overview/view.tsx b/web/components/issues/issue-peek-overview/view.tsx
index 23a365c5410..78557d86526 100644
--- a/web/components/issues/issue-peek-overview/view.tsx
+++ b/web/components/issues/issue-peek-overview/view.tsx
@@ -218,20 +218,22 @@ export const IssueView: FC<IIssueView> = observer((props) => {
               </div>
 
               <div className="flex items-center gap-4">
-                {!isArchived && (
-                  <Button
-                    size="sm"
-                    prependIcon={<Bell className="h-3 w-3" />}
-                    variant="outline-primary"
-                    onClick={() =>
-                      issueSubscription && issueSubscription.subscribed
-                        ? issueSubscriptionRemove
-                        : issueSubscriptionCreate
-                    }
-                  >
-                    {issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
-                  </Button>
-                )}
+                {issue?.created_by !== user?.id &&
+                  !issue?.assignees.includes(user?.id ?? "") &&
+                  !router.pathname.includes("[archivedIssueId]") && (
+                    <Button
+                      size="sm"
+                      prependIcon={<Bell className="h-3 w-3" />}
+                      variant="outline-primary"
+                      onClick={() =>
+                        issueSubscription && issueSubscription.subscribed
+                          ? issueSubscriptionRemove()
+                          : issueSubscriptionCreate()
+                      }
+                    >
+                      {issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
+                    </Button>
+                  )}
                 <button onClick={handleCopyText}>
                   <Link2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200 -rotate-45" />
                 </button>

From 0f6ef520b389b581956d19c3dfb9b82a0f94bc91 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 7 Nov 2023 15:09:53 +0530
Subject: [PATCH 4/4] fix: build error

---
 space/constants/data.ts | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/space/constants/data.ts b/space/constants/data.ts
index 29d411342fb..909b74c120f 100644
--- a/space/constants/data.ts
+++ b/space/constants/data.ts
@@ -10,12 +10,12 @@ import {
 } from "types/issue";
 // icons
 import {
-  BacklogStateIcon,
-  UnstartedStateIcon,
-  StartedStateIcon,
-  CompletedStateIcon,
-  CancelledStateIcon,
-} from "components/icons";
+  BacklogGroupIcon,
+  CancelledGroupIcon,
+  CompletedGroupIcon,
+  StartedGroupIcon,
+  UnstartedGroupIcon,
+} from "@plane/ui";
 
 // all issue views
 export const issueViews: any = {
@@ -92,35 +92,35 @@ export const issueGroups: IIssueGroup[] = [
     title: "Backlog",
     color: "#d9d9d9",
     className: `text-[#d9d9d9] bg-[#d9d9d9]/10`,
-    icon: BacklogStateIcon,
+    icon: BacklogGroupIcon,
   },
   {
     key: "unstarted",
     title: "Unstarted",
     color: "#3f76ff",
     className: `text-[#3f76ff] bg-[#3f76ff]/10`,
-    icon: UnstartedStateIcon,
+    icon: UnstartedGroupIcon,
   },
   {
     key: "started",
     title: "Started",
     color: "#f59e0b",
     className: `text-[#f59e0b] bg-[#f59e0b]/10`,
-    icon: StartedStateIcon,
+    icon: StartedGroupIcon,
   },
   {
     key: "completed",
     title: "Completed",
     color: "#16a34a",
     className: `text-[#16a34a] bg-[#16a34a]/10`,
-    icon: CompletedStateIcon,
+    icon: CompletedGroupIcon,
   },
   {
     key: "cancelled",
     title: "Cancelled",
     color: "#dc2626",
     className: `text-[#dc2626] bg-[#dc2626]/10`,
-    icon: CancelledStateIcon,
+    icon: CancelledGroupIcon,
   },
 ];