feat: list and kanban view group by header icon (#665)

apps/app/components/core/board-view/board-header.tsx

@@ -9,9 +9,11 @@ import issuesService from "services/issues.service";
 import projectService from "services/project.service";
 // hooks
 import useIssuesView from "hooks/use-issues-view";
+// component
+import { Avatar } from "components/ui";
 // icons
 import { ArrowsPointingInIcon, ArrowsPointingOutIcon, PlusIcon } from "@heroicons/react/24/outline";
-import { getStateGroupIcon } from "components/icons";
+import { getPriorityIcon, getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
@@ -89,9 +91,39 @@ export const BoardHeader: React.FC<Props> = ({
     return title;
   };
 
+  const getGroupIcon = () => {
+    let icon;
+
+    switch (selectedGroup) {
+      case "state":
+        icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor);
+        break;
+      case "priority":
+        icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center");
+        break;
+      case "labels":
+        const labelColor =
+          issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
+        icon = (
+          <span
+            className="h-[18px] w-[18px] flex-shrink-0 rounded-full"
+            style={{ backgroundColor: labelColor }}
+          />
+        );
+        break;
+      case "created_by":
+        const member = members?.find((member) => member.member.id === groupTitle)?.member;
+        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
+
+        break;
+    }
+
+    return icon;
+  };
+
   return (
     <div
-      className={`flex justify-between px-1 ${
+      className={`flex justify-between items-center px-1 ${
         !isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
       }`}
     >
@@ -101,7 +133,7 @@ export const BoardHeader: React.FC<Props> = ({
             !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
           }`}
         >
-          {currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor)}
+          <span className="flex items-center">{getGroupIcon()}</span>
           <h2
             className="text-lg font-semibold capitalize"
             style={{

apps/app/components/core/list-view/single-list.tsx

@@ -12,10 +12,10 @@ import useIssuesProperties from "hooks/use-issue-properties";
 // components
 import { SingleListIssue } from "components/core";
 // ui
-import { CustomMenu } from "components/ui";
+import { Avatar, CustomMenu } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
-import { getStateGroupIcon } from "components/icons";
+import { getPriorityIcon, getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
@@ -99,6 +99,36 @@ export const SingleList: React.FC<Props> = ({
     return title;
   };
 
+  const getGroupIcon = () => {
+    let icon;
+
+    switch (selectedGroup) {
+      case "state":
+        icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor);
+        break;
+      case "priority":
+        icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center");
+        break;
+      case "labels":
+        const labelColor =
+          issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
+        icon = (
+          <span
+            className="h-[18px] w-[18px] flex-shrink-0 rounded-full"
+            style={{ backgroundColor: labelColor }}
+          />
+        );
+        break;
+      case "created_by":
+        const member = members?.find((member) => member.member.id === groupTitle)?.member;
+        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
+
+        break;
+    }
+
+    return icon;
+  };
+
   return (
     <Disclosure key={groupTitle} as="div" defaultOpen>
       {({ open }) => (
@@ -110,12 +140,8 @@ export const SingleList: React.FC<Props> = ({
           >
             <Disclosure.Button>
               <div className="flex items-center gap-x-3">
-                {selectedGroup !== null && selectedGroup === "state" ? (
+                {selectedGroup !== null && (
-                  <span>
+                  <span className="flex items-center">{getGroupIcon()}</span>
-                    {currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor)}
-                  </span>
-                ) : (
-                  ""
                 )}
                 {selectedGroup !== null ? (
                   <h2 className="text-base font-semibold capitalize leading-6 text-gray-800">