many visual changes + some code cleanup

components/Modal/AddCollection.tsx

@@ -7,10 +7,10 @@ import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClose, faPlus } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
-import { NewCollection } from "@/types/global";
+import { ExtendedCollection, NewCollection } from "@/types/global";
 import { useSession } from "next-auth/react";
 import RequiredBadge from "../RequiredBadge";
-import getPublicUserDataByEmail from "@/lib/client/getPublicUserDataByEmail";
+import addMemberToCollection from "@/lib/client/addMemberToCollection";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -37,6 +37,15 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
     if (response) toggleCollectionModal();
   };
 
+  const setMemberState = (newMember: any) => {
+    setNewCollection({
+      ...newCollection,
+      members: [...newCollection.members, newMember],
+    });
+
+    setMemberEmail("");
+  };
+
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <p className="text-xl text-sky-500 mb-2 text-center">New Collection</p>
@@ -78,56 +87,36 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
       <hr className="border rounded my-2" />
 
       <p className="text-sm font-bold text-sky-300">Members</p>
+      <div className="relative">
         <input
           value={memberEmail}
           onChange={(e) => {
             setMemberEmail(e.target.value);
           }}
-        onKeyDown={async (e) => {
-          const checkIfMemberAlreadyExists = newCollection.members.find(
-            (e) => e.email === memberEmail
-          );
-
-          const ownerEmail = session.data?.user.email;
-
-          if (
-            e.key === "Enter" &&
-            // no duplicate members
-            !checkIfMemberAlreadyExists &&
-            // member can't be empty
-            memberEmail.trim() !== "" &&
-            // member can't be the owner
-            memberEmail.trim() !== ownerEmail
-          ) {
-            // Lookup, get data/err, list ...
-            const user = await getPublicUserDataByEmail(memberEmail.trim());
-
-            if (user.email) {
-              const newMember = {
-                name: user.name,
-                email: user.email,
-                canCreate: false,
-                canUpdate: false,
-                canDelete: false,
-              };
-
-              setNewCollection({
-                ...newCollection,
-                members: [...newCollection.members, newMember],
-              });
-
-              setMemberEmail("");
-            }
-          }
-        }}
           type="text"
           placeholder="Email"
-        className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          className="w-full rounded-md p-3 pr-12 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
 
+        <div
+          onClick={() =>
+            addMemberToCollection(
+              session.data?.user.email as string,
+              memberEmail,
+              newCollection as unknown as ExtendedCollection,
+              setMemberState,
+              "ADD"
+            )
+          }
+          className="absolute flex items-center justify-center right-2 top-2 bottom-2 bg-sky-500 hover:bg-sky-400 duration-100 text-white w-9 rounded-md cursor-pointer"
+        >
+          <FontAwesomeIcon icon={faPlus} className="w-4 h-4" />
+        </div>
+      </div>
+
       {newCollection.members[0] ? (
-        <p className="text-center text-sky-500 text-xs sm:text-sm">
+        <p className="text-center text-gray-500 text-xs sm:text-sm">
-          (All Members will have <b>Read</b> access to this collection.)
+          (All Members have <b>Read</b> access to this collection.)
         </p>
       ) : null}
 
@@ -153,10 +142,18 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
                 });
               }}
             />
+            <div className="flex items-center gap-2">
+              <img
+                // @ts-ignore
+                src={`/api/avatar/${e.id}`}
+                className="h-10 w-10 rounded-full border border-sky-100"
+                alt=""
+              />
               <div>
                 <p className="text-sm font-bold text-sky-500">{e.name}</p>
                 <p className="text-sky-900">{e.email}</p>
               </div>
+            </div>
             <div className="flex sm:block items-center gap-5">
               <div>
                 <p className="font-bold text-sm text-gray-500">Permissions</p>

components/Modal/EditCollection.tsx

@@ -8,15 +8,16 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faClose,
   faPenToSquare,
