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

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) => {