Move toasts to sonner (#6053)

app/scenes/CollectionPermissions/AddPeopleToCollection.tsx

@@ -1,9 +1,12 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import Collection from "~/models/Collection";
 import User from "~/models/User";
 import Invite from "~/scenes/Invite";
+import Avatar from "~/components/Avatar";
+import { AvatarSize } from "~/components/Avatar/Avatar";
 import ButtonLink from "~/components/ButtonLink";
 import Empty from "~/components/Empty";
 import Flex from "~/components/Flex";
@@ -15,7 +18,6 @@ import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
 import useThrottledCallback from "~/hooks/useThrottledCallback";
-import useToasts from "~/hooks/useToasts";
 import MemberListItem from "./components/MemberListItem";
 
 type Props = {
@@ -24,7 +26,6 @@ type Props = {
 
 function AddPeopleToCollection({ collection }: Props) {
   const { memberships, users } = useStores();
-  const { showToast } = useToasts();
   const team = useCurrentTeam();
   const { t } = useTranslation();
   const [inviteModalOpen, setInviteModalOpen, setInviteModalClosed] =
@@ -50,18 +51,16 @@ function AddPeopleToCollection({ collection }: Props) {
         collectionId: collection.id,
         userId: user.id,
       });
-      showToast(
+      toast.success(
         t("{{ userName }} was added to the collection", {
           userName: user.name,
         }),
         {
-          type: "success",
+          icon: <Avatar model={user} size={AvatarSize.Toast} />,
         }
       );
     } catch (err) {
-      showToast(t("Could not add user"), {
-        type: "error",
-      });
+      toast.error(t("Could not add user"));
     }
   };