From 85296022522c08933bb097538573ae774bfdf298 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 19 Dec 2023 18:28:48 -0500
Subject: [PATCH] improved user experience

---
 components/Modal.tsx                          |   2 +-
 .../EditCollectionSharingModal.tsx            | 307 ++++++++++++------
 2 files changed, 217 insertions(+), 92 deletions(-)

diff --git a/components/Modal.tsx b/components/Modal.tsx
index baabcbe..ac74785 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -23,7 +23,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
           className || ""
         }`}
       >
-        <div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100">
+        <div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100 overflow-y-auto sm:overflow-y-visible">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
             className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
diff --git a/components/ModalContent/EditCollectionSharingModal.tsx b/components/ModalContent/EditCollectionSharingModal.tsx
index 1aea017..de769c0 100644
--- a/components/ModalContent/EditCollectionSharingModal.tsx
+++ b/components/ModalContent/EditCollectionSharingModal.tsx
@@ -186,129 +186,254 @@ export default function EditCollectionSharingModal({
 
         {collection?.members[0]?.user && (
           <>
-            <div
-              className="flex flex-col divide-y divide-neutral-content border border-neutral-content rounded-xl overflow-hidden ">
+            <div className="flex flex-col divide-y divide-neutral-content border border-neutral-content rounded-xl bg-base-200">
               <div
-                className="relative p-3 bg-base-200 flex gap-2 justify-between"
-                title={`@${collectionOwner.username} is the owner of this collection.`}
+                className="relative p-3 bg-base-200 rounded-xl flex gap-2 justify-between"
+                title={`@${collectionOwner.username} is the owner of this collection`}
               >
                 <div className={"flex items-center justify-between w-full"}>
                   <div className={"flex items-center"}>
                     <div className={"shrink-0"}>
                       <ProfilePhoto
-                        src={collectionOwner.image ? collectionOwner.image : undefined}
+                        src={
+                          collectionOwner.image
+                            ? collectionOwner.image
+                            : undefined
+                        }
                         name={collectionOwner.name}
                       />
                     </div>
                     <div className={"grow ml-2"}>
-                      <p className="text-sm font-semibold">{collectionOwner.name}</p>
-                      <p className="text-xs text-neutral">@{collectionOwner.username}</p>
+                      <p className="text-sm font-semibold">
+                        {collectionOwner.name}
+                      </p>
+                      <p className="text-xs text-neutral">
+                        @{collectionOwner.username}
+                      </p>
                     </div>
                   </div>
                   <div>
-                    <p className="text-sm text-neutral">
-                      Owner
-                    </p>
+                    <p className="text-sm font-bold">Owner</p>
                   </div>
                 </div>
               </div>
 
+              <div className="divider my-0 last:hidden h-[3px]"></div>
+
               {collection.members
                 .sort((a, b) => (a.userId as number) - (b.userId as number))
                 .map((e, i) => {
+                  const roleLabel =
+                    e.canCreate && e.canUpdate && e.canDelete
+                      ? "Admin"
+                      : e.canCreate && !e.canUpdate && !e.canDelete
+                      ? "Contributor"
+                      : !e.canCreate && !e.canUpdate && !e.canDelete
+                      ? "Viewer"
+                      : undefined;
+
                   return (
-                    <div
-                      key={i}
-                      className="relative p-3 bg-base-200 flex gap-2 justify-between"
-                    >
-                      <div className={"flex items-center justify-between w-full"}>
-                        <div className={"flex items-center"}>
-                          <div className={"shrink-0"}>
-                            <ProfilePhoto
-                              src={e.user.image ? e.user.image : undefined}
-                              name={e.user.name}
-                            />
+                    <>
+                      <div
+                        key={i}
+                        className="relative p-3 bg-base-200 rounded-xl flex gap-2 justify-between border-none"
+                      >
+                        <div
+                          className={"flex items-center justify-between w-full"}
+                        >
+                          <div className={"flex items-center"}>
+                            <div className={"shrink-0"}>
+                              <ProfilePhoto
+                                src={e.user.image ? e.user.image : undefined}
+                                name={e.user.name}
+                              />
+                            </div>
+                            <div className={"grow ml-2"}>
+                              <p className="text-sm font-semibold">
+                                {e.user.name}
+                              </p>
+                              <p className="text-xs text-neutral">
+                                @{e.user.username}
+                              </p>
+                            </div>
                           </div>
-                          <div className={"grow ml-2"}>
-                            <p className="text-sm font-semibold">{e.user.name}</p>
-                            <p className="text-xs text-neutral">@{e.user.username}</p>
-                          </div>
-                        </div>
 
-                        <div className={"flex items-center gap-2"}>
-                          {permissions === true && (
-                            <i
-                              className={"bi-x text-xl btn btn-sm text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"}
-                              title="Remove Member"
-                              onClick={() => {
-                                const updatedMembers = collection.members.filter(
-                                  (member) => {
-                                    return member.user.username !== e.user.username;
-                                  }
-                                );
-                                setCollection({
-                                  ...collection,
-                                  members: updatedMembers,
-                                });
-                              }}
-                            />
-                          )}
-
-                          <div>
+                          <div className={"flex items-center gap-2"}>
                             {permissions === true ? (
-                              <select
-                                onChange={(evt) => {
-                                  if (permissions !== true) return;
-
-                                  switch (evt.target.value) {
-                                    case 'admin':
-                                      collection.members[i].canCreate = true;
-                                      collection.members[i].canUpdate = true;
-                                      collection.members[i].canDelete = true;
-                                      break;
-                                    case 'contributor':
-                                      collection.members[i].canCreate = true;
-                                      collection.members[i].canUpdate = false;
-                                      collection.members[i].canDelete = false;
-                                      break;
-                                    default:
-                                      collection.members[i].canCreate = false;
-                                      collection.members[i].canUpdate = false;
-                                      collection.members[i].canDelete = false;
-                                      break;
-                                  }
-                                }}
-                                className="select select-bordered select-sm w-full max-w-xs">
-                                <option value={'viewer'}
-                                        selected={!e.canCreate && !e.canUpdate && !e.canDelete}>
-                                  Viewer
-                                </option>
-                                <option value={'contributor'}
-                                        selected={e.canCreate && !e.canUpdate && !e.canDelete}>
-                                  Contributor
-                                </option>
-                                <option value={'admin'} selected={e.canCreate && e.canUpdate && e.canDelete}>
-                                  Admin
-                                </option>
-                              </select>
+                              <div className="dropdown dropdown-bottom dropdown-end">
+                                <div
+                                  tabIndex={0}
+                                  role="button"
+                                  className="btn btn-sm btn-primary font-normal"
+                                >
+                                  {roleLabel}
+                                  <i className="bi-chevron-down"></i>
+                                </div>
+                                <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-64 mt-1">
+                                  <li>
+                                    <label
+                                      className="label cursor-pointer flex justify-start"
+                                      tabIndex={0}
+                                      role="button"
+                                    >
+                                      <input
+                                        type="radio"
+                                        name={`role-radio-${e.userId}`}
+                                        className="radio checked:bg-primary"
+                                        checked={
+                                          !e.canCreate &&
+                                          !e.canUpdate &&
+                                          !e.canDelete
+                                        }
+                                        onChange={() => {
+                                          const updatedMember = {
+                                            ...e,
+                                            canCreate: false,
+                                            canUpdate: false,
+                                            canDelete: false,
+                                          };
+                                          const updatedMembers =
+                                            collection.members.map((member) =>
+                                              member.userId === e.userId
+                                                ? updatedMember
+                                                : member
+                                            );
+                                          setCollection({
+                                            ...collection,
+                                            members: updatedMembers,
+                                          });
+                                          (
+                                            document?.activeElement as HTMLElement
+                                          )?.blur();
+                                        }}
+                                      />
+                                      <div>
+                                        <p className="font-bold">Viewer</p>
+                                        <p>Read-only access</p>
+                                      </div>
+                                    </label>
+                                  </li>
+                                  <li>
+                                    <label
+                                      className="label cursor-pointer flex justify-start"
+                                      tabIndex={0}
+                                      role="button"
+                                    >
+                                      <input
+                                        type="radio"
+                                        name={`role-radio-${e.userId}`}
+                                        className="radio checked:bg-primary"
+                                        checked={
+                                          e.canCreate &&
+                                          !e.canUpdate &&
+                                          !e.canDelete
+                                        }
+                                        onChange={() => {
+                                          const updatedMember = {
+                                            ...e,
+                                            canCreate: true,
+                                            canUpdate: false,
+                                            canDelete: false,
+                                          };
+                                          const updatedMembers =
+                                            collection.members.map((member) =>
+                                              member.userId === e.userId
+                                                ? updatedMember
+                                                : member
+                                            );
+                                          setCollection({
+                                            ...collection,
+                                            members: updatedMembers,
+                                          });
+                                          (
+                                            document?.activeElement as HTMLElement
+                                          )?.blur();
+                                        }}
+                                      />
+                                      <div>
+                                        <p className="font-bold">Contributor</p>
+                                        <p>Can view and create Links</p>
+                                      </div>
+                                    </label>
+                                  </li>
+                                  <li>
+                                    <label
+                                      className="label cursor-pointer flex justify-start"
+                                      tabIndex={0}
+                                      role="button"
+                                    >
+                                      <input
+                                        type="radio"
+                                        name={`role-radio-${e.userId}`}
+                                        className="radio checked:bg-primary"
+                                        checked={
+                                          e.canCreate &&
+                                          e.canUpdate &&
+                                          e.canDelete
+                                        }
+                                        onChange={() => {
+                                          const updatedMember = {
+                                            ...e,
+                                            canCreate: true,
+                                            canUpdate: true,
+                                            canDelete: true,
+                                          };
+                                          const updatedMembers =
+                                            collection.members.map((member) =>
+                                              member.userId === e.userId
+                                                ? updatedMember
+                                                : member
+                                            );
+                                          setCollection({
+                                            ...collection,
+                                            members: updatedMembers,
+                                          });
+                                          (
+                                            document?.activeElement as HTMLElement
+                                          )?.blur();
+                                        }}
+                                      />
+                                      <div>
+                                        <p className="font-bold">Admin</p>
+                                        <p>Full access to all Links</p>
+                                      </div>
+                                    </label>
+                                  </li>
+                                </ul>
+                              </div>
                             ) : (
                               <p className="text-sm text-neutral">
-                                {
-                                  (e.canCreate && e.canUpdate && e.canDelete)
-                                    ? "Admin"
-                                    : (e.canCreate)
-                                      ? 'Contributor'
-                                      : 'Viewer'
-                                }
+                                {roleLabel}
                               </p>
                             )}
+
+                            {permissions === true && (
+                              <i
+                                className={
+                                  "bi-x text-xl btn btn-sm btn-square btn-ghost text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
+                                }
+                                title="Remove Member"
+                                onClick={() => {
+                                  const updatedMembers =
+                                    collection.members.filter((member) => {
+                                      return (
+                                        member.user.username !== e.user.username
+                                      );
+                                    });
+                                  setCollection({
+                                    ...collection,
+                                    members: updatedMembers,
+                                  });
+                                }}
+                              />
+                            )}
                           </div>
                         </div>
                       </div>
-                    </div>
+                      <div className="divider my-0 last:hidden h-[3px]"></div>
+                    </>
                   );
-                })
-              }
+                })}
             </div>
           </>
         )}