+  faPlus,
   faTrashCan,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { ExtendedCollection } from "@/types/global";
 import { useSession } from "next-auth/react";
-import getPublicUserDataByEmail from "@/lib/client/getPublicUserDataByEmail";
 import Modal from "@/components/Modal";
 import DeleteCollection from "@/components/Modal/DeleteCollection";
 import RequiredBadge from "../RequiredBadge";
+import addMemberToCollection from "@/lib/client/addMemberToCollection";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -42,6 +43,15 @@ export default function EditCollection({
 
   const session = useSession();
 
+  const setMemberState = (newMember: any) => {
+    setActiveCollection({
+      ...activeCollection,
+      members: [...activeCollection.members, newMember],
+    });
+
+    setMemberEmail("");
+  };
+
   const submit = async () => {
     console.log(activeCollection);
 
@@ -93,59 +103,34 @@ export default function EditCollection({
       <hr className="border rounded my-2" />
 
       <p className="text-sm font-bold text-sky-300">Members</p>
+      <div className="relative">
         <input
           value={memberEmail}
           onChange={(e) => {
             setMemberEmail(e.target.value);
           }}
-        onKeyDown={async (e) => {
-          const checkIfMemberAlreadyExists = activeCollection.members.find(
-            (e) => e.user.email === memberEmail
-          );
-
-          const ownerEmail = session.data?.user.email;
-
-          if (
-            e.key === "Enter" &&
-            // no duplicate members
-            !checkIfMemberAlreadyExists &&
-            // member can't be empty
-            memberEmail.trim() !== "" &&
-            // member can't be the owner
-            memberEmail.trim() !== ownerEmail
-          ) {
-            // Lookup, get data/err, list ...
-            const user = await getPublicUserDataByEmail(memberEmail.trim());
-
-            if (user.email) {
-              const newMember = {
-                collectionId: activeCollection.id,
-                userId: user.id,
-                canCreate: false,
-                canUpdate: false,
-                canDelete: false,
-                user: {
-                  name: user.name,
-                  email: user.email,
-                },
-              };
-
-              setActiveCollection({
-                ...activeCollection,
-                members: [...activeCollection.members, newMember],
-              });
-
-              setMemberEmail("");
-            }
-          }
-        }}
           type="text"
           placeholder="Email"
-        className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          className="w-full rounded-md p-3 pr-12 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
 
+        <div
+          onClick={() =>
+            addMemberToCollection(
+              session.data?.user.email as string,
+              memberEmail,
+              activeCollection,
+              setMemberState,
+              "UPDATE"
+            )
+          }
+          className="absolute flex items-center justify-center right-2 top-2 bottom-2 bg-sky-500 hover:bg-sky-400 duration-100 text-white w-9 rounded-md cursor-pointer"
+        >
+          <FontAwesomeIcon icon={faPlus} className="w-4 h-4" />
+        </div>
+      </div>
       {activeCollection.members[0] ? (
-        <p className="text-center text-sky-500 text-xs sm:text-sm">
+        <p className="text-center text-gray-500 text-xs sm:text-sm">
           (All Members will have <b>Read</b> access to this collection.)
         </p>
       ) : null}
@@ -172,10 +157,18 @@ export default function EditCollection({
                 });
               }}
             />
+            <div className="flex items-center gap-2">
+              <img
+                // @ts-ignore
+                src={`/api/avatar/${e.userId}`}
+                className="h-10 w-10 rounded-full border border-sky-100"
+                alt=""
+              />
               <div>
                 <p className="text-sm font-bold text-sky-500">{e.user.name}</p>
                 <p className="text-sky-900">{e.user.email}</p>
               </div>
+            </div>
             <div className="flex sm:block items-center gap-5">
               <div>
                 <p className="font-bold text-sm text-gray-500">Permissions</p>

components/Modal/UserSettings.tsx

@@ -11,7 +11,6 @@ import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { useSession } from "next-auth/react";
 import { resizeImage } from "@/lib/client/resizeImage";
-import fileExists from "@/lib/client/fileExists";
 import Modal from ".";
 import ChangePassword from "./ChangePassword";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
@@ -26,7 +25,7 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
 
   const [user, setUser] = useState<AccountSettings>({
     ...account,
-    profilePic: null,
+    // profilePic: null,
   });
 
   const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState(
@@ -42,15 +41,15 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
     setUser({ ...user, oldPassword, newPassword });
   };
 
-  useEffect(() => {
+  // useEffect(() => {
-    const determineProfilePicSource = async () => {
+  //   const determineProfilePicSource = async () => {
-      const path = `/api/avatar/${account.id}`;
+  //     const path = `/api/avatar/${account.id}`;
-      const imageExists = await fileExists(path).catch((e) => console.log(e));
+  //     const imageExists = await avatarExists(path).catch((e) => console.log(e));
-      if (imageExists) setUser({ ...user, profilePic: path });
+  //     if (imageExists) setUser({ ...user, profilePic: path });
-    };
+  //   };
 
-    determineProfilePicSource();
+  //   determineProfilePicSource();
-  }, []);
+  // }, []);
 
   useEffect(() => {
     setUser({
@@ -99,12 +98,10 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
 
     await updateAccount({
       ...user,
-      profilePic:
-        user.profilePic === `/api/avatar/${account.id}`
-          ? null
-          : user.profilePic,
     });
 
+    console.log(account);
+
     setPasswordForm(undefined, undefined);
 
     if (user.email !== account.email || user.name !== account.name)

components/Navbar.tsx

@@ -55,40 +55,50 @@ export default function () {
 
   return (
     // lg:ml-64 xl:ml-80
-    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b">
+    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16">
       <div
         onClick={toggleSidebar}
-        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-1 text-sky-500 rounded-md hover:outline-sky-500 outline duration-100 bg-white outline-sky-100 outline-1"
+        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-sky-500 rounded-md hover:outline-sky-500 outline duration-100 bg-white outline-sky-100 outline-1"
       >
-        <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
+        <FontAwesomeIcon icon={faBars} className="w-6 h-6" />
       </div>
       <Search />
       <div className="flex items-center gap-2">
         <div
           onClick={toggleLinkModal}
-          title="New Link"
+          className="inline-flex gap-1 items-center font-semibold select-none cursor-pointer px-2 sm:px-3 py-2 text-sky-500 hover:text-sky-600 rounded-md hover:outline-sky-500 outline duration-100 bg-white outline-sky-100 outline-1"
-          className="inline-flex gap-1 items-center select-none cursor-pointer p-1 text-sky-500 rounded-md hover:outline-sky-500 outline duration-100 bg-white outline-sky-100 outline-1"
         >
-          <FontAwesomeIcon icon={faPlus} className="w-6 h-6" />
+          <FontAwesomeIcon icon={faPlus} className="w-6 h-6 sm:w-5 sm:h-5" />
+          <span className="hidden sm:block">New Link</span>
         </div>
 
         <div className="relative">
           <div
-            className="flex gap-2 items-center p-1 w-fit bg-white text-gray-600 cursor-pointer border border-sky-100 hover:border-sky-500 rounded-md duration-100"
+            className="flex gap-1 group items-center w-fit bg-white text-gray-600 cursor-pointer"
             onClick={() => setProfileDropdown(!profileDropdown)}
             id="profile-dropdown"
           >
+            {account.profilePic ? (
+              <img
+                src={account.profilePic}
+                className="h-10 w-10 pointer-events-none rounded-full border border-sky-100 group-hover:border-sky-500 duration-100"
+                alt=""
+              />
+            ) : (
               <FontAwesomeIcon
                 icon={faCircleUser}
-              className="h-6 w-6 pointer-events-none"
+                className="h-10 w-10 pointer-events-none group-hover:text-sky-600 duration-100"
               />
-            <div className="flex items-center gap-1 pointer-events-none">
+            )}
+            <div className="pointer-events-none hidden sm:block group-hover:text-sky-600 duration-100">
+              <div className="flex item-center gap-1">
                 <p className="font-bold leading-3 hidden sm:block">
                   {account.name}
                 </p>
                 <FontAwesomeIcon icon={faChevronDown} className="h-3 w-3" />
               </div>
             </div>
+          </div>
           {profileDropdown ? (
             <Dropdown
               items={[
@@ -113,7 +123,7 @@ export default function () {
                 const target = e.target as HTMLInputElement;
                 if (target.id !== "profile-dropdown") setProfileDropdown(false);
               }}
-              className="absolute top-9 right-0 z-20 w-36"
+              className="absolute top-11 right-0 z-20 w-36"
             />
           ) : null}
 

components/Search.tsx

@@ -35,12 +35,12 @@ export default function Search() {
 
   return (
     <div
-      className="flex items-center relative"
+      className="flex items-center relative group"
       onClick={() => setSearchBox(true)}
     >
       <label
         htmlFor="search-box"
-        className="inline-flex w-fit absolute right-0 pointer-events-none rounded-md p-1 text-sky-500"
+        className="inline-flex w-fit absolute right-2 pointer-events-none rounded-md p-1 text-sky-500 group-hover:text-sky-600"
       >
         <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
       </label>
@@ -55,7 +55,7 @@ export default function Search() {
           router.push("/search");
         }}
         autoFocus={searchBox}
-        className="border border-sky-100 rounded-md pr-6 w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-1"
+        className="border border-sky-100 rounded-md pr-10 w-44 sm:w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-2"
       />
     </div>
   );

lib/client/addMemberToCollection.ts

@@ -0,0 +1,55 @@
+import { ExtendedCollection, NewCollection } from "@/types/global";
+import getPublicUserDataByEmail from "./getPublicUserDataByEmail";
+
+const addMemberToCollection = async (
+  ownerEmail: string,
+  memberEmail: string,
+  collection: ExtendedCollection,
+  setMemberState: Function,
+  collectionMethod: "ADD" | "UPDATE"
+) => {
+  const checkIfMemberAlreadyExists = collection.members.find((e: any) => {
+    const email = collectionMethod === "ADD" ? e.email : e.user.email;
+    return email === memberEmail;
+  });
+
+  if (
+    // no duplicate members
+    !checkIfMemberAlreadyExists &&
+    // member can't be empty
+    memberEmail.trim() !== "" &&
+    // member can't be the owner
+    memberEmail.trim() !== ownerEmail
+  ) {
+    // Lookup, get data/err, list ...
+    const user = await getPublicUserDataByEmail(memberEmail.trim());
+
+    if (user.email) {
+      const newMember =
+        collectionMethod === "ADD"
+          ? {
+              id: user.id,
+              name: user.name,
+              email: user.email,
+              canCreate: false,
+              canUpdate: false,
+              canDelete: false,
+            }
+          : {
+              collectionId: collection.id,
+              userId: user.id,
+              canCreate: false,
+              canUpdate: false,
+              canDelete: false,
+              user: {
+                name: user.name,
+                email: user.email,
+              },
+            };
+
+      setMemberState(newMember);
+    }
+  }
+};
+
+export default addMemberToCollection;

lib/client/avatarExists.ts

@@ -0,0 +1,4 @@
+export default async function avatarExists(fileUrl: string): Promise<boolean> {
+  const response = await fetch(fileUrl, { method: "HEAD" });
+  return !(response.headers.get("content-type") === "text/plain");
+}

lib/client/fileExists.ts

@@ -1,9 +0,0 @@
-export default async function fileExists(fileUrl: string): Promise<boolean> {
-  try {
-    const response = await fetch(fileUrl, { method: "HEAD" });
-    return response.ok;
-  } catch (error) {
-    console.error("Error checking file existence:", error);
-    return false;
-  }
-}

pages/api/avatar/[id].ts

@@ -18,10 +18,16 @@ export default async function (req: NextApiRequest, res: NextApiResponse) {
   const queryId = Number(req.query.id);
 
   if (!queryId)
-    return res.status(401).json({ response: "Invalid parameters." });
+    return res
+      .setHeader("Content-Type", "text/plain")
+      .status(401)
+      .send("Invalid parameters.");
 
   if (!userId || !userEmail)
-    return res.status(401).json({ response: "You must be logged in." });
+    return res
+      .setHeader("Content-Type", "text/plain")
+      .status(401)
+      .send("You must be logged in.");
 
   if (userId !== queryId) {
     const targetUser = await prisma.user.findUnique({
@@ -34,7 +40,10 @@ export default async function (req: NextApiRequest, res: NextApiResponse) {
       targetUser?.isPrivate &&
       !targetUser.whitelistedUsers.includes(userEmail)
     ) {
-      return res.status(401).json({ response: "This profile is private." });
+      return res
+        .setHeader("Content-Type", "text/plain")
+        .status(401)
+        .send("This profile is private.");
     }
   }
 
@@ -48,9 +57,8 @@ export default async function (req: NextApiRequest, res: NextApiResponse) {
     ? fs.readFileSync(filePath)
     : "File not found.";
 
-  if (!fs.existsSync(filePath))
+  if (!fs.existsSync(filePath)) res.setHeader("Content-Type", "text/plain");
-    res.setHeader("Content-Type", "text/plain").status(404);
+  else res.setHeader("Content-Type", "image/jpeg");
-  else res.setHeader("Content-Type", "image/jpeg").status(200);
 
   return res.send(file);
 }

store/account.ts

@@ -6,23 +6,33 @@
 import { create } from "zustand";
 import { User } from "@prisma/client";
 import { AccountSettings } from "@/types/global";
+import avatarExists from "@/lib/client/avatarExists";
 
 type AccountStore = {
-  account: User;
+  account: AccountSettings;
   setAccount: (email: string) => void;
   updateAccount: (user: AccountSettings) => Promise<boolean>;
 };
 
+const determineProfilePicSource = async (data: any) => {
+  const path = `/api/avatar/${data.response.id}`;
+  const imageExists = await avatarExists(path);
+  if (imageExists) return path + "?" + Date.now();
+  else return null;
+};
+
 const useAccountStore = create<AccountStore>()((set) => ({
-  account: {} as User,
+  account: {} as AccountSettings,
   setAccount: async (email) => {
     const response = await fetch(`/api/routes/users?email=${email}`);
 
     const data = await response.json();
 
-    console.log(data);
+    const profilePic = await determineProfilePicSource(data);
 
-    if (response.ok) set({ account: { ...data.response } });
+    console.log({ ...data.response, profilePic });
+
+    if (response.ok) set({ account: { ...data.response, profilePic } });
   },
   updateAccount: async (user) => {
     const response = await fetch("/api/routes/users", {
@@ -37,7 +47,9 @@ const useAccountStore = create<AccountStore>()((set) => ({
 
     console.log(data);
 
-    if (response.ok) set({ account: data.response });
+    const profilePic = await determineProfilePicSource(data);
+
+    if (response.ok) set({ account: { ...data.response, profilePic } });
 
     return response.ok;
   },

store/localSettings.ts

@@ -0,0 +1,28 @@
+// Copyright (C) 2022-present Daniel31x13 <daniel31x13@gmail.com>
+// This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.
+// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { create } from "zustand";
+
+type LocalSettings = {
+  darkMode: boolean;
+};
+
+type LocalSettingsStore = {
+  settings: LocalSettings;
+  updateSettings: (settings: LocalSettings) => void;
+};
+
+const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
+  settings: {
+    darkMode: false,
+  },
+  updateSettings: async (newSettings) => {
+    set((state) => ({ settings: { ...state.settings, ...newSettings } }));
+  },
+}));
+
+export default useLocalSettingsStore;
+
+// TODO: Add Dark mode.