Revert "undo commit"

This reverts commit 9103f67db5.

components/ModalContent/EditCollectionSharingModal.tsx

@@ -1,11 +1,7 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import toast from "react-hot-toast";
-import {
-  AccountSettings,
-  CollectionIncludingMembersAndLinkCount,
-  Member,
-} from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import usePermissions from "@/hooks/usePermissions";
 import ProfilePhoto from "../ProfilePhoto";
@@ -15,7 +11,6 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
 import { useUpdateCollection } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
-import CopyButton from "../CopyButton";
 
 type Props = {
   onClose: Function;
@@ -45,7 +40,6 @@ export default function EditCollectionSharingModal({
 
       await updateCollection.mutateAsync(collection, {
         onSettled: (data, error) => {
-          setSubmitLoader(false);
           toast.dismiss(load);
 
           if (error) {
@@ -56,6 +50,8 @@ export default function EditCollectionSharingModal({
           }
         },
       });
+
+      setSubmitLoader(false);
     }
   };
 
@@ -66,11 +62,17 @@ export default function EditCollectionSharingModal({
 
   const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
 
-  const [memberIdentifier, setMemberIdentifier] = useState("");
+  const [memberUsername, setMemberUsername] = useState("");
 
-  const [collectionOwner, setCollectionOwner] = useState<
-    Partial<AccountSettings>
-  >({});
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsMonolith: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
 
   useEffect(() => {
     const fetchOwner = async () => {
@@ -91,7 +93,7 @@ export default function EditCollectionSharingModal({
       members: [...collection.members, newMember],
     });
 
-    setMemberIdentifier("");
+    setMemberUsername("");
   };
 
   return (
@@ -130,15 +132,25 @@ export default function EditCollectionSharingModal({
           </div>
         )}
 
-        {collection.isPublic && (
-          <div>
-            <p className="mb-2">{t("sharable_link")}</p>
-            <div className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border flex items-center gap-2 justify-between">
+        {collection.isPublic ? (
+          <div className={permissions === true ? "pl-5" : ""}>
+            <p className="mb-2">{t("sharable_link_guide")}</p>
+            <div
+              onClick={() => {
+                try {
+                  navigator.clipboard
+                    .writeText(publicCollectionURL)
+                    .then(() => toast.success(t("copied")));
+                } catch (err) {
+                  console.log(err);
+                }
+              }}
+              className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border outline-none hover:border-primary dark:hover:border-primary duration-100 cursor-text"
+            >
               {publicCollectionURL}
-              <CopyButton text={publicCollectionURL} />
             </div>
           </div>
-        )}
+        ) : null}
 
         {permissions === true && <div className="divider my-3"></div>}
 
@@ -148,15 +160,15 @@ export default function EditCollectionSharingModal({
 
             <div className="flex items-center gap-2">
               <TextInput
-                value={memberIdentifier || ""}
+                value={memberUsername || ""}
                 className="bg-base-200"
-                placeholder={t("add_member_placeholder")}
-                onChange={(e) => setMemberIdentifier(e.target.value)}
+                placeholder={t("members_username_placeholder")}
+                onChange={(e) => setMemberUsername(e.target.value)}
                 onKeyDown={(e) =>
                   e.key === "Enter" &&
                   addMemberToCollection(
-                    user,
-                    memberIdentifier.replace(/^@/, "") || "",
+                    user.username as string,
+                    memberUsername || "",
                     collection,
                     setMemberState,
                     t
@@ -167,8 +179,8 @@ export default function EditCollectionSharingModal({
               <div
                 onClick={() =>
                   addMemberToCollection(
-                    user,
-                    memberIdentifier.replace(/^@/, "") || "",
+                    user.username as string,
+                    memberUsername || "",
                     collection,
                     setMemberState,
                     t