Merge branch 'dev' of https://github.com/linkwarden/linkwarden into feat/single-file

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -11,6 +11,7 @@ import useLinkStore from "@/store/links";
 import { toast } from "react-hot-toast";
 import useAccountStore from "@/store/account";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -18,6 +19,7 @@ type Props = {
   position?: string;
   toggleShowInfo?: () => void;
   linkInfo?: boolean;
+  alignToTop?: boolean;
   flipDropdown?: boolean;
 };
 
@@ -26,8 +28,11 @@ export default function LinkActions({
   toggleShowInfo,
   position,
   linkInfo,
+  alignToTop,
   flipDropdown,
 }: Props) {
+  const { t } = useTranslation();
+
   const permissions = usePermissions(link.collection.id as number);
 
   const [editLinkModal, setEditLinkModal] = useState(false);
@@ -41,7 +46,7 @@ export default function LinkActions({
   const pinLink = async () => {
     const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
 
-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying"));
 
     const response = await updateLink({
       ...link,
@@ -51,25 +56,25 @@ export default function LinkActions({
     toast.dismiss(load);
 
     response.ok &&
-      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
+      toast.success(isAlreadyPinned ? t("link_unpinned") : t("link_unpinned"));
   };
 
   const deleteLink = async () => {
-    const load = toast.loading("Deleting...");
+    const load = toast.loading(t("deleting"));
 
     const response = await removeLink(link.id as number);
 
     toast.dismiss(load);
 
-    response.ok && toast.success(`Link Deleted.`);
+    response.ok && toast.success(t("deleted"));
   };
 
   return (
     <>
       <div
-        className={`dropdown dropdown-left dropdown-end absolute ${
+        className={`dropdown dropdown-left absolute ${
           position || "top-3 right-3"
-        } z-20`}
+        } ${alignToTop ? "" : "dropdown-end"} z-20`}
       >
         <div
           tabIndex={0}
@@ -79,7 +84,11 @@ export default function LinkActions({
         >
           <i title="More" className="bi-three-dots text-xl" />
         </div>
-        <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 translate-y-10">
+        <ul
+          className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 ${
+            alignToTop ? "" : "translate-y-10"
+          }`}
+        >
           <li>
             <div
               role="button"
@@ -90,8 +99,8 @@ export default function LinkActions({
               }}
             >
               {link?.pinnedBy && link.pinnedBy[0]
-                ? "Unpin"
-                : "Pin to Dashboard"}
+                ? t("unpin")
+                : t("pin_to_dashboard")}
             </div>
           </li>
           {linkInfo !== undefined && toggleShowInfo ? (
@@ -104,7 +113,7 @@ export default function LinkActions({
                   toggleShowInfo();
                 }}
               >
-                {!linkInfo ? "Show" : "Hide"} Link Details
+                {!linkInfo ? t("show_link_details") : t("hide_link_details")}
               </div>
             </li>
           ) : undefined}
@@ -118,22 +127,24 @@ export default function LinkActions({
                   setEditLinkModal(true);
                 }}
               >
-                Edit Link
+                {t("edit_link")}
               </div>
             </li>
           ) : undefined}
-          <li>
-            <div
-              role="button"
-              tabIndex={0}
-              onClick={() => {
-                (document?.activeElement as HTMLElement)?.blur();
-                setPreservedFormatsModal(true);
-              }}
-            >
-              Preserved Formats
-            </div>
-          </li>
+          {link.type === "url" && (
+            <li>
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={() => {
+                  (document?.activeElement as HTMLElement)?.blur();
+                  setPreservedFormatsModal(true);
+                }}
+              >
+                {t("preserved_formats")}
+              </div>
+            </li>
+          )}
           {permissions === true || permissions?.canDelete ? (
             <li>
               <div
@@ -144,7 +155,7 @@ export default function LinkActions({
                   e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
                 }}
               >
-                Delete
+                {t("delete")}
               </div>
             </li>
           ) : undefined}

components/LinkViews/LinkComponents/LinkDate.tsx

@@ -6,17 +6,16 @@ export default function LinkDate({
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
 }) {
-  const formattedDate = new Date(link.createdAt as string).toLocaleString(
-    "en-US",
-    {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    }
-  );
+  const formattedDate = new Date(
+    (link.importDate || link.createdAt) as string
+  ).toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
 
   return (
-    <div className="flex items-center gap-1 text-neutral">
+    <div className="flex items-center gap-1 text-neutral min-w-fit">
       <i className="bi-calendar3 text-lg"></i>
       <p>{formattedDate}</p>
     </div>

components/LinkViews/LinkComponents/LinkGroupedIconURL.tsx

@@ -1,55 +0,0 @@
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import Image from "next/image";
-import isValidUrl from "@/lib/shared/isValidUrl";
-import React from "react";
-import Link from "next/link";
-
-export default function LinkGroupedIconURL({
-  link,
-}: {
-  link: LinkIncludingShortenedCollectionAndTags;
-}) {
-  const url =
-    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
-
-  const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
-
-  let shortendURL;
-
-  try {
-    shortendURL = new URL(link.url || "").host.toLowerCase();
-  } catch (error) {
-    console.log(error);
-  }
-
-  return (
-    <Link href={link.url || ""} target="_blank">
-      <div className="bg-white shadow-md rounded-md border-[2px] flex gap-1 item-center justify-center border-white select-none z-10 max-w-full">
-        {link.url && url && showFavicon ? (
-          <Image
-            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
-            width={64}
-            height={64}
-            alt=""
-            className="w-5 h-5 rounded"
-            draggable="false"
-            onError={() => {
-              setShowFavicon(false);
-            }}
-          />
-        ) : showFavicon === false ? (
-          <i className="bi-link-45deg text-xl leading-none text-black"></i>
-        ) : link.type === "pdf" ? (
-          <i className={`bi-file-earmark-pdf`}></i>
-        ) : link.type === "image" ? (
-          <i className={`bi-file-earmark-image`}></i>
-        ) : link.type === "singlefile" ? (
-          <i className={`bi-filetype-html`}></i>
-        ) : undefined}
-        <p className="truncate bg-white text-black mr-1">
-          <p className="text-sm">{shortendURL}</p>
-        </p>
-      </div>
-    </Link>
-  );
-}

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -5,46 +5,94 @@ import React from "react";
 
 export default function LinkIcon({
   link,
-  width,
+  className,
+  size,
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
-  width?: string;
+  className?: string;
+  size?: "small" | "medium";
 }) {
+  let iconClasses: string =
+    "bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10 " +
+    (className || "");
+
+  let dimension;
+
+  switch (size) {
+    case "small":
+      dimension = " w-8 h-8";
+      break;
+    case "medium":
+      dimension = " w-12 h-12";
+      break;
+    default:
+      size = "medium";
+      dimension = " w-12 h-12";
+      break;
+  }
+
   const url =
     isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
 
-  const iconClasses: string =
-    "bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10" +
-    " " +
-    (width || "w-12");
-
   const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
 
   return (
     <>
-      {link.url && url && showFavicon ? (
-        <Image
-          src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
-          width={64}
-          height={64}
-          alt=""
-          className={iconClasses}
-          draggable="false"
-          onError={() => {
-            setShowFavicon(false);
-          }}
-        />
-      ) : showFavicon === false ? (
-        <div className={iconClasses}>
-          <i className="bi-link-45deg text-4xl text-black"></i>
-        </div>
+      {link.type === "url" && url ? (
+        showFavicon ? (
+          <Image
+            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+            width={64}
+            height={64}
+            alt=""
+            className={iconClasses + dimension}
+            draggable="false"
+            onError={() => {
+              setShowFavicon(false);
+            }}
+          />
+        ) : (
+          <LinkPlaceholderIcon
+            iconClasses={iconClasses + dimension}
+            size={size}
+            icon="bi-link-45deg"
+          />
+        )
       ) : link.type === "pdf" ? (
-        <i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
+        <LinkPlaceholderIcon
+          iconClasses={iconClasses + dimension}
+          size={size}
+          icon="bi-file-earmark-pdf"
+        />
       ) : link.type === "image" ? (
-        <i className={`bi-file-earmark-image ${iconClasses}`}></i>
+        <LinkPlaceholderIcon
+          iconClasses={iconClasses + dimension}
+          size={size}
+          icon="bi-file-earmark-image"
+        />
       ) : link.type === "singlefile" ? (
         <i className={`bi-filetype-html ${iconClasses}`}></i>
       ) : undefined}
     </>
   );
 }
+
+const LinkPlaceholderIcon = ({
+  iconClasses,
+  size,
+  icon,
+}: {
+  iconClasses: string;
+  size?: "small" | "medium";
+  icon: string;
+}) => {
+  return (
+    <div
+      className={`${
+        size === "small" ? "text-2xl" : "text-4xl"
+      } text-black aspect-square ${iconClasses}`}
+    >
+      <i className={`${icon} m-auto`}></i>
+    </div>
+  );
+};

components/LinkViews/LinkComponents/LinkTypeBadge.tsx

@@ -0,0 +1,36 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import Link from "next/link";
+import React from "react";
+
+export default function LinkTypeBadge({
+  link,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+}) {
+  let shortendURL;
+
+  if (link.type === "url" && link.url) {
+    try {
+      shortendURL = new URL(link.url).host.toLowerCase();
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return link.url && shortendURL ? (
+    <Link
+      href={link.url || ""}
+      target="_blank"
+      title={link.url || ""}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+      className="flex gap-1 item-center select-none text-neutral hover:opacity-70 duration-100 max-w-full w-fit"
+    >
+      <i className="bi-link-45deg text-lg leading-none"></i>
+      <p className="text-xs truncate">{shortendURL}</p>
+    </Link>
+  ) : (
+    <div className="badge badge-primary badge-sm select-none">{link.type}</div>
+  );
+}