bug fix + improvements + new logo

components/CompactLinkCard.tsx

@@ -0,0 +1,164 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { faFolder, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Dropdown from "./Dropdown";
+import useLinkStore from "@/store/links";
+import useCollectionStore from "@/store/collections";
+import useAccountStore from "@/store/account";
+import useModalStore from "@/store/modals";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  className?: string;
+};
+
+export default function LinkCard({ link, count, className }: Props) {
+  const { setModal } = useModalStore();
+
+  const [expandDropdown, setExpandDropdown] = useState(false);
+
+  const { collections } = useCollectionStore();
+
+  const { account } = useAccountStore();
+
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(
+      collections.find(
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
+    );
+
+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
+    );
+  }, [collections]);
+
+  const { removeLink, updateLink } = useLinkStore();
+
+  const url = new URL(link.url);
+  const formattedDate = new Date(link.createdAt as string).toLocaleString(
+    "en-US",
+    {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    }
+  );
+
+  return (
+    <div
+      className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-sm hover:shadow-none cursor-pointer duration-100 p-5 rounded-3xl relative group ${className}`}
+    >
+      <div
+        onClick={() => setExpandDropdown(!expandDropdown)}
+        id={"expand-dropdown" + link.id}
+        className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
+      >
+        <FontAwesomeIcon
+          icon={faEllipsis}
+          title="More"
+          className="w-5 h-5"
+          id={"expand-dropdown" + link.id}
+        />
+      </div>
+
+      <div
+        onClick={() => console.log("hi!")}
+        className="flex items-start gap-5 sm:gap-10 h-full w-full"
+      >
+        <Image
+          src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
+          width={70}
+          height={70}
+          alt=""
+          className="blur-sm absolute bottom-5 right-5 opacity-60 group-hover:opacity-80 duration-100 select-none"
+          draggable="false"
+          onError={(e) => {
+            const target = e.target as HTMLElement;
+            target.style.opacity = "0";
+          }}
+        />
+
+        <div className="flex justify-between gap-5 w-full h-full z-0">
+          <div className="flex flex-col justify-between w-full">
+            <div className="flex items-baseline gap-1">
+              <p className="text-sm text-sky-400 font-bold">{count + 1}.</p>
+              <p className="text-lg text-sky-500 font-bold truncate max-w-[10rem]">
+                {link.name}
+              </p>
+            </div>
+            <div className="flex gap-3 items-center flex-wrap my-3">
+              <div className="flex items-center gap-1">
+                <FontAwesomeIcon
+                  icon={faFolder}
+                  className="w-4 h-4 mt-1 drop-shadow"
+                  style={{ color: collection?.color }}
+                />
+                <p className="text-sky-900 truncate max-w-[10rem]">
+                  {collection?.name}
+                </p>
+              </div>
+            </div>
+            <p className="text-gray-500">{formattedDate}</p>
+          </div>
+        </div>
+      </div>
+      {expandDropdown ? (
+        <Dropdown
+          items={[
+            {
+              name:
+                link?.pinnedBy && link.pinnedBy[0]
+                  ? "Unpin"
+                  : "Pin to Dashboard",
+              onClick: () => {
+                updateLink({
+                  ...link,
+                  pinnedBy:
+                    link?.pinnedBy && link.pinnedBy[0]
+                      ? undefined
+                      : [{ id: account.id }],
+                });
+                setExpandDropdown(false);
+              },
+            },
+            {
+              name: "Edit",
+              onClick: () => {
+                setModal({
+                  modal: "LINK",
+                  state: true,
+                  method: "UPDATE",
+                  active: link,
+                });
+                setExpandDropdown(false);
+              },
+            },
+            {
+              name: "Delete",
+              onClick: () => {
+                removeLink(link);
+                setExpandDropdown(false);
+              },
+            },
+          ]}
+          onClickOutside={(e: Event) => {
+            const target = e.target as HTMLInputElement;
+            if (target.id !== "expand-dropdown" + link.id)
+              setExpandDropdown(false);
+          }}
+          className="absolute top-12 right-5 w-36"
+        />
+      ) : null}
+    </div>
+  );
+}

components/Modal/Collection/index.tsx

@@ -5,13 +5,21 @@ import TeamManagement from "./TeamManagement";
 import { useState } from "react";
 import DeleteCollection from "./DeleteCollection";
 
-type Props = {
+type Props =
-  toggleCollectionModal: Function;
+  | {
-  activeCollection: CollectionIncludingMembersAndLinkCount;
+      toggleCollectionModal: Function;
-  method: "CREATE" | "UPDATE";
+      activeCollection: CollectionIncludingMembersAndLinkCount;
-  className?: string;
+      method: "UPDATE";
-  defaultIndex?: number;
+      className?: string;
-};
+      defaultIndex?: number;
+    }
+  | {
+      toggleCollectionModal: Function;
+      activeCollection?: CollectionIncludingMembersAndLinkCount;
+      method: "CREATE";
+      className?: string;
+      defaultIndex?: number;
+    };
 
 export default function CollectionModal({
   className,
@@ -21,7 +29,15 @@ export default function CollectionModal({
   method,
 }: Props) {
   const [collection, setCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
+    useState<CollectionIncludingMembersAndLinkCount>(
+      activeCollection || {
+        name: "",
+        description: "",
+        color: "#0ea5e9",
+        isPublic: false,
+        members: [],
+      }
+    );
 
   return (
     <div className={className}>

components/Modal/LinkModal.tsx

@@ -57,7 +57,7 @@ export default function EditLink({
         (e) => e.id == Number(router.query.id)
       );
 
-      if (currentCollection)
+      if (currentCollection && currentCollection.ownerId)
         setLink({
           ...link,
           collection: {

components/Navbar.tsx

@@ -1,10 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { signOut } from "next-auth/react";
-import {
+import { faPlus, faBars } from "@fortawesome/free-solid-svg-icons";
-  faPlus,
-  faChevronDown,
-  faBars,
-} from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
 import Dropdown from "@/components/Dropdown";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
@@ -67,7 +63,7 @@ export default function Navbar() {
 
         <div className="relative">
           <div
-            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:p-1 duration-100 h-10 rounded-full items-center w-fit bg-white cursor-pointer"
+            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white cursor-pointer"
             onClick={() => setProfileDropdown(!profileDropdown)}
             id="profile-dropdown"
           >
@@ -75,22 +71,12 @@ export default function Navbar() {
               src={account.profilePic}
               className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100"
             />
-            <div
+            <p
               id="profile-dropdown"
-              className="text-sky-500 duration-100 hidden sm:flex item-center gap-1 max-w-[8rem]"
+              className="font-bold text-sky-500 leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
             >
-              <p
+              {account.name}
-                id="profile-dropdown"
+            </p>
-                className="font-bold leading-3 hidden sm:block select-none truncate py-1"
-              >
-                {account.name}
-              </p>
-              <FontAwesomeIcon
-                id="profile-dropdown"
-                icon={faChevronDown}
-                className="mt-1 h-3 w-3 text-gray-500"
-              />
-            </div>
           </div>
           {profileDropdown ? (
             <Dropdown
@@ -101,7 +87,6 @@ export default function Navbar() {
                     setModal({
                       modal: "ACCOUNT",
                       state: true,
-                      method: "CREATE",
                       active: account,
                     });
                     setProfileDropdown(!profileDropdown);

pages/collections/index.tsx

@@ -66,14 +66,6 @@ export default function Collections() {
                           modal: "COLLECTION",
                           state: true,
                           method: "CREATE",
-                          active: {
-                            name: "",
-                            description: "",
-                            color: "#0ea5e9",
-                            isPublic: false,
-                            ownerId: session.data?.user.id as number,
-                            members: [],
-                          },
                         });
                         setExpandDropdown(false);
                       },
@@ -125,14 +117,6 @@ export default function Collections() {
                 modal: "COLLECTION",
                 state: true,
                 method: "CREATE",
-                active: {
-                  name: "",
-                  description: "",
-                  color: "#0ea5e9",
-                  isPublic: false,
-                  ownerId: session.data?.user.id as number,
-                  members: [],
-                },
               });
             }}
           >

pages/dashboard.tsx

@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import useTagStore from "@/store/tags";
-import LinkCard from "@/components/LinkCard";
+import CompactLinkCard from "@/components/CompactLinkCard";
 import Link from "next/link";
 import CollectionCard from "@/components/CollectionCard";
 import { Disclosure, Transition } from "@headlessui/react";
@@ -39,6 +39,10 @@ export default function Dashboard() {
 
   useLinks({ pinnedOnly: true, sort: 0 });
 
+  useEffect(() => {
+    console.log(links);
+  }, [links]);
+
   useEffect(() => {
     setNumberOfLinks(
       collections.reduce(
@@ -145,11 +149,11 @@ export default function Dashboard() {
                 leaveFrom="transform opacity-100 translate-y-0"
                 leaveTo="transform opacity-0 -translate-y-3"
               >
-                <Disclosure.Panel className="flex flex-col gap-5 w-full">
+                <Disclosure.Panel className="grid grid-cols-1 xl:grid-cols-2 gap-5 w-full">
                   {links
-                    .filter((e) => e.pinnedBy)
+                    .filter((e) => e.pinnedBy && e.pinnedBy[0])
                     .map((e, i) => (
-                      <LinkCard key={i} link={e} count={i} />
+                      <CompactLinkCard key={i} link={e} count={i} />
                     ))}
                 </Disclosure.Panel>
               </Transition>

store/modals.ts

@@ -27,10 +27,17 @@ type Modal =
   | {
       modal: "COLLECTION";
       state: boolean;
-      method: "CREATE" | "UPDATE";
+      method: "UPDATE";
       active: CollectionIncludingMembersAndLinkCount;
       defaultIndex?: number;
     }
+  | {
+      modal: "COLLECTION";
+      state: boolean;
+      method: "CREATE";
+      active?: CollectionIncludingMembersAndLinkCount;
+      defaultIndex?: number;
+    }
   | null;
 
 type ModalsStore = {

types/global.ts

@@ -28,10 +28,11 @@ export interface Member {
 }
 
 export interface CollectionIncludingMembersAndLinkCount
-  extends Omit<Collection, "id" | "createdAt"> {
+  extends Omit<Collection, "id" | "createdAt" | "ownerId"> {
   id?: number;
+  ownerId?: number;
   createdAt?: string;
-  _count: { links: number };
+  _count?: { links: number };
   members: Member[];
 }