refactor code to improve readability and maintainability + redesigned announcement bar

components/LinkViews/Layouts/CardView.tsx

@@ -13,7 +13,7 @@ export default function CardView({
   isLoading?: boolean;
 }) {
   return (
-    <div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+    <div className="grid min-[1901px]:grid-cols-5 min-[1501px]:grid-cols-4 min-[881px]:grid-cols-3 min-[551px]:grid-cols-2 grid-cols-1 gap-5 pb-5">
       {links.map((e, i) => {
         return (
           <LinkCard

components/LinkViews/LinkCard.tsx

@@ -128,55 +128,65 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
       }
     >
       <div
-        className="rounded-2xl cursor-pointer"
+        className="rounded-2xl cursor-pointer h-full flex flex-col justify-between"
         onClick={() =>
           !editMode && window.open(generateLinkHref(link, account), "_blank")
         }
       >
-        <div className="relative rounded-t-2xl h-40 overflow-hidden">
-          {previewAvailable(link) ? (
-            <Image
-              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
-              width={1280}
-              height={720}
-              alt=""
-              className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-              style={{ filter: "blur(2px)" }}
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-          ) : link.preview === "unavailable" ? (
-            <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
-          ) : (
-            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-          )}
-          <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
-            <LinkIcon link={link} />
-          </div>
-        </div>
-
-        <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
-
-        <div className="p-3 mt-1">
-          <p className="truncate w-full pr-8 text-primary">
-            {unescapeString(link.name || link.description) || link.url}
-          </p>
-
-          <LinkTypeBadge link={link} />
-        </div>
-
-        <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
-
-        <div className="flex justify-between text-xs text-neutral px-3 pb-1">
-          <div className="cursor-pointer w-fit">
-            {collection && (
-              <LinkCollection link={link} collection={collection} />
+        <div>
+          <div className="relative rounded-t-2xl h-40 overflow-hidden">
+            {previewAvailable(link) ? (
+              <Image
+                src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+                width={1280}
+                height={720}
+                alt=""
+                className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+                style={
+                  link.type !== "image" ? { filter: "blur(1px)" } : undefined
+                }
+                draggable="false"
+                onError={(e) => {
+                  const target = e.target as HTMLElement;
+                  target.style.display = "none";
+                }}
+              />
+            ) : link.preview === "unavailable" ? (
+              <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
+            ) : (
+              <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+            )}
+            {link.type !== "image" && (
+              <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
+                <LinkIcon link={link} />
+              </div>
             )}
           </div>
-          <LinkDate link={link} />
+
+          <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
+        </div>
+
+        <div className="flex flex-col justify-between h-full">
+          <div className="p-3 flex flex-col gap-2">
+            <p className="truncate w-full pr-8 text-primary text-sm">
+              {unescapeString(link.name)}
+            </p>
+
+            <LinkTypeBadge link={link} />
+          </div>
+
+          <div>
+            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
+            <div className="flex justify-between text-xs text-neutral px-3 pb-1 gap-2">
+              <div className="cursor-pointer truncate">
+                {collection && (
+                  <LinkCollection link={link} collection={collection} />
+                )}
+              </div>
+              <LinkDate link={link} />
+            </div>
+          </div>
         </div>
       </div>
 

components/LinkViews/LinkComponents/LinkTypeBadge.tsx

@@ -25,14 +25,12 @@ export default function LinkTypeBadge({
       onClick={(e) => {
         e.stopPropagation();
       }}
-      className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100"
+      className="flex gap-1 item-center select-none text-neutral hover:opacity-70 duration-100"
     >
       <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 my-1 select-none">
-      {link.type}
-    </div>
+    <div className="badge badge-primary badge-sm select-none">{link.type}</div>
   );
 }

components/LinkViews/LinkMasonry.tsx

@@ -30,7 +30,6 @@ type Props = {
 };
 
 export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
-  const viewMode = localStorage.getItem("viewMode") || "card";
   const { collections } = useCollectionStore();
   const { account } = useAccountStore();
 
@@ -141,6 +140,9 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
               height={720}
               alt=""
               className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+              style={
+                link.type !== "image" ? { filter: "blur(1px)" } : undefined
+              }
               draggable="false"
               onError={(e) => {
                 const target = e.target as HTMLElement;
@@ -150,28 +152,29 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
           ) : link.preview === "unavailable" ? null : (
             <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
           )}
+          {link.type !== "image" && (
+            <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
+              <LinkIcon link={link} />
+            </div>
+          )}
         </div>
 
         {link.preview !== "unavailable" && (
           <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
         )}
 
-        <div className="p-3 mt-1 flex flex-col gap-2">
-          <div className="w-full pr-8">
-            <div
-              className={`rounded-t-2xl flex items-center justify-center shadow rounded-md float-left mr-2 ${
-                link.type === "url" ? "" : "hidden"
-              }`}
-            >
-              <LinkIcon link={link} size="small" className="mt-1" />
-            </div>
-            <p className="text-primary text-sm">{unescapeString(link.name)}</p>
+        <div className="p-3 flex flex-col gap-2">
+          <p className="hyphens-auto w-full pr-8 text-primary text-sm">
+            {unescapeString(link.name)}
+          </p>
 
-            {link.description && (
-              <p className="text-sm">{unescapeString(link.description)}</p>
-            )}
-            <LinkTypeBadge link={link} />
-          </div>
+          <LinkTypeBadge link={link} />
+
+          {link.description && (
+            <p className="hyphens-auto text-sm">
+              {unescapeString(link.description)}
+            </p>
+          )}
 
           {link.tags[0] && (
             <div className="flex gap-1 items-center flex-wrap">
@@ -193,12 +196,8 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
 
         <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
 
-        <div className="flex justify-between gap-1 text-xs text-neutral px-3 pb-1">
-          <div className="cursor-pointer w-fit truncate">
-            {collection && (
-              <LinkCollection link={link} collection={collection} />
-            )}
-          </div>
+        <div className="flex flex-wrap justify-between text-xs text-neutral px-3 pb-1 w-full gap-x-2">
+          {collection && <LinkCollection link={link} collection={collection} />}
           <LinkDate link={link} />
         </div>
       </div>