visual changes improvements

components/CollectionCard.tsx

@@ -21,7 +21,7 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
     <Link href={`/collections/${collection.id}`}>
       <div className="p-5 bg-gray-100 min-h-[10rem] w-72 rounded-md border-sky-100 border-solid border flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100">
         <div>
-          <div className="flex justify-between text-sky-900 items-center">
+          <div className="flex justify-between text-sky-600 items-center">
             <p className="text-lg w-max font-bold">{collection.name}</p>
             <FontAwesomeIcon
               icon={faChevronRight}

components/Dashboard/CollectionItem.tsx

@@ -18,10 +18,10 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
   });
 
   return (
-    <Link href={`/collections/${collection.id}`}>
-      <div className="p-5 bg-white rounded-md flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100">
+    <Link href={`/collections/${collection.id}`} className="bg-white">
+      <div className="p-5 rounded-md flex border border-sky-100 flex-col gap-2 justify-between cursor-pointer hover:opacity-60 duration-100">
         <div>
-          <div className="flex justify-between text-sky-900 items-center">
+          <div className="flex justify-between text-sky-600 items-center">
             <div className="flex items-baseline gap-1">
               <p className="text-lg w-max font-bold">{collection.name}</p>
               <p className="text-sky-400">{collection.description}</p>

components/Dashboard/LinkItem.tsx

@@ -21,8 +21,6 @@ export default function ({
   link: ExtendedLink;
   count: number;
 }) {
-  const [editModal, setEditModal] = useState(false);
-
   const url = new URL(link.url);
   const formattedDate = new Date(link.createdAt).toLocaleString("en-US", {
     year: "numeric",
@@ -31,7 +29,7 @@ export default function ({
   });
 
   return (
-    <div className="bg-white p-5 rounded-md flex items-start relative gap-5 sm:gap-14 group/item">
+    <div className="bg-white p-5 rounded-md flex items-start border border-sky-100 relative gap-5 lg:gap-10 group/item">
       <Image
         src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
         width={32}
@@ -49,7 +47,7 @@ export default function ({
         width={80}
         height={80}
         alt=""
-        className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
+        className="blur-sm absolute left-2 opacity-40 select-none hidden lg:block"
         draggable="false"
         onError={(e) => {
           const target = e.target as HTMLElement;

components/Sidebar/index.tsx

@@ -18,7 +18,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
-export default function () {
+export default function ({ className }: { className?: string }) {
   const { collections } = useCollectionStore();
   const { tags } = useTagStore();
 
@@ -31,7 +31,9 @@ export default function () {
   }, [router]);
 
   return (
-    <div className="bg-gray-100 h-screen w-64 xl:w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20">
+    <div
+      className={`bg-gray-100 h-screen w-64 xl:w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20 ${className}`}
+    >
       <p className="p-2 text-sky-500 font-bold text-xl mb-5 leading-4">
         Linkwarden
       </p>

layouts/MainLayout.tsx

@@ -24,11 +24,11 @@ export default function ({ children }: Props) {
   if (status === "authenticated" && !redirect && routeExists)
     return (
       <div className="flex">
-        <div className="hidden lgblock">
-          <Sidebar />
+        <div className="hidden lg:block">
+          <Sidebar className="fixed" />
         </div>
 
-        <div className="w-full">
+        <div className="w-full lg:ml-64 xl:ml-80">
           <Navbar />
           {children}
         </div>

lib/api/controllers/tags/getTags.ts

@@ -39,6 +39,11 @@ export default async function (userId: number) {
         ],
       },
     },
+    orderBy: {
+      links: {
+        _count: "desc",
+      },
+    },
   });
 
   return { response: tags, status: 200 };

pages/dashboard.tsx

@@ -67,12 +67,12 @@ export default function () {
           </div>
         </div>
 
-        <div className="flex flex-col md:flex-row items-start justify-evenly gap-5">
-          <div className="flex flex-col gap-2 p-2 bg-sky-50 rounded-md w-full">
+        <div className="flex flex-col 2xl:flex-row items-start justify-evenly gap-5">
+          <div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
             <div className="flex justify-between gap-2 items-baseline">
               <p className="text-sky-600 text-xl mb-2">Recently added Links</p>
               <Link href="/links">
-                <div className="text-sky-600 flex items-center gap-1">
+                <div className="text-sky-600 flex items-center gap-1 hover:border-b-sky-500 duration-100 hover:border-b">
                   View All
                   <FontAwesomeIcon
                     icon={faArrowRight}
@@ -93,11 +93,11 @@ export default function () {
               ))}
           </div>
 
-          <div className="flex flex-col gap-2 p-2 bg-sky-50 rounded-md w-full">
+          <div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
             <div className="flex justify-between gap-2 items-baseline">
               <p className="text-sky-600 text-xl mb-2">Top Collections</p>
               <Link href="/collections">
-                <div className="text-sky-600 flex items-center gap-1">
+                <div className="text-sky-600 flex items-center gap-1 hover:border-b-sky-500 duration-100 hover:border-b">
                   View All
                   <FontAwesomeIcon
                     icon={faArrowRight}
@@ -110,6 +110,32 @@ export default function () {
               <CollectionItem key={i} collection={e} />
             ))}
           </div>
+
+          <div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
+            <div className="flex justify-between gap-2 items-baseline">
+              <p className="text-sky-600 text-xl mb-2">Top Tags</p>
+              <Link href="/collections">
+                <div className="text-sky-600 flex items-center gap-1 hover:border-b-sky-500 duration-100 hover:border-b">
+                  View All
+                  <FontAwesomeIcon
+                    icon={faArrowRight}
+                    className="w-4 h-4 text-sky-300"
+                  />
+                </div>
+              </Link>
+            </div>
+            <div className="flex gap-2 flex-wrap">
+              {tags.slice(0, 19).map((e, i) => (
+                <Link
+                  href={`/tags/${e.id}`}
+                  key={i}
+                  className="px-2 py-1 bg-sky-200 rounded-full hover:bg-sky-100 duration-100 text-sky-700"
+                >
+                  # {e.name}
+                </Link>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     </MainLayout>