From 59c52023fbeb90f9c7615d645707f4decefdbf27 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 31 Oct 2023 12:14:06 +0530
Subject: [PATCH] style: list layout (#2566)

---
 packages/ui/src/dropdowns/helper.tsx          |  1 +
 web/components/headers/cycle-issues.tsx       |  4 +--
 web/components/headers/global-issues.tsx      |  4 +--
 web/components/headers/module-issues.tsx      |  4 +--
 web/components/headers/project-issues.tsx     |  4 +--
 .../headers/project-view-issues.tsx           |  4 +--
 .../filters/header/helpers/dropdown.tsx       |  7 +++--
 .../issues/issue-layouts/list/block.tsx       |  2 +-
 .../issues/issue-layouts/list/blocks-list.tsx | 12 ++++----
 .../issues/issue-layouts/list/default.tsx     | 30 +++++++++----------
 .../list/inline-create-issue-form.tsx         |  6 ++--
 .../quick-action-dropdowns/cycle-issue.tsx    |  2 +-
 .../quick-action-dropdowns/module-issue.tsx   |  2 +-
 .../quick-action-dropdowns/project-issue.tsx  |  2 +-
 .../profile/profile-issues-filter.tsx         |  4 +--
 15 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
index 4c9a92d4d..eac53b6e6 100644
--- a/packages/ui/src/dropdowns/helper.tsx
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -1,3 +1,4 @@
+// FIXME: fix this!!!
 import { Placement } from "@blueprintjs/popover2";
 
 export interface IDropdownProps {
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index ac6ed2e6b..cfadc80aa 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -147,7 +147,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             onChange={(layout) => handleLayoutChange(layout)}
             selectedLayout={activeLayout}
           />
-          <FiltersDropdown title="Filters">
+          <FiltersDropdown title="Filters" placement="bottom-end">
             <FilterSelection
               filters={cycleIssueFilterStore.cycleFilters}
               handleFiltersUpdate={handleFiltersUpdate}
@@ -159,7 +159,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
-          <FiltersDropdown title="Display">
+          <FiltersDropdown title="Display" placement="bottom-end">
             <DisplayFiltersSelection
               displayFilters={issueFilterStore.userDisplayFilters}
               displayProperties={issueFilterStore.userDisplayProperties}
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index 5f0f1c054..43d615d84 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -128,7 +128,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
           {activeLayout === "spreadsheet" && (
             <>
               {!STATIC_VIEW_TYPES.some((word) => router.pathname.includes(word)) && (
-                <FiltersDropdown title="Filters">
+                <FiltersDropdown title="Filters" placement="bottom-end">
                   <FilterSelection
                     filters={storedFilters ?? {}}
                     handleFiltersUpdate={handleFiltersUpdate}
@@ -140,7 +140,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
                 </FiltersDropdown>
               )}
 
-              <FiltersDropdown title="Display">
+              <FiltersDropdown title="Display" placement="bottom-end">
                 <DisplayFiltersSelection
                   displayFilters={workspaceFilterStore.workspaceDisplayFilters}
                   displayProperties={workspaceFilterStore.workspaceDisplayProperties}
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 08a30531c..0fd143e61 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -150,7 +150,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
             onChange={(layout) => handleLayoutChange(layout)}
             selectedLayout={activeLayout}
           />
-          <FiltersDropdown title="Filters">
+          <FiltersDropdown title="Filters" placement="bottom-end">
             <FilterSelection
               filters={moduleFilterStore.moduleFilters}
               handleFiltersUpdate={handleFiltersUpdate}
@@ -162,7 +162,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
-          <FiltersDropdown title="Display">
+          <FiltersDropdown title="Display" placement="bottom-end">
             <DisplayFiltersSelection
               displayFilters={issueFilterStore.userDisplayFilters}
               displayProperties={issueFilterStore.userDisplayProperties}
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index f1cdef4c0..0048a8a19 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -146,7 +146,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             onChange={(layout) => handleLayoutChange(layout)}
             selectedLayout={activeLayout}
           />
-          <FiltersDropdown title="Filters">
+          <FiltersDropdown title="Filters" placement="bottom-end">
             <FilterSelection
               filters={issueFilterStore.userFilters}
               handleFiltersUpdate={handleFiltersUpdate}
@@ -158,7 +158,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
-          <FiltersDropdown title="Display">
+          <FiltersDropdown title="Display" placement="bottom-end">
             <DisplayFiltersSelection
               displayFilters={issueFilterStore.userDisplayFilters}
               displayProperties={issueFilterStore.userDisplayProperties}
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 31326e826..862b3b869 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -135,7 +135,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
           onChange={(layout) => handleLayoutChange(layout)}
           selectedLayout={activeLayout}
         />
-        <FiltersDropdown title="Filters">
+        <FiltersDropdown title="Filters" placement="bottom-end">
           <FilterSelection
             filters={storedFilters ?? {}}
             handleFiltersUpdate={handleFiltersUpdate}
@@ -147,7 +147,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
             states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
           />
         </FiltersDropdown>
-        <FiltersDropdown title="Display">
+        <FiltersDropdown title="Display" placement="bottom-end">
           <DisplayFiltersSelection
             displayFilters={issueFilterStore.userDisplayFilters}
             displayProperties={issueFilterStore.userDisplayProperties}
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index 105a07324..0f93b75c9 100644
--- a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
-
+import { Placement } from "@popperjs/core";
 // ui
 import { Button } from "@plane/ui";
 // icons
@@ -10,16 +10,17 @@ import { ChevronUp } from "lucide-react";
 type Props = {
   children: React.ReactNode;
   title?: string;
+  placement?: Placement;
 };
 
 export const FiltersDropdown: React.FC<Props> = (props) => {
-  const { children, title = "Dropdown" } = props;
+  const { children, title = "Dropdown", placement } = props;
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "auto",
+    placement: placement ?? "auto",
   });
 
   return (
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index 5a84c5f9e..c697da78c 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -27,7 +27,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
 
   return (
     <>
-      <div className="text-sm p-3 relative shadow-custom-shadow-2xs bg-custom-background-100 flex items-center gap-3 border-b border-custom-border-200 hover:bg-custom-background-80">
+      <div className="text-sm p-3 relative bg-custom-background-100 flex items-center gap-3">
         {display_properties && display_properties?.key && (
           <div className="flex-shrink-0 text-xs text-custom-text-300">
             {issue?.project_detail?.identifier}-{issue.sequence_id}
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
index 3267e221c..2350fe12c 100644
--- a/web/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@@ -21,9 +21,8 @@ export const IssueBlocksList: FC<Props> = (props) => {
     props;
 
   return (
-    <>
-      {issues &&
-        issues?.length > 0 &&
+    <div className="w-full h-full relative divide-y-[0.5px] divide-custom-border-200">
+      {issues && issues.length > 0 ? (
         issues.map((issue) => (
           <IssueBlock
             key={issue.id}
@@ -37,7 +36,10 @@ export const IssueBlocksList: FC<Props> = (props) => {
             members={members}
             estimates={estimates}
           />
-        ))}
-    </>
+        ))
+      ) : (
+        <div className="bg-custom-background-100 text-custom-text-400 text-sm p-3">No issues</div>
+      )}
+    </div>
   );
 };
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index 114b308eb..e6fce190a 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -53,7 +53,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
         list.length > 0 &&
         list.map((_list: any) => (
           <div key={getValueFromObject(_list, listKey) as string} className={`flex-shrink-0 flex flex-col`}>
-            <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2] px-3 border-b border-custom-border-100">
+            <div className="flex-shrink-0 w-full py-1 sticky top-0 z-[2] px-3">
               <ListGroupByHeaderRoot
                 column_id={getValueFromObject(_list, listKey) as string}
                 column_value={_list}
@@ -63,21 +63,19 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
                 }
               />
             </div>
-            <div className={`w-full h-full relative transition-all`}>
-              {issues && (
-                <IssueBlocksList
-                  columnId={getValueFromObject(_list, listKey) as string}
-                  issues={is_list ? issues : issues[getValueFromObject(_list, listKey) as string]}
-                  handleIssues={handleIssues}
-                  quickActions={quickActions}
-                  display_properties={display_properties}
-                  states={states}
-                  labels={labels}
-                  members={members}
-                  estimates={estimates}
-                />
-              )}
-            </div>
+            {issues && (
+              <IssueBlocksList
+                columnId={getValueFromObject(_list, listKey) as string}
+                issues={is_list ? issues : issues[getValueFromObject(_list, listKey) as string]}
+                handleIssues={handleIssues}
+                quickActions={quickActions}
+                display_properties={display_properties}
+                states={states}
+                labels={labels}
+                members={members}
+                estimates={estimates}
+              />
+            )}
             {enableQuickIssueCreate && (
               <ListInlineCreateIssueForm
                 groupId={getValueFromObject(_list, listKey) as string}
diff --git a/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx
index a6ac218e7..a0624a74f 100644
--- a/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx
+++ b/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx
@@ -161,7 +161,7 @@ export const ListInlineCreateIssueForm: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <div>
+    <div className="bg-custom-background-100">
       <Transition
         show={isOpen}
         enter="transition ease-in-out duration-200 transform"
@@ -189,10 +189,10 @@ export const ListInlineCreateIssueForm: React.FC<Props> = observer((props) => {
       {!isOpen && (
         <button
           type="button"
-          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-3 py-1 rounded-md"
           onClick={() => setIsOpen(true)}
         >
-          <PlusIcon className="h-4 w-4" />
+          <PlusIcon className="h-3 w-3" />
           <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
         </button>
       )}
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index 8dc826300..9736c575e 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -62,7 +62,7 @@ export const CycleIssueQuickActions: React.FC<Props> = (props) => {
           if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
         }}
       />
-      <CustomMenu ellipsis>
+      <CustomMenu placement="bottom-start" ellipsis>
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index 066a16d35..93594de9e 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -62,7 +62,7 @@ export const ModuleIssueQuickActions: React.FC<Props> = (props) => {
           if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
         }}
       />
-      <CustomMenu ellipsis>
+      <CustomMenu placement="bottom-start" ellipsis>
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index 0cad8c46f..7999be31d 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -61,7 +61,7 @@ export const ProjectIssueQuickActions: React.FC<Props> = (props) => {
           if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
         }}
       />
-      <CustomMenu ellipsis>
+      <CustomMenu placement="bottom-start" ellipsis>
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();
diff --git a/web/components/profile/profile-issues-filter.tsx b/web/components/profile/profile-issues-filter.tsx
index 5dd6b1b3a..7acc73c99 100644
--- a/web/components/profile/profile-issues-filter.tsx
+++ b/web/components/profile/profile-issues-filter.tsx
@@ -41,7 +41,7 @@ export const ProfileIssuesFilter = observer(() => {
         selectedLayout={activeLayout}
       />
 
-      <FiltersDropdown title="Filters">
+      <FiltersDropdown title="Filters" placement="bottom-end">
         <FilterSelection
           filters={profileIssueFiltersStore.userFilters}
           handleFiltersUpdate={handleFilters}
@@ -54,7 +54,7 @@ export const ProfileIssuesFilter = observer(() => {
         />
       </FiltersDropdown>
 
-      <FiltersDropdown title="Display">
+      <FiltersDropdown title="Display" placement="bottom-end">
         <DisplayFiltersSelection
           displayFilters={profileIssueFiltersStore.userDisplayFilters}
           displayProperties={profileIssueFiltersStore.userDisplayProperties}