fix group

apps/client/src/features/group/components/add-group-member-modal.tsx

@@ -32,7 +32,10 @@ export default function AddGroupMemberModal() {
       <Modal opened={opened} onClose={close} title="Add group members">
         <Divider size="xs" mb="xs" />
 
-        <MultiUserSelect onChange={handleMultiSelectChange} />
+        <MultiUserSelect
+          label={"Add group members"}
+          onChange={handleMultiSelectChange}
+        />
 
         <Group justify="flex-end" mt="md">
           <Button onClick={handleSubmit} type="submit">

apps/client/src/features/group/components/create-group-form.tsx

@@ -69,7 +69,10 @@ export function CreateGroupForm() {
               {...form.getInputProps("description")}
             />
 
-            <MultiUserSelect onChange={handleMultiSelectChange} />
+            <MultiUserSelect
+              label={"Add group members"}
+              onChange={handleMultiSelectChange}
+            />
           </Stack>
 
           <Group justify="flex-end" mt="md">

apps/client/src/features/group/components/group-details.tsx

@@ -17,7 +17,7 @@ export default function GroupDetails() {
       {group && (
         <div>
           {/* Todo: back navigation */}
-          <Title order={3}>{group.name}</Title>
+          <Title order={4}>{group.name}</Title>
           <Text c="dimmed">{group.description}</Text>
 
           <Group my="md" justify="flex-end">

apps/client/src/features/group/components/multi-group-select.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from "react";
+import { useDebouncedValue } from "@mantine/hooks";
+import { Group, MultiSelect, MultiSelectProps, Text } from "@mantine/core";
+import { useGetGroupsQuery } from "@/features/group/queries/group-query.ts";
+import { IGroup } from "@/features/group/types/group.types.ts";
+import { IconUsersGroup } from "@tabler/icons-react";
+
+interface MultiGroupSelectProps {
+  onChange: (value: string[]) => void;
+  label?: string;
+}
+
+const renderMultiSelectOption: MultiSelectProps["renderOption"] = ({
+  option,
+}) => (
+  <Group gap="sm">
+    {<IconUsersGroup size={18} />}
+    <div>
+      <Text size="sm">{option.label}</Text>
+    </div>
+  </Group>
+);
+
+export function MultiGroupSelect({ onChange, label }: MultiGroupSelectProps) {
+  const [searchValue, setSearchValue] = useState("");
+  const [debouncedQuery] = useDebouncedValue(searchValue, 500);
+  const { data: groups, isLoading } = useGetGroupsQuery({
+    query: debouncedQuery,
+    limit: 25,
+  });
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    if (groups) {
+      const groupsData = groups?.items.map((group: IGroup) => {
+        return {
+          value: group.id,
+          label: group.name,
+        };
+      });
+
+      // Filter out existing users by their ids
+      const filteredGroupData = groupsData.filter(
+        (user) =>
+          !data.find((existingUser) => existingUser.value === user.value),
+      );
+
+      // Combine existing data with new search data
+      setData((prevData) => [...prevData, ...filteredGroupData]);
+    }
+  }, [groups]);
+
+  return (
+    <MultiSelect
+      data={data}
+      renderOption={renderMultiSelectOption}
+      hidePickedOptions
+      maxDropdownHeight={300}
+      label={label || "Add groups"}
+      placeholder="Search for groups"
+      searchable
+      searchValue={searchValue}
+      onSearchChange={setSearchValue}
+      clearable
+      variant="filled"
+      onChange={onChange}
+      nothingFoundMessage="No group found"
+      maxValues={50}
+    />
+  );
+}

apps/client/src/features/group/components/multi-user-select.tsx

@@ -2,23 +2,24 @@ import React, { useEffect, useState } from "react";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query.ts";
 import { IUser } from "@/features/user/types/user.types.ts";
-import {
-  Avatar,
-  Group,
-  MultiSelect,
-  MultiSelectProps,
-  Text,
-} from "@mantine/core";
+import { Group, MultiSelect, MultiSelectProps, Text } from "@mantine/core";
+import { UserAvatar } from "@/components/ui/user-avatar.tsx";
 
 interface MultiUserSelectProps {
   onChange: (value: string[]) => void;
+  label?: string;
 }
 
 const renderMultiSelectOption: MultiSelectProps["renderOption"] = ({
   option,
 }) => (
   <Group gap="sm">
-    <Avatar src={option?.["avatarUrl"]} size={36} radius="xl" />
+    <UserAvatar
+      avatarUrl={option?.["avatarUrl"]}
+      name={option.label}
+      size={36}
+      radius="xl"
+    />
     <div>
       <Text size="sm">{option.label}</Text>
       <Text size="xs" opacity={0.5}>
@@ -28,7 +29,7 @@ const renderMultiSelectOption: MultiSelectProps["renderOption"] = ({
   </Group>
 );
 
-export function MultiUserSelect({ onChange }: MultiUserSelectProps) {
+export function MultiUserSelect({ onChange, label }: MultiUserSelectProps) {
   const [searchValue, setSearchValue] = useState("");
   const [debouncedQuery] = useDebouncedValue(searchValue, 500);
   const { data: users, isLoading } = useWorkspaceMembersQuery({
@@ -47,9 +48,15 @@ export function MultiUserSelect({ onChange }: MultiUserSelectProps) {
           email: user.email,
         };
       });
-      if (usersData.length > 0) {
-        setData(usersData);
-      }
+
+      // Filter out existing users by their ids
+      const filteredUsersData = usersData.filter(
+        (user) =>
+          !data.find((existingUser) => existingUser.value === user.value),
+      );
+
+      // Combine existing data with new search data
+      setData((prevData) => [...prevData, ...filteredUsersData]);
     }
   }, [users]);
 
@@ -59,7 +66,7 @@ export function MultiUserSelect({ onChange }: MultiUserSelectProps) {
       renderOption={renderMultiSelectOption}
       hidePickedOptions
       maxDropdownHeight={300}
-      label="Add group members"
+      label={label || "Add members"}
       placeholder="Search for users"
       searchable
       searchValue={searchValue}