chore: issue list layout (#2367)

web/components/core/views/all-views.tsx

@@ -6,7 +6,14 @@ import useSWR from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { AppliedFiltersRoot, CalendarLayout, GanttLayout, KanBanLayout, SpreadsheetLayout } from "components/issues";
+import {
+  AppliedFiltersRoot,
+  ListLayout,
+  CalendarLayout,
+  GanttLayout,
+  KanBanLayout,
+  SpreadsheetLayout,
+} from "components/issues";
 
 export const AllViews: React.FC = observer(() => {
   const router = useRouter();
@@ -42,7 +49,9 @@ export const AllViews: React.FC = observer(() => {
     <div className="relative w-full h-full flex flex-col overflow-auto">
       <AppliedFiltersRoot />
       <div className="w-full h-full">
-        {activeLayout === "kanban" ? (
+        {activeLayout === "list" ? (
+          <ListLayout />
+        ) : activeLayout === "kanban" ? (
           <KanBanLayout />
         ) : activeLayout === "calendar" ? (
           <CalendarLayout />

web/components/issues/issue-layouts/index.ts

@@ -1,3 +1,4 @@
+export * from "./list";
 export * from "./calendar";
 export * from "./filters";
 export * from "./gantt";

web/components/issues/issue-layouts/kanban/properties.tsx

@@ -197,9 +197,3 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer(
     );
   }
 );
-
-created_on: true;
-updated_on: true;
-due_date: true;
-
-key: true;

web/components/issues/issue-layouts/list/block.tsx

@@ -0,0 +1,41 @@
+// components
+import { KanBanProperties } from "./properties";
+
+interface IssueBlockProps {
+  columnId: string;
+  issues: any;
+  handleIssues?: (group_by: string | null, issue: any) => void;
+  display_properties: any;
+}
+
+export const IssueBlock = ({ columnId, issues, handleIssues, display_properties }: IssueBlockProps) => (
+  <>
+    {issues && issues.length > 0 ? (
+      <>
+        {issues.map((issue: any, index: any) => (
+          <div
+            key={index}
+            className={`text-sm p-3 shadow-custom-shadow-2xs transition-all bg-custom-background-100 flex items-center flex-wrap gap-3 border-b border-custom-border-200`}
+          >
+            {display_properties && display_properties?.key && (
+              <div className="flex-shrink-0 text-xs text-custom-text-300">ONE-{issue.sequence_id}</div>
+            )}
+            <div className="line-clamp-1 text-sm font-medium text-custom-text-100">{issue.name}</div>
+            <div className="ml-auto flex-shrink-0">
+              <KanBanProperties
+                columnId={columnId}
+                issue={issue}
+                handleIssues={handleIssues}
+                display_properties={display_properties}
+              />
+            </div>
+          </div>
+        ))}
+      </>
+    ) : (
+      <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+        No issues are available
+      </div>
+    )}
+  </>
+);

web/components/issues/issue-layouts/list/default.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+// components
+import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
+import { IssueBlock } from "./block";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
+// mobx
+import { observer } from "mobx-react-lite";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IGroupByKanBan {
+  issues: any;
+  group_by: string | null;
+  list: any;
+  listKey: string;
+  handleIssues?: (group_by: string | null, issue: any) => void;
+  display_properties: any;
+}
+
+const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
+  ({ issues, group_by, list, listKey, handleIssues, display_properties }) => (
+    <div className="relative w-full h-full">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: any) => (
+          <div 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">
+              <KanBanGroupByHeaderRoot
+                column_id={getValueFromObject(_list, listKey) as string}
+                group_by={group_by}
+                issues_count={issues?.[getValueFromObject(_list, listKey) as string]?.length || 0}
+              />
+            </div>
+            <div className={`w-full h-full relative transition-all`}>
+              {issues && (
+                <IssueBlock
+                  columnId={getValueFromObject(_list, listKey) as string}
+                  issues={issues[getValueFromObject(_list, listKey) as string]}
+                  handleIssues={handleIssues}
+                  display_properties={display_properties}
+                />
+              )}
+            </div>
+          </div>
+        ))}
+    </div>
+  )
+);
+
+export interface IKanBan {
+  issues: any;
+  group_by: string | null;
+  handleDragDrop?: (result: any) => void | undefined;
+  handleIssues?: (group_by: string | null, issue: any) => void;
+  display_properties: any;
+}
+
+export const List: React.FC<IKanBan> = observer(({ issues, group_by, handleIssues, display_properties }) => {
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  return (
+    <div className="relative w-full h-full">
+      {group_by && group_by === "state" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={projectStore?.projectStates}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+
+      {group_by && group_by === "state_detail.group" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={ISSUE_STATE_GROUPS}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+
+      {group_by && group_by === "priority" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={ISSUE_PRIORITIES}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+
+      {group_by && group_by === "labels" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={projectStore?.projectLabels}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+
+      {group_by && group_by === "assignees" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={projectStore?.projectMembers}
+          listKey={`member.id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+
+      {group_by && group_by === "created_by" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={projectStore?.projectMembers}
+          listKey={`member.id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/list/headers/assignee.tsx

@@ -0,0 +1,33 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { Avatar } from "components/ui";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IAssigneesHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+export const Icon = ({ user }: any) => <Avatar user={user} height="22px" width="22px" fontSize="12px" />;
+
+export const AssigneesHeader: React.FC<IAssigneesHeader> = observer(({ column_id, issues_count }) => {
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  const assignee = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+
+  return (
+    <>
+      {assignee && (
+        <HeaderGroupByCard
+          icon={<Icon user={assignee?.member} />}
+          title={assignee?.member?.display_name || ""}
+          count={issues_count}
+        />
+      )}
+    </>
+  );
+});

web/components/issues/issue-layouts/list/headers/created_by.tsx

@@ -0,0 +1,31 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { Icon } from "./assignee";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface ICreatedByHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+export const CreatedByHeader: React.FC<ICreatedByHeader> = observer(({ column_id, issues_count }) => {
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  const createdBy = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+
+  return (
+    <>
+      {createdBy && (
+        <HeaderGroupByCard
+          icon={<Icon user={createdBy?.member} />}
+          title={createdBy?.member?.display_name || ""}
+          count={issues_count}
+        />
+      )}
+    </>
+  );
+});

web/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+// lucide icons
+import { Plus, Minimize2, Maximize2, Circle } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+interface IHeaderGroupByCard {
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+}
+
+export const HeaderGroupByCard = observer(({ icon, title, count }: IHeaderGroupByCard) => {
+  const verticalAlignPosition = false;
+
+  return (
+    <div
+      className={`flex-shrink-0 relative flex gap-2 p-1.5 ${
+        verticalAlignPosition ? `flex-col items-center w-[44px]` : `flex-row items-center w-full`
+      }`}
+    >
+      <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
+        {icon ? icon : <Circle width={14} strokeWidth={2} />}
+      </div>
+
+      <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>
+        <div className={`font-medium line-clamp-1 text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}>
+          {title}
+        </div>
+        <div className={`text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}>
+          {count || 0}
+        </div>
+      </div>
+
+      {/* <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+          <Plus width={14} strokeWidth={2} />
+        </div> */}
+    </div>
+  );
+});

web/components/issues/issue-layouts/list/headers/group-by-root.tsx

@@ -0,0 +1,30 @@
+// components
+import { StateHeader } from "./state";
+import { StateGroupHeader } from "./state-group";
+import { AssigneesHeader } from "./assignee";
+import { PriorityHeader } from "./priority";
+import { LabelHeader } from "./label";
+import { CreatedByHeader } from "./created_by";
+// mobx
+import { observer } from "mobx-react-lite";
+
+export interface IKanBanGroupByHeaderRoot {
+  column_id: string;
+  group_by: string | null;
+  issues_count: number;
+}
+
+export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = observer(
+  ({ column_id, group_by, issues_count }) => (
+    <>
+      {group_by && group_by === "state" && <StateHeader column_id={column_id} issues_count={issues_count} />}
+      {group_by && group_by === "state_detail.group" && (
+        <StateGroupHeader column_id={column_id} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "priority" && <PriorityHeader column_id={column_id} issues_count={issues_count} />}
+      {group_by && group_by === "labels" && <LabelHeader column_id={column_id} issues_count={issues_count} />}
+      {group_by && group_by === "assignees" && <AssigneesHeader column_id={column_id} issues_count={issues_count} />}
+      {group_by && group_by === "created_by" && <CreatedByHeader column_id={column_id} issues_count={issues_count} />}
+    </>
+  )
+);

web/components/issues/issue-layouts/list/headers/label.tsx

@@ -0,0 +1,24 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface ILabelHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+const Icon = ({ color }: any) => (
+  <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
+);
+
+export const LabelHeader: React.FC<ILabelHeader> = observer(({ column_id, issues_count }) => {
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  const label = (column_id && projectStore?.getProjectLabelById(column_id)) ?? null;
+
+  return <>{label && <HeaderGroupByCard icon={<Icon />} title={label?.name || ""} count={issues_count} />}</>;
+});

web/components/issues/issue-layouts/list/headers/priority.tsx

@@ -0,0 +1,51 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// lucide icons
+import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// constants
+import { issuePriorityByKey } from "constants/issue";
+
+export interface IPriorityHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+const Icon = ({ priority }: any) => (
+  <div className="w-full h-full">
+    {priority === "urgent" ? (
+      <div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <AlertCircle size={14} strokeWidth={2} />
+      </div>
+    ) : priority === "high" ? (
+      <div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalHigh size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "medium" ? (
+      <div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalMedium size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "low" ? (
+      <div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalLow size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : (
+      <div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <Ban size={14} strokeWidth={2} />
+      </div>
+    )}
+  </div>
+);
+
+export const PriorityHeader: React.FC<IPriorityHeader> = observer(({ column_id, issues_count }) => {
+  const priority = column_id && issuePriorityByKey(column_id);
+
+  return (
+    <>
+      {priority && (
+        <HeaderGroupByCard icon={<Icon priority={priority?.key} />} title={priority?.key || ""} count={issues_count} />
+      )}
+    </>
+  );
+});

web/components/issues/issue-layouts/list/headers/state-group.tsx

@@ -0,0 +1,34 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { StateGroupIcon } from "components/icons";
+// constants
+import { issueStateGroupByKey } from "constants/issue";
+
+export interface IStateGroupHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
+  <div className="w-[14px] h-[14px] rounded-full">
+    <StateGroupIcon stateGroup={stateGroup} color={color || null} width="14" height="14" />
+  </div>
+);
+
+export const StateGroupHeader: React.FC<IStateGroupHeader> = observer(({ column_id, issues_count }) => {
+  const stateGroup = column_id && issueStateGroupByKey(column_id);
+
+  return (
+    <>
+      {stateGroup && (
+        <HeaderGroupByCard
+          icon={<Icon stateGroup={stateGroup?.key} />}
+          title={stateGroup?.key || ""}
+          count={issues_count}
+        />
+      )}
+    </>
+  );
+});

web/components/issues/issue-layouts/list/headers/state.tsx

@@ -0,0 +1,31 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { Icon } from "./state-group";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IStateHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+export const StateHeader: React.FC<IStateHeader> = observer(({ column_id, issues_count }) => {
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  const state = (column_id && projectStore?.getProjectStateById(column_id)) ?? null;
+
+  return (
+    <>
+      {state && (
+        <HeaderGroupByCard
+          icon={<Icon stateGroup={state?.group} color={state?.color} />}
+          title={state?.name || ""}
+          count={issues_count}
+        />
+      )}
+    </>
+  );
+});

web/components/issues/issue-layouts/list/index.ts

@@ -0,0 +1 @@
+export * from "./root";

web/components/issues/issue-layouts/list/properties.tsx

@@ -0,0 +1,166 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// lucide icons
+import { Layers, Link, Paperclip } from "lucide-react";
+// components
+import { IssuePropertyState } from "../properties/state";
+import { IssuePropertyPriority } from "../properties/priority";
+import { IssuePropertyLabels } from "../properties/labels";
+import { IssuePropertyAssignee } from "../properties/assignee";
+import { IssuePropertyEstimates } from "../properties/estimates";
+import { IssuePropertyStartDate } from "../properties/date";
+import { Tooltip } from "components/ui";
+
+export interface IKanBanProperties {
+  columnId: string;
+  issue: any;
+  handleIssues?: (group_by: string | null, issue: any) => void;
+  display_properties: any;
+}
+
+export const KanBanProperties: React.FC<IKanBanProperties> = observer(
+  ({ columnId: group_id, issue, handleIssues, display_properties }) => {
+    const handleState = (id: string) => {
+      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: id });
+    };
+
+    const handlePriority = (id: string) => {
+      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: id });
+    };
+
+    const handleLabel = (ids: string[]) => {
+      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids });
+    };
+
+    const handleAssignee = (ids: string[]) => {
+      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
+    };
+
+    const handleStartDate = (date: string) => {
+      if (handleIssues)
+        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
+    };
+
+    const handleTargetDate = (date: string) => {
+      if (handleIssues)
+        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
+    };
+
+    const handleEstimate = (id: string) => {
+      if (handleIssues)
+        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: id });
+    };
+
+    return (
+      <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
+        {/* basic properties */}
+        {/* state */}
+        {display_properties && display_properties?.state && (
+          <IssuePropertyState
+            value={issue?.state || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handleState(id)}
+            disabled={false}
+          />
+        )}
+
+        {/* priority */}
+        {display_properties && display_properties?.priority && (
+          <IssuePropertyPriority
+            value={issue?.priority || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handlePriority(id)}
+            disabled={false}
+          />
+        )}
+
+        {/* label */}
+        {display_properties && display_properties?.labels && (
+          <IssuePropertyLabels
+            value={issue?.labels || null}
+            dropdownArrow={false}
+            onChange={(ids: string[]) => handleLabel(ids)}
+            disabled={false}
+          />
+        )}
+
+        {/* assignee */}
+        {display_properties && display_properties?.assignee && (
+          <IssuePropertyAssignee
+            value={issue?.assignees || null}
+            dropdownArrow={false}
+            onChange={(ids: string[]) => handleAssignee(ids)}
+            disabled={false}
+          />
+        )}
+
+        {/* start date */}
+        {display_properties && display_properties?.start_date && (
+          <IssuePropertyStartDate
+            value={issue?.start_date || null}
+            onChange={(date: string) => handleStartDate(date)}
+            disabled={false}
+          />
+        )}
+
+        {/* target/due date */}
+        {display_properties && display_properties?.due_date && (
+          <IssuePropertyStartDate
+            value={issue?.target_date || null}
+            onChange={(date: string) => handleTargetDate(date)}
+            disabled={false}
+          />
+        )}
+
+        {/* estimates */}
+        {display_properties && display_properties?.estimate && (
+          <IssuePropertyEstimates
+            value={issue?.estimate_point?.toString() || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handleEstimate(id)}
+            disabled={false}
+            workspaceSlug={issue?.workspace_detail?.slug || null}
+            projectId={issue?.project_detail?.id || null}
+          />
+        )}
+
+        {/* extra render properties */}
+        {/* sub-issues */}
+        {display_properties && display_properties?.sub_issue_count && (
+          <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+                <Layers width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
+            </div>
+          </Tooltip>
+        )}
+
+        {/* attachments */}
+        {display_properties && display_properties?.attachment_count && (
+          <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                <Paperclip width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
+            </div>
+          </Tooltip>
+        )}
+
+        {/* link */}
+        {display_properties && display_properties?.link && (
+          <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+                <Link width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
+            </div>
+          </Tooltip>
+        )}
+      </div>
+    );
+  }
+);

web/components/issues/issue-layouts/list/root.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { List } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IListLayout {}
+
+export const ListLayout: React.FC = observer(() => {
+  const { issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
+
+  const issues = issueStore?.getIssues;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
+  const updateIssue = (group_by: string | null, issue: any) => {
+    issueStore.updateIssueStructure(group_by, null, issue);
+  };
+
+  return (
+    <div className={`relative w-full h-full bg-custom-background-90`}>
+      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+    </div>
+  );
+});