small fix

components/LinkList.tsx

@@ -1,4 +1,7 @@
-import { LinkIncludingCollectionAndTags } from "@/types/global";
+import {
+  CollectionIncludingMembers,
+  LinkIncludingCollectionAndTags,
+} from "@/types/global";
 import {
   faFolder,
   faArrowUpRightFromSquare,
@@ -6,13 +9,14 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import Dropdown from "./Dropdown";
 import useLinkStore from "@/store/links";
 import Modal from "./Modal";
 import LinkModal from "./Modal/LinkModal";
 import Link from "next/link";
+import useCollectionStore from "@/store/collections";
 
 type Props = {
   link: LinkIncludingCollectionAndTags;
@@ -23,6 +27,22 @@ export default function ({ link, count }: Props) {
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [editModal, setEditModal] = useState(false);
 
+  const { collections } = useCollectionStore();
+
+  const [collection, setCollection] = useState<CollectionIncludingMembers>(
+    collections.find(
+      (e) => e.id === link.collection.id
+    ) as CollectionIncludingMembers
+  );
+
+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembers
+    );
+  }, [collections]);
+
   const { removeLink } = useLinkStore();
 
   const url = new URL(link.url);
@@ -88,9 +108,9 @@ export default function ({ link, count }: Props) {
                 <FontAwesomeIcon
                   icon={faFolder}
                   className="w-4 h-4 mt-1"
-                  style={{ color: link.collection.color }}
+                  style={{ color: collection.color }}
                 />
-                <p className="text-sky-900">{link.collection.name}</p>
+                <p className="text-sky-900">{collection.name}</p>
               </div>
             </Link>
 

pages/collections/index.tsx

@@ -77,7 +77,6 @@ export default function () {
   }, [collections, sortBy]);
 
   return (
-    // ml-80
     <MainLayout>
       <div className="p-5">
         <div className="flex gap-3 items-center justify-between mb-5">

pages/search/[query].tsx

@@ -70,9 +70,16 @@ export default function Links() {
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
         <div className="flex gap-3 items-center justify-between">
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-3 items-center mb-5">
-            <FontAwesomeIcon icon={faSearch} className="w-5 h-5 text-sky-300" />
+            <div className="flex gap-2">
-            <p className="text-lg text-sky-900">Search Results</p>
+              <FontAwesomeIcon
+                icon={faSearch}
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
+              />
+              <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
+                Search Results
+              </p>
+            </div>
           </div>
 
           <div className="flex gap-3 items-center">