Fix approvers ui

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/components/form/PeopleMultiSelectField.tsx

@@ -18,12 +18,14 @@ type Props<T extends FieldValues = FieldValues> = {
   label?: string;
   error?: string;
   selectedPeople?: Person[];
+  placeholder?: string;
 } & ComponentProps<typeof Field>;
 
 export function PeopleMultiSelectField<T extends FieldValues = FieldValues>({
   organizationId,
   control,
   selectedPeople = [],
+  placeholder,
   ...props
 }: Props<T>) {
   return (
@@ -37,6 +39,7 @@ export function PeopleMultiSelectField<T extends FieldValues = FieldValues>({
           name={props.name}
           disabled={props.disabled}
           selectedPeople={selectedPeople}
+          placeholder={placeholder}
         />
       </Suspense>
     </Field>
@@ -44,10 +47,10 @@ export function PeopleMultiSelectField<T extends FieldValues = FieldValues>({
 }
 
 function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
-  props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedPeople">,
+  props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedPeople" | "placeholder">,
 ) {
   const { __ } = useTranslate();
-  const { name, organizationId, control, selectedPeople = [] } = props;
+  const { name, organizationId, control, selectedPeople = [], placeholder } = props;
   const people = usePeople(organizationId, { excludeContractEnded: true });
   const [isOpen, setIsOpen] = useState(false);
 
@@ -91,7 +94,7 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
                   disabled={props.disabled}
                   id={name}
                   variant="editor"
-                  placeholder={__("Add attendees...")}
+                  placeholder={placeholder ?? __("Add people...")}
                   onValueChange={handleAddPerson}
                   key={`${selectedPeopleIds.length}-${people.length}`}
                   className="w-full"

apps/console/src/pages/organizations/documents/_components/CreateDocumentDialog.tsx

@@ -151,6 +151,7 @@ export function CreateDocumentDialog({ trigger, connection }: Props) {
                 name="approverIds"
                 control={control}
                 organizationId={organizationId}
+                placeholder={__("Add approvers...")}
               />
             </PropertyRow>
           </div>

apps/console/src/pages/organizations/documents/_components/DocumentLayoutDrawer.tsx

@@ -177,6 +177,7 @@ export function DocumentLayoutDrawer(props: {
                   control={control}
                   organizationId={organizationId}
                   selectedPeople={approvers}
+                  placeholder={__("Add approvers...")}
                 />
               </EditablePropertyContent>
             )

apps/console/src/pages/organizations/documents/_components/DocumentListItem.tsx

@@ -1,6 +1,6 @@
 import { formatDate, getDocumentClassificationLabel, getDocumentTypeLabel, sprintf } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
-import { ActionDropdown, Avatar, Badge, Checkbox, DropdownItem, IconTrashCan, Td, Tr, useConfirm } from "@probo/ui";
+import { ActionDropdown, Badge, Checkbox, DropdownItem, IconTrashCan, Td, Tr, useConfirm } from "@probo/ui";
 import { useFragment } from "react-relay";
 import { type DataID, graphql } from "relay-runtime";
 
@@ -132,14 +132,7 @@ export function DocumentListItem(props: {
         {getDocumentClassificationLabel(__, document.classification)}
       </Td>
       <Td className="w-60">
-        <div className="flex gap-2 items-center">
-          {document.approvers.edges.map(({ node }) => (
-            <div key={node.id} className="flex gap-1 items-center">
-              <Avatar name={node.fullName} />
-              {node.fullName}
-            </div>
-          ))}
-        </div>
+        {document.approvers.edges.map(({ node }) => node.fullName).join(", ")}
       </Td>
       <Td className="w-60">{formatDate(document.updatedAt)}</Td>
       <Td className="w-20">

apps/console/src/pages/organizations/meetings/dialogs/CreateMeetingDialog.tsx

@@ -104,6 +104,7 @@ export function CreateMeetingDialog({ children, connectionId }: Props) {
             control={control}
             organizationId={organizationId}
             label={__("Attendees")}
+            placeholder={__("Add attendees...")}
           />
         </DialogContent>
         <DialogFooter>