feat: display formatted email if member has not set display name

apps/web/src/views/board/components/Filters.tsx

@@ -9,7 +9,8 @@ import { IoFilterOutline } from "react-icons/io5";
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
-import { formatToArray } from "~/utils/helpers";
+import LabelIcon from "~/components/LabelIcon";
+import { formatMemberDisplayName, formatToArray } from "~/utils/helpers";
 import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
 
 interface BoardData {
@@ -58,17 +59,6 @@ interface BoardData {
   }[];
 }
 
-const LabelIcon = ({ colourCode }: { colourCode: string | null }) => (
-  <svg
-    fill={colourCode ?? "#3730a3"}
-    className="h-2 w-2"
-    viewBox="0 0 6 6"
-    aria-hidden="true"
-  >
-    <circle cx={3} cy={3} r={3} />
-  </svg>
-);
-
 const Filters = ({
   position = "right",
   boardData,
@@ -95,7 +85,10 @@ const Filters = ({
   const formattedMembers =
     boardData?.workspace?.members?.map((member) => ({
       key: member.publicId,
-      value: member.user?.name ?? "",
+      value: formatMemberDisplayName(
+        member.user?.name ?? null,
+        member.user?.email ?? null,
+      ),
       selected: !!router.query.members?.includes(member.publicId),
       leftIcon: (
         <Avatar

apps/web/src/views/board/components/NewCardForm.tsx

@@ -8,14 +8,18 @@ import {
 
 import type { NewCardInput } from "@kan/api/types";
 
+import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
 import Input from "~/components/Input";
+import LabelIcon from "~/components/LabelIcon";
 import Toggle from "~/components/Toggle";
 import { useBoard } from "~/providers/board";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
+import { formatMemberDisplayName } from "~/utils/helpers";
+import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
 
 type NewCardFormInput = NewCardInput & {
   isCreateAnotherEnabled: boolean;
@@ -73,7 +77,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
     boardData?.labels.map((label) => ({
       key: label.publicId,
       value: label.name,
-      selected: labelPublicIds.includes(label.publicId),
+      leftIcon: <LabelIcon colourCode={label.colourCode} />,
     })) ?? [];
 
   const formattedLists =
@@ -86,8 +90,20 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
   const formattedMembers =
     boardData?.workspace?.members.map((member) => ({
       key: member.publicId,
-      value: member.user?.name ?? "",
-      selected: memberPublicIds.includes(member.publicId),
+      value: formatMemberDisplayName(
+        member.user?.name ?? null,
+        member.user?.email ?? null,
+      ),
+      leftIcon: (
+        <Avatar
+          size="xs"
+          name={member.user?.name ?? ""}
+          imageUrl={
+            member.user?.image ? getPublicUrl(member.user.image) : undefined
+          }
+          email={member.user?.email ?? ""}
+        />
+      ),
     })) ?? [];
 
   const onSubmit = (data: NewCardInput) => {