custom preview initial commit

components/Drawer.tsx

@@ -40,7 +40,7 @@ export default function Drawer({
           <ClickAwayHandler
             onClickOutside={() => dismissible && setDrawerIsOpen(false)}
           >
-            <D.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%]">
+            <D.Content className="flex flex-col rounded-t-2xl mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%]">
               <div
                 className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
                 data-testid="mobile-modal-container"

components/Modal.tsx

@@ -40,7 +40,7 @@ export default function Modal({
           <ClickAwayHandler
             onClickOutside={() => dismissible && setDrawerIsOpen(false)}
           >
-            <Drawer.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30">
+            <Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
               <div
                 className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
                 data-testid="mobile-modal-container"

components/ModalContent/EditCollectionModal.tsx

@@ -97,7 +97,7 @@ export default function EditCollectionModal({
           <div className="w-full">
             <p className="mb-2">{t("description")}</p>
             <textarea
-              className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+              className="w-full h-32 resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
               placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>

components/ModalContent/EditLinkModal.tsx

@@ -3,7 +3,10 @@ import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
 import Link from "next/link";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
@@ -11,6 +14,8 @@ import { useUpdateLink } from "@/hooks/store/links";
 import toast from "react-hot-toast";
 import IconPicker from "../IconPicker";
 import { IconWeight } from "@phosphor-icons/react";
+import Image from "next/image";
+import { previewAvailable } from "@/lib/shared/getArchiveValidity";
 
 type Props = {
   onClose: Function;
@@ -137,31 +142,56 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
                 setLink({ ...link, description: e.target.value })
               }
               placeholder={t("link_description_placeholder")}
-              className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+              className="resize-none w-full rounded-md p-2 h-32 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
             />
           </div>
 
           <div>
-            <IconPicker
-              hideDefaultIcon
-              color={link.color || "#0ea5e9"}
-              setColor={(color: string) => setLink({ ...link, color })}
-              weight={(link.iconWeight || "regular") as IconWeight}
-              setWeight={(iconWeight: string) =>
-                setLink({ ...link, iconWeight })
-              }
-              iconName={link.icon as string}
-              setIconName={(icon: string) => setLink({ ...link, icon })}
-              reset={() =>
-                setLink({
-                  ...link,
-                  color: "",
-                  icon: "",
-                  iconWeight: "",
-                })
-              }
-              alignment="-top-10 translate-x-20"
-            />
+            <p className="mb-2">{t("icon_and_preview")}</p>
+            <div className="flex gap-3">
+              <IconPicker
+                hideDefaultIcon
+                color={link.color || "#0ea5e9"}
+                setColor={(color: string) => setLink({ ...link, color })}
+                weight={(link.iconWeight || "regular") as IconWeight}
+                setWeight={(iconWeight: string) =>
+                  setLink({ ...link, iconWeight })
+                }
+                iconName={link.icon as string}
+                setIconName={(icon: string) => setLink({ ...link, icon })}
+                reset={() =>
+                  setLink({
+                    ...link,
+                    color: "",
+                    icon: "",
+                    iconWeight: "",
+                  })
+                }
+                alignment="-top-10 translate-x-20"
+              />
+
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className="object-cover h-20 w-32 rounded-lg opacity-80"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              ) : link.preview === "unavailable" ? (
+                <div className="bg-gray-50 duration-100 h-20 w-32 bg-opacity-80 rounded-lg flex flex-col justify-center">
+                  <p className="text-black text-sm text-center">
+                    {t("preview_unavailable")}
+                  </p>
+                </div>
+              ) : (
+                <div className="duration-100 h-20 w-32 bg-opacity-80 skeleton rounded-lg"></div>
+              )}
+            </div>
           </div>
         </div>
       </div>

components/ModalContent/NewCollectionModal.tsx

@@ -113,7 +113,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
           <div className="w-full">
             <p className="mb-2">{t("description")}</p>
             <textarea
-              className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+              className="w-full h-32 resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
               placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>

components/ModalContent/NewLinkModal.tsx

@@ -169,7 +169,7 @@ export default function NewLinkModal({ onClose }: Props) {
                     setLink({ ...link, description: e.target.value })
                   }
                   placeholder={t("link_description_placeholder")}
-                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
+                  className="resize-none w-full h-32 rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
                 />
               </div>
             </div>

components/ModalContent/UploadFileModal.tsx

@@ -207,7 +207,7 @@ export default function UploadFileModal({ onClose }: Props) {
                   setLink({ ...link, description: e.target.value })
                 }
                 placeholder={t("description_placeholder")}
-                className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+                className="resize-none w-full h-32 rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
               />
             </div>
           </div>

public/locales/en/common.json

@@ -385,5 +385,7 @@
   "show": "Show",
   "image": "Image",
   "icon": "Icon",
-  "date": "Date"
+  "date": "Date",
+  "preview_unavailable": "Preview Unavailable",
+  "icon_and_preview": "Icon & Preview"
 }