bug fix + ux improvements

components/InputSelect/CollectionSelection.tsx

@@ -47,7 +47,6 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
       isClearable
       className="react-select-container"
       classNamePrefix="react-select"
-      placeholder="Default: Unnamed Collection"
       onChange={onChange}
       options={options}
       styles={styles}

components/Modal/Link/AddOrEditLink.tsx

@@ -7,12 +7,13 @@ import useLinkStore from "@/store/links";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import RequiredBadge from "../../RequiredBadge";
 import { useSession } from "next-auth/react";
-import useCollectionStore from "@/store/collections";
+// import useCollectionStore from "@/store/collections";
-import { useRouter } from "next/router";
+// import { useRouter } from "next/router";
 import SubmitButton from "../../SubmitButton";
 import { toast } from "react-hot-toast";
 import Link from "next/link";
 import TextInput from "@/components/TextInput";
+import unescapeString from "@/lib/client/unescapeString";
 
 type Props =
   | {
@@ -33,6 +34,10 @@ export default function AddOrEditLink({
 }: Props) {
   const [submitLoader, setSubmitLoader] = useState(false);
 
+  const [optionsExpanded, setOptionsExpanded] = useState(
+    method === "UPDATE" ? true : false
+  );
+
   const { data } = useSession();
 
   const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>(
@@ -50,27 +55,27 @@ export default function AddOrEditLink({
 
   const { updateLink, addLink } = useLinkStore();
 
-  const router = useRouter();
+  // const router = useRouter();
 
-  const { collections } = useCollectionStore();
+  // const { collections } = useCollectionStore();
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (router.query.id) {
+  //   if (router.query.id) {
-      const currentCollection = collections.find(
+  //     const currentCollection = collections.find(
-        (e) => e.id == Number(router.query.id)
+  //       (e) => e.id == Number(router.query.id)
-      );
+  //     );
 
-      if (currentCollection && currentCollection.ownerId)
+  //     if (currentCollection && currentCollection.ownerId)
-        setLink({
+  //       setLink({
-          ...link,
+  //         ...link,
-          collection: {
+  //         collection: {
-            id: currentCollection.id,
+  //           id: currentCollection.id,
-            name: currentCollection.name,
+  //           name: currentCollection.name,
-            ownerId: currentCollection.ownerId,
+  //           ownerId: currentCollection.ownerId,
-          },
+  //         },
-        });
+  //       });
-    }
+  //   }
-  }, []);
+  // }, []);
 
   const setTags = (e: any) => {
     const tagNames = e.map((e: any) => {
@@ -116,7 +121,7 @@ export default function AddOrEditLink({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {method === "UPDATE" ? (
         <p
-          className="text-gray-500 dark:text-gray-300 my-2 text-center truncate w-full"
+          className="text-gray-500 dark:text-gray-300 text-center truncate w-full"
           title={link.url}
         >
           <Link href={link.url} target="_blank" className="font-bold">
@@ -126,80 +131,128 @@ export default function AddOrEditLink({
       ) : null}
 
       {method === "CREATE" ? (
-        <div>
+        <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
-          <p className="text-sm text-black dark:text-white mb-2 font-bold">
+          <div className="sm:col-span-3 col-span-5">
-            Address (URL)
+            <p className="text-sm text-black dark:text-white mb-2 font-bold">
-            <RequiredBadge />
+              Address (URL)
-          </p>
+              <RequiredBadge />
-          <TextInput
+            </p>
-            value={link.url}
+            <TextInput
-            onChange={(e) => setLink({ ...link, url: e.target.value })}
+              value={link.url}
-            placeholder="e.g. http://example.com/"
+              onChange={(e) => setLink({ ...link, url: e.target.value })}
-          />
+              placeholder="e.g. http://example.com/"
+            />
+          </div>
+          <div className="sm:col-span-2 col-span-5">
+            <p className="text-sm text-black dark:text-white mb-2">
+              Collection
+            </p>
+            <CollectionSelection
+              onChange={setCollection}
+              // defaultValue={{
+              //   label: link.collection.name,
+              //   value: link.collection.id,
+              // }}
+              defaultValue={
+                link.collection.id
+                  ? {
+                      value: link.collection.id,
+                      label: link.collection.name,
+                    }
+                  : {
+                      value: null as unknown as number,
+                      label: "Unorganized",
+                    }
+              }
+            />
+          </div>
         </div>
       ) : null}
-      <hr className="dark:border-neutral-700" />
+
-      <div className="grid sm:grid-cols-2 gap-3">
+      {optionsExpanded ? (
         <div>
-          <p className="text-sm text-black dark:text-white mb-2">Collection</p>
+          <hr className="mb-3 border border-sky-100 dark:border-neutral-700" />
-          <CollectionSelection
+          <div className="grid sm:grid-cols-2 gap-3">
-            onChange={setCollection}
+            <div className={`${method === "UPDATE" ? "sm:col-span-2" : ""}`}>
-            // defaultValue={{
+              <p className="text-sm text-black dark:text-white mb-2">Name</p>
-            //   label: link.collection.name,
+              <TextInput
-            //   value: link.collection.id,
+                value={link.name}
-            // }}
+                onChange={(e) => setLink({ ...link, name: e.target.value })}
-            defaultValue={
+                placeholder="e.g. Example Link"
-              link.collection.name && link.collection.id
+              />
-                ? {
+            </div>
-                    value: link.collection.id,
+
-                    label: link.collection.name,
+            {method === "UPDATE" ? (
+              <div>
+                <p className="text-sm text-black dark:text-white mb-2">
+                  Collection
+                </p>
+                <CollectionSelection
+                  onChange={setCollection}
+                  defaultValue={
+                    link.collection.name && link.collection.id
+                      ? {
+                          value: link.collection.id,
+                          label: link.collection.name,
+                        }
+                      : {
+                          value: null as unknown as number,
+                          label: "Unorganized",
+                        }
                   }
-                : undefined
+                />
-            }
+              </div>
-          />
+            ) : undefined}
+
+            <div>
+              <p className="text-sm text-black dark:text-white mb-2">Tags</p>
+              <TagSelection
+                onChange={setTags}
+                defaultValue={link.tags.map((e) => {
+                  return { label: e.name, value: e.id };
+                })}
+              />
+            </div>
+
+            <div className="sm:col-span-2">
+              <p className="text-sm text-black dark:text-white mb-2">
+                Description
+              </p>
+              <textarea
+                value={unescapeString(link.description) as string}
+                onChange={(e) =>
+                  setLink({ ...link, description: e.target.value })
+                }
+                placeholder={
+                  method === "CREATE"
+                    ? "Will be auto generated if nothing is provided."
+                    : ""
+                }
+                className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
+              />
+            </div>
+          </div>
+        </div>
+      ) : undefined}
+
+      <div className="flex justify-between items-center mt-2">
+        <div
+          onClick={() => setOptionsExpanded(!optionsExpanded)}
+          className={`${
+            method === "UPDATE" ? "hidden" : ""
+          } rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-1 px-2 w-fit text-sm`}
+        >
+          {optionsExpanded ? "Hide" : "More"} Options
         </div>
 
-        <div>
+        <SubmitButton
-          <p className="text-sm text-black dark:text-white mb-2">Tags</p>
+          onClick={submit}
-          <TagSelection
+          label={method === "CREATE" ? "Add" : "Save"}
-            onChange={setTags}
+          icon={method === "CREATE" ? faPlus : faPenToSquare}
-            defaultValue={link.tags.map((e) => {
+          loading={submitLoader}
-              return { label: e.name, value: e.id };
+          className={`${method === "CREATE" ? "" : "mx-auto"}`}
-            })}
+        />
-          />
-        </div>
-
-        <div className="sm:col-span-2">
-          <p className="text-sm text-black dark:text-white mb-2">Name</p>
-          <TextInput
-            value={link.name}
-            onChange={(e) => setLink({ ...link, name: e.target.value })}
-            placeholder="e.g. Example Link"
-          />
-        </div>
-
-        <div className="sm:col-span-2">
-          <p className="text-sm text-black dark:text-white mb-2">Description</p>
-          <textarea
-            value={link.description}
-            onChange={(e) => setLink({ ...link, description: e.target.value })}
-            placeholder={
-              method === "CREATE"
-                ? "Will be auto generated if nothing is provided."
-                : ""
-            }
-            className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
-          />
-        </div>
       </div>
-
-      <SubmitButton
-        onClick={submit}
-        label={method === "CREATE" ? "Add" : "Save"}
-        icon={method === "CREATE" ? faPlus : faPenToSquare}
-        loading={submitLoader}
-        className={`mx-auto mt-2`}
-      />
     </div>
   );
 }

components/Modal/Link/LinkDetails.tsx

@@ -21,12 +21,14 @@ import {
 } from "@fortawesome/free-regular-svg-icons";
 import isValidUrl from "@/lib/client/isValidUrl";
 import { useTheme } from "next-themes";
+import unescapeString from "@/lib/client/unescapeString";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
+  isOwnerOrMod: boolean;
 };
 
-export default function LinkDetails({ link }: Props) {
+export default function LinkDetails({ link, isOwnerOrMod }: Props) {
   const { theme, setTheme } = useTheme();
 
   const [imageError, setImageError] = useState<boolean>(false);
@@ -123,7 +125,9 @@ export default function LinkDetails({ link }: Props) {
   return (
     <div
       id="link-banner-outside"
-      className="flex flex-col gap-3 sm:w-[35rem] w-80"
+      className={`flex flex-col gap-3 sm:w-[35rem] w-80 ${
+        isOwnerOrMod ? "" : "mt-12"
+      }`}
     >
       {!imageError && (
         <div id="link-banner" className="link-banner h-32 -mx-5 -mt-5 relative">
@@ -140,7 +144,7 @@ export default function LinkDetails({ link }: Props) {
             height={42}
             alt=""
             id={"favicon-" + link.id}
-            className="select-none mt-2 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
+            className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
             draggable="false"
             onLoad={(e) => {
               try {
@@ -159,15 +163,17 @@ export default function LinkDetails({ link }: Props) {
             }}
           />
         )}
-        <div className="flex flex-col min-h-[3rem] justify-end drop-shadow">
+        <div className="flex w-full flex-col min-h-[3rem] justify-center drop-shadow">
           <p className="text-2xl text-black dark:text-white capitalize break-words hyphens-auto">
-            {link.name}
+            {unescapeString(link.name)}
           </p>
           <Link
             href={link.url}
             target="_blank"
             rel="noreferrer"
-            className="text-sm text-gray-500 dark:text-gray-300 break-all hover:underline cursor-pointer w-fit"
+            className={`${
+              link.name ? "text-sm" : "text-xl"
+            } text-gray-500 dark:text-gray-300 break-all hover:underline cursor-pointer w-fit`}
           >
             {url ? url.host : link.url}
           </Link>
@@ -204,7 +210,7 @@ export default function LinkDetails({ link }: Props) {
       {link.description && (
         <>
           <div className="text-black dark:text-white max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
-            {link.description}
+            {unescapeString(link.description)}
           </div>
         </>
       )}

components/Modal/Link/index.tsx

@@ -37,11 +37,7 @@ export default function LinkModal({
             New Link
           </p>
         )}
-        <Tab.List
+        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
-          className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white ${
-            isOwnerOrMod ? "" : "pb-8"
-          }`}
-        >
           {method === "UPDATE" && isOwnerOrMod && (
             <>
               <Tab
@@ -68,7 +64,7 @@ export default function LinkModal({
         <Tab.Panels>
           {activeLink && method === "UPDATE" && (
             <Tab.Panel>
-              <LinkDetails link={activeLink} />
+              <LinkDetails link={activeLink} isOwnerOrMod={isOwnerOrMod} />
             </Tab.Panel>
           )}
 

lib/api/controllers/links/postLink.ts

@@ -21,7 +21,7 @@ export default async function postLink(
   }
 
   if (!link.collection.name) {
-    link.collection.name = "Unnamed Collection";
+    link.collection.name = "Unorganized";
   }
 
   link.collection.name = link.collection.name.trim();

lib/api/controllers/links/updateLink.ts

@@ -35,8 +35,13 @@ export default async function updateLink(
     link.collection.ownerId === userId &&
     targetLink?.collection.ownerId === userId;
 
+  const authorizedSwitchCollection =
+    !isCollectionOwner && targetLink?.collection.id === link.collection.id;
+
+  console.log(authorizedSwitchCollection);
+
   // Makes sure collection members (non-owners) cannot move a link to/from a collection.
-  if (!isCollectionOwner)
+  if (!authorizedSwitchCollection)
     return {
       response: "You can't move a link to/from a collection you don't own.",
       status: 401,

lib/api/storage/readFile.ts

@@ -125,7 +125,7 @@ const fileNotFoundTemplate = `<!DOCTYPE html>
                                 <h2>It is possible that the file you're looking for either doesn't exist or hasn't been created yet.</h2>
                                 <h3>Some possible reasons are:</h3>
                                 <ul>
-                                  <li>You are trying to access a file too early, before it has been fully archived.</li>
+                                  <li>You are trying to access a file too early, before it has been fully archived. In this case, refreshing the page might resolve the issue.</li>
                                   <li>The file doesn't exist either because it encountered an error while being archived, or it simply doesn't exist.</li>
                                 </ul>
                               </body>

lib/client/unescapeString.ts

@@ -0,0 +1,4 @@
+export default function htmlDecode(input: string) {
+  var doc = new DOMParser().parseFromString(input, "text/html");
+  return doc.documentElement.textContent;
+}