format

components/InputSelect/CollectionSelection.tsx

@@ -8,11 +8,11 @@ import CreatableSelect from "react-select/creatable";
 type Props = {
   onChange: any;
   defaultValue?:
-  | {
-    label: string;
-    value?: number;
-  }
-  | undefined;
+    | {
+        label: string;
+        value?: number;
+      }
+    | undefined;
 };
 
 export default function CollectionSelection({ onChange, defaultValue }: Props) {
@@ -51,7 +51,7 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
       options={options}
       styles={styles}
       defaultValue={defaultValue}
-    // menuPosition="fixed"
+      // menuPosition="fixed"
     />
   );
 }

components/LinkViews/Layouts/ListView.tsx

@@ -3,7 +3,7 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 
 export default function ListView({
   links,
-  showCheckbox = true
+  showCheckbox = true,
 }: {
   links: LinkIncludingShortenedCollectionAndTags[];
   showCheckbox?: boolean;

components/LinkViews/LinkCard.tsx

@@ -37,7 +37,9 @@ export default function LinkCard({
 
   const { links, getLink, setSelectedLinks, selectedLinks } = useLinkStore();
 
-  const handleCheckboxClick = (link: LinkIncludingShortenedCollectionAndTags) => {
+  const handleCheckboxClick = (
+    link: LinkIncludingShortenedCollectionAndTags
+  ) => {
     if (selectedLinks.includes(link)) {
       setSelectedLinks(selectedLinks.filter((e) => e !== link));
     } else {
@@ -99,14 +101,17 @@ export default function LinkCard({
       ref={ref}
       className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
     >
-      {showCheckbox && (permissions === true || permissions?.canCreate || permissions?.canDelete) &&
-        <input
-          type="checkbox"
-          className="checkbox checkbox-primary my-auto ml-3 mt-3 absolute z-20 bg-white dark:bg-base-200"
-          checked={selectedLinks.includes(link)}
-          onChange={() => handleCheckboxClick(link)}
-        />
-      }
+      {showCheckbox &&
+        (permissions === true ||
+          permissions?.canCreate ||
+          permissions?.canDelete) && (
+          <input
+            type="checkbox"
+            className="checkbox checkbox-primary my-auto ml-3 mt-3 absolute z-20 bg-white dark:bg-base-200"
+            checked={selectedLinks.includes(link)}
+            onChange={() => handleCheckboxClick(link)}
+          />
+        )}
       <Link
         href={generateLinkHref(link, account)}
         target="_blank"

components/LinkViews/LinkGrid.tsx

@@ -101,7 +101,7 @@ export default function LinkGrid({ link }: Props) {
       </div>
 
       <LinkActions
-        toggleShowInfo={() => { }}
+        toggleShowInfo={() => {}}
         linkInfo={false}
         link={link}
         collection={collection}

components/LinkViews/LinkList.tsx

@@ -33,7 +33,9 @@ export default function LinkCardCompact({
   const { account } = useAccountStore();
   const { links, setSelectedLinks, selectedLinks } = useLinkStore();
 
-  const handleCheckboxClick = (link: LinkIncludingShortenedCollectionAndTags) => {
+  const handleCheckboxClick = (
+    link: LinkIncludingShortenedCollectionAndTags
+  ) => {
     if (selectedLinks.includes(link)) {
       setSelectedLinks(selectedLinks.filter((e) => e !== link));
     } else {
@@ -71,17 +73,21 @@ export default function LinkCardCompact({
   return (
     <>
       <div
-        className={`border-neutral-content relative items-center flex ${!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
-          } duration-200 rounded-lg`}
+        className={`border-neutral-content relative items-center flex ${
+          !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
+        } duration-200 rounded-lg`}
       >
-        {showCheckbox && (permissions === true || permissions?.canCreate || permissions?.canDelete) &&
-          <input
-            type="checkbox"
-            className="checkbox checkbox-primary my-auto mr-2"
-            checked={selectedLinks.includes(link)}
-            onChange={() => handleCheckboxClick(link)}
-          />
-        }
+        {showCheckbox &&
+          (permissions === true ||
+            permissions?.canCreate ||
+            permissions?.canDelete) && (
+            <input
+              type="checkbox"
+              className="checkbox checkbox-primary my-auto mr-2"
+              checked={selectedLinks.includes(link)}
+              onChange={() => handleCheckboxClick(link)}
+            />
+          )}
         <Link
           href={generateLinkHref(link, account)}
           target="_blank"
@@ -122,8 +128,8 @@ export default function LinkCardCompact({
           collection={collection}
           position="top-3 right-3"
           flipDropdown={flipDropdown}
-        // toggleShowInfo={() => setShowInfo(!showInfo)}
-        // linkInfo={showInfo}
+          // toggleShowInfo={() => setShowInfo(!showInfo)}
+          // linkInfo={showInfo}
         />
         {showInfo ? (
           <div>

components/ModalContent/BulkDeleteLinksModal.tsx

@@ -4,62 +4,71 @@ import toast from "react-hot-toast";
 import Modal from "../Modal";
 
 type Props = {
-	onClose: Function;
+  onClose: Function;
 };
 
 export default function BulkDeleteLinksModal({ onClose }: Props) {
-	const { selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
+  const { selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
 
-	const deleteLink = async () => {
-		const load = toast.loading(`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""}...`);
+  const deleteLink = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${
+        selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
 
-		const response = await deleteLinksById(selectedLinks.map(link => link.id as number));
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
 
-		toast.dismiss(load);
+    toast.dismiss(load);
 
-		response.ok && toast.success(`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""}`);
+    response.ok &&
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${
+          selectedLinks.length > 1 ? "s" : ""
+        }`
+      );
 
-		setSelectedLinks([]);
-		onClose();
-	};
+    setSelectedLinks([]);
+    onClose();
+  };
 
-	return (
-		<Modal toggleModal={onClose}>
-			<p className="text-xl font-thin text-red-500">Delete {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}</p>
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin text-red-500">
+        Delete {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
+      </p>
 
-			<div className="divider mb-3 mt-1"></div>
+      <div className="divider mb-3 mt-1"></div>
 
-			<div className="flex flex-col gap-3">
-				{selectedLinks.length > 1 ? (
-					<p>
-						Are you sure you want to delete {selectedLinks.length} links?
-					</p>
-				) : (
-					<p>
-						Are you sure you want to delete this link?
-					</p>
-				)}
+      <div className="flex flex-col gap-3">
+        {selectedLinks.length > 1 ? (
+          <p>Are you sure you want to delete {selectedLinks.length} links?</p>
+        ) : (
+          <p>Are you sure you want to delete this link?</p>
+        )}
 
-				<div role="alert" className="alert alert-warning">
-					<i className="bi-exclamation-triangle text-xl" />
-					<span>
-						<b>Warning:</b> This action is irreversible!
-					</span>
-				</div>
+        <div role="alert" className="alert alert-warning">
+          <i className="bi-exclamation-triangle text-xl" />
+          <span>
+            <b>Warning:</b> This action is irreversible!
+          </span>
+        </div>
 
-				<p>
-					Hold the <kbd className="kbd kbd-sm">Shift</kbd> key while clicking
-					&apos;Delete&apos; to bypass this confirmation in the future.
-				</p>
+        <p>
+          Hold the <kbd className="kbd kbd-sm">Shift</kbd> key while clicking
+          &apos;Delete&apos; to bypass this confirmation in the future.
+        </p>
 
-				<button
-					className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
-					onClick={deleteLink}
-				>
-					<i className="bi-trash text-xl" />
-					Delete
-				</button>
-			</div>
-		</Modal>
-	);
+        <button
+          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
+          onClick={deleteLink}
+        >
+          <i className="bi-trash text-xl" />
+          Delete
+        </button>
+      </div>
+    </Modal>
+  );
 }

components/ModalContent/BulkEditLinksModal.tsx

@@ -7,72 +7,74 @@ import toast from "react-hot-toast";
 import Modal from "../Modal";
 
 type Props = {
-	onClose: Function;
+  onClose: Function;
 };
 
 export default function BulkEditLinksModal({ onClose }: Props) {
-	const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore();
-	const [submitLoader, setSubmitLoader] = useState(false);
-	const [updatedValues, setUpdatedValues] = useState<Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">>({ tags: [] });
+  const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore();
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const [updatedValues, setUpdatedValues] = useState<
+    Pick<LinkIncludingShortenedCollectionAndTags, "tags" | "collectionId">
+  >({ tags: [] });
 
-	const setCollection = (e: any) => {
-		const collectionId = e?.value || null;
-		setUpdatedValues((prevValues) => ({ ...prevValues, collectionId }));
-	};
+  const setCollection = (e: any) => {
+    const collectionId = e?.value || null;
+    setUpdatedValues((prevValues) => ({ ...prevValues, collectionId }));
+  };
 
-	const setTags = (e: any) => {
-		const tags = e.map((tag: any) => ({ name: tag.label }));
-		setUpdatedValues((prevValues) => ({ ...prevValues, tags }));
-	};
+  const setTags = (e: any) => {
+    const tags = e.map((tag: any) => ({ name: tag.label }));
+    setUpdatedValues((prevValues) => ({ ...prevValues, tags }));
+  };
 
-	const submit = async () => {
-		if (!submitLoader) {
-			setSubmitLoader(true);
+  const submit = async () => {
+    if (!submitLoader) {
+      setSubmitLoader(true);
 
-			const load = toast.loading("Updating...");
+      const load = toast.loading("Updating...");
 
-			const response = await updateLinks(selectedLinks, updatedValues);
+      const response = await updateLinks(selectedLinks, updatedValues);
 
-			toast.dismiss(load);
+      toast.dismiss(load);
 
-			if (response.ok) {
-				toast.success(`Updated!`);
-				onClose();
-			} else toast.error(response.data as string);
+      if (response.ok) {
+        toast.success(`Updated!`);
+        onClose();
+      } else toast.error(response.data as string);
 
-			setSelectedLinks([]);
-			setSubmitLoader(false);
-			onClose();
-			return response;
-		}
-	};
+      setSelectedLinks([]);
+      setSubmitLoader(false);
+      onClose();
+      return response;
+    }
+  };
 
-	return (
-		<Modal toggleModal={onClose}>
-			<p className="text-xl font-thin">Edit Link</p>
-			<div className="divider mb-3 mt-1"></div>
-			<div className="mt-5">
-				<div className="grid sm:grid-cols-2 gap-3">
-					<div>
-						<p className="mb-2">Collection</p>
-						<CollectionSelection onChange={setCollection} />
-					</div>
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin">Edit Link</p>
+      <div className="divider mb-3 mt-1"></div>
+      <div className="mt-5">
+        <div className="grid sm:grid-cols-2 gap-3">
+          <div>
+            <p className="mb-2">Collection</p>
+            <CollectionSelection onChange={setCollection} />
+          </div>
 
-					<div>
-						<p className="mb-2">Tags</p>
-						<TagSelection onChange={setTags} />
-					</div>
-				</div>
-			</div>
+          <div>
+            <p className="mb-2">Tags</p>
+            <TagSelection onChange={setTags} />
+          </div>
+        </div>
+      </div>
 
-			<div className="flex justify-end items-center mt-5">
-				<button
-					className="btn btn-accent dark:border-violet-400 text-white"
-					onClick={submit}
-				>
-					Save Changes
-				</button>
-			</div>
-		</Modal>
-	);
+      <div className="flex justify-end items-center mt-5">
+        <button
+          className="btn btn-accent dark:border-violet-400 text-white"
+          onClick={submit}
+        >
+          Save Changes
+        </button>
+      </div>
+    </Modal>
+  );
 }

components/ModalContent/NewLinkModal.tsx

@@ -197,8 +197,9 @@ export default function NewLinkModal({ onClose }: Props) {
             {optionsExpanded ? "Hide" : "More"} Options
           </p>
           <i
-            className={`${optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
-              }`}
+            className={`${
+              optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
+            }`}
           ></i>
         </div>