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

apps/web/src/components/LabelIcon.tsx

@@ -0,0 +1,12 @@
+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>
+);
+
+export default LabelIcon;

apps/web/src/utils/helpers.ts

@@ -28,3 +28,17 @@ export const getInitialsFromName = (name: string) => {
     .map((namePart) => namePart.charAt(0).toUpperCase())
     .join("");
 };
+
+export const formatMemberDisplayName = (
+  name: string | null,
+  email: string | null,
+) => {
+  if (name) return name;
+  if (!email) return "";
+
+  const localPart = email.split("@")[0];
+
+  if (!localPart) return "";
+
+  return localPart.replace(/[_-]/g, ".");
+};

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 ?? "",
+      value: formatMemberDisplayName(
-      selected: memberPublicIds.includes(member.publicId),
+        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) => {

apps/web/src/views/card/components/LabelSelector.tsx

@@ -1,12 +1,11 @@
-import { Fragment } from "react";
-import { api } from "~/utils/api";
 import { Menu, Transition } from "@headlessui/react";
-import { HiMiniPlus } from "react-icons/hi2";
+import { Fragment } from "react";
 import { useForm } from "react-hook-form";
+import { HiEllipsisHorizontal, HiMiniPlus } from "react-icons/hi2";
 
+import LabelIcon from "~/components/LabelIcon";
 import { useModal } from "~/providers/modal";
-
+import { api } from "~/utils/api";
-import { HiEllipsisHorizontal } from "react-icons/hi2";
 
 interface LabelSelectorProps {
   cardPublicId: string;
@@ -37,7 +36,7 @@ export default function LabelSelector({
 
   const { register, handleSubmit, setValue, watch } = useForm({
     values: Object.fromEntries(
-      labels?.map((label) => [label.publicId, label.selected]) ?? [],
+      labels.map((label) => [label.publicId, label.selected]) ?? [],
     ),
   });
 
@@ -100,7 +99,7 @@ export default function LabelSelector({
             <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
               <div className="p-2">
                 <form onSubmit={handleSubmit(onSubmit)}>
-                  {labels?.map((label) => (
+                  {labels.map((label) => (
                     <Menu.Item key={label.publicId}>
                       {() => (
                         <div
@@ -127,12 +126,18 @@ export default function LabelSelector({
                             checked={watch(label.publicId)}
                           />
                           <div className="flex w-full items-center justify-between">
-                            <label
+                            <div className="flex items-center">
-                              htmlFor={label.publicId}
+                              <span className="ml-3 flex items-center">
-                              className="ml-3 text-sm"
+                                <LabelIcon colourCode={label.colourCode} />
-                            >
+                              </span>
-                              {label.name}
+                              <label
-                            </label>
+                                htmlFor={label.publicId}
+                                className="ml-3 text-sm"
+                              >
+                                {label.name}
+                              </label>
+                            </div>
+
                             <button
                               className="invisible group-hover:visible"
                               onClick={(event) => {

apps/web/src/views/card/components/MemberSelector.tsx

@@ -1,8 +1,12 @@
-import { Fragment } from "react";
-import { api } from "~/utils/api";
 import { Menu, Transition } from "@headlessui/react";
-import { HiMiniPlus } from "react-icons/hi2";
+import { Fragment } from "react";
 import { useForm } from "react-hook-form";
+import { HiMiniPlus } from "react-icons/hi2";
+
+import Avatar from "~/components/Avatar";
+import { api } from "~/utils/api";
+import { formatMemberDisplayName } from "~/utils/helpers";
+import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
 
 interface MemberSelectorProps {
   cardPublicId: string;
@@ -11,6 +15,8 @@ interface MemberSelectorProps {
     user: {
       id: string;
       name: string | null;
+      image: string | null;
+      email: string | null;
     };
     selected: boolean;
   }[];
@@ -34,7 +40,7 @@ export default function MemberSelector({
 
   const { register, handleSubmit, setValue, watch } = useForm({
     values: Object.fromEntries(
-      members?.map((member) => [member.publicId, member.selected]) ?? [],
+      members.map((member) => [member.publicId, member.selected]) ?? [],
     ),
   });
 
@@ -64,8 +70,8 @@ export default function MemberSelector({
                     className="relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 ring-light-200 dark:ring-dark-100"
                   >
                     <span className="text-[10px] font-medium leading-none text-white">
-                      {member.user?.name
+                      {member.user.name
-                        ? member.user?.name
+                        ? member.user.name
                             .split(" ")
                             .map((namePart) => namePart.charAt(0).toUpperCase())
                             .join("")
@@ -94,7 +100,7 @@ export default function MemberSelector({
             <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
               <div className="p-2">
                 <form onSubmit={handleSubmit(onSubmit)}>
-                  {members?.map((member) => (
+                  {members.map((member) => (
                     <Menu.Item key={member.publicId}>
                       {() => (
                         <div
@@ -120,12 +126,29 @@ export default function MemberSelector({
                             {...register(member.publicId)}
                             checked={watch(member.publicId)}
                           />
-                          <label
+                          <div className="flex items-center">
-                            htmlFor={member.publicId}
+                            <span className="ml-3 flex items-center">
-                            className="ml-3 text-sm"
+                              <Avatar
-                          >
+                                size="xs"
-                            {member?.user?.name}
+                                name={member.user.name ?? ""}
-                          </label>
+                                imageUrl={
+                                  member.user.image
+                                    ? getPublicUrl(member.user.image)
+                                    : undefined
+                                }
+                                email={member.user.email ?? ""}
+                              />
+                            </span>
+                            <label
+                              htmlFor={member.publicId}
+                              className="ml-3 text-sm"
+                            >
+                              {formatMemberDisplayName(
+                                member.user.name,
+                                member.user.email,
+                              )}
+                            </label>
+                          </div>
                         </div>
                       )}
                     </Menu.Item>

packages/db/src/repository/card.repo.ts

@@ -237,7 +237,9 @@ export const getWithListAndMembersByPublicId = async (
                 publicId,
                 user!workspace_members_userId_user_id_fk (
                   id,
-                  name
+                  name,
+                  email,
+                  image
                 )
               )
             )