improvements

components/LinkCard.tsx

@@ -150,7 +150,7 @@ export default function LinkCard({ link, count, className }: Props) {
               setExpandDropdown({ x: e.clientX, y: e.clientY });
             }}
             id={"expand-dropdown" + link.id}
-            className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-5 top-5 z-10 duration-100 p-1"
+            className="text-gray-500 dark:text-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-4 top-4 z-10 duration-100 p-1"
           >
             <FontAwesomeIcon
               icon={faEllipsis}
@@ -163,7 +163,7 @@ export default function LinkCard({ link, count, className }: Props) {
 
         <div
           onClick={() => router.push("/links/" + link.id)}
-          className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
+          className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-4"
         >
           {url && account.displayLinkIcons && (
             <Image
@@ -173,7 +173,7 @@ export default function LinkCard({ link, count, className }: Props) {
               alt=""
               className={`${
                 account.blurredFavicons ? "blur-sm " : ""
-              }absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none`}
+              }absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none z-10`}
               draggable="false"
               onError={(e) => {
                 const target = e.target as HTMLElement;
@@ -208,6 +208,27 @@ export default function LinkCard({ link, count, className }: Props) {
                   {collection?.name}
                 </p>
               </Link>
+
+              {/* {link.tags[0] ? (
+                <div className="flex gap-3 items-center flex-wrap my-2 truncate relative">
+                  <div className="flex gap-1 items-center flex-nowrap">
+                    {link.tags.map((e, i) => (
+                      <Link
+                        href={"/tags/" + e.id}
+                        key={i}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                        }}
+                        className="px-2 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                      >
+                        {e.name}
+                      </Link>
+                    ))}
+                  </div>
+                  <div className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent to-slate-100 dark:to-neutral-800 to-35%"></div>
+                </div>
+              ) : undefined} */}
+
               <Link
                 href={link.url}
                 target="_blank"

components/PublicPage/PublicLinkCard.tsx

@@ -57,7 +57,7 @@ export default function LinkCard({ link, count }: Props) {
                 <Link
                   href={"/public/collections/20?q=" + e.name}
                   key={i}
-                  className="px-2 text-xs rounded-md border border-black dark:border-white truncate max-w-[10rem] hover:opacity-50 duration-100"
+                  className="px-2 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
                 >
                   {e.name}
                 </Link>

layouts/LinkLayout.tsx

@@ -100,7 +100,7 @@ export default function LinkLayout({ children }: Props) {
                     }`
                   );
                 } else {
-                  router.push(`/collections/${linkCollection?.id}`);
+                  router.push(`/dashboard`);
                 }
               }}
               className="inline-flex gap-1 hover:opacity-60 items-center select-none cursor-pointer p-2 lg:p-0 lg:px-1 lg:my-2 text-gray-500 dark:text-gray-300 rounded-md duration-100"
@@ -110,7 +110,9 @@ export default function LinkLayout({ children }: Props) {
               <span className="hidden sm:inline-block">
                 to{" "}
                 <span className="capitalize">
-                  {linkCollection?.name || link?.collection?.name}
+                  {router.pathname.startsWith("/public")
+                    ? linkCollection?.name || link?.collection?.name
+                    : "Dashboard"}
                 </span>
               </span>
             </div>

pages/links/[id].tsx

@@ -238,7 +238,7 @@ export default function Index() {
                   <Link key={i} href={`/tags/${e.id}`} className="z-10">
                     <p
                       title={e.name}
-                      className="px-2 py-1 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                      className="px-2 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
                     >
                       {e.name}
                     </p>

pages/public/links/[id].tsx

@@ -17,7 +17,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBoxesStacked, faFolder } from "@fortawesome/free-solid-svg-icons";
 import useModalStore from "@/store/modals";
 import { useSession } from "next-auth/react";
-import { isProbablyReaderable } from "@mozilla/readability";
 
 type LinkContent = {
   title: string;

pages/settings/api.tsx

@@ -54,12 +54,12 @@ export default function Api() {
 
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">API Keys</p>
+      <p className="capitalize text-3xl font-thin inline">API Keys (Soon)</p>
 
       <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
 
       <div className="flex flex-col gap-3">
-        <div className="badge bg-yellow-300 rounded-md border w-fit px-2 text-black">
+        <div className="badge bg-orange-500 rounded-md border border-black w-fit px-2 text-black">
           Status: Under Development
         </div>