finalized dashboard

components/LinkCard.tsx

@@ -15,6 +15,7 @@ import Dropdown from "./Dropdown";
 import useLinkStore from "@/store/links";
 import Link from "next/link";
 import useCollectionStore from "@/store/collections";
+import useAccountStore from "@/store/account";
 import useModalStore from "@/store/modals";
 
 type Props = {
@@ -30,6 +31,8 @@ export default function LinkCard({ link, count, className }: Props) {
 
   const { collections } = useCollectionStore();
 
+  const { account } = useAccountStore();
+
   const [collection, setCollection] = useState<CollectionIncludingMembers>(
     collections.find(
       (e) => e.id === link.collection.id
@@ -44,7 +47,7 @@ export default function LinkCard({ link, count, className }: Props) {
     );
   }, [collections]);
 
-  const { removeLink } = useLinkStore();
+  const { removeLink, updateLink } = useLinkStore();
 
   const url = new URL(link.url);
   const formattedDate = new Date(link.createdAt as string).toLocaleString(
@@ -66,7 +69,7 @@ export default function LinkCard({ link, count, className }: Props) {
           width={42}
           height={42}
           alt=""
-          className="select-none mt-3 z-10 rounded-full shadow border-[3px] border-white bg-white"
+          className="select-none mt-3 z-10 rounded-full shadow border-[3px] border-white bg-white aspect-square"
           draggable="false"
           onError={(e) => {
             const target = e.target as HTMLElement;
@@ -129,7 +132,7 @@ export default function LinkCard({ link, count, className }: Props) {
                 className="group/url"
               >
                 <div className="text-sky-400 font-bold flex items-center gap-1">
-                  <p className="truncate w-40">{url.host}</p>
+                  <p className="truncate max-w-[10rem]">{url.host}</p>
                   <FontAwesomeIcon
                     icon={faArrowUpRightFromSquare}
                     className="w-3 opacity-0 group-hover/url:opacity-100 duration-75"
@@ -182,6 +185,22 @@ export default function LinkCard({ link, count, className }: Props) {
             {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: () => {

components/Modal/LinkModal.tsx

@@ -37,8 +37,6 @@ export default function EditLink({
           name: "",
           url: "",
           title: "",
-          screenshotPath: "",
-          pdfPath: "",
           tags: [],
           collection: {
             name: "",

components/ProfilePhoto.tsx

@@ -33,9 +33,9 @@ export default function ProfilePhoto({
 
   return error || !src ? (
     <div
-      className={`bg-sky-500 text-white h-10 w-10 shadow rounded-full border-[3px] border-slate-200 flex items-center justify-center ${className}`}
+      className={`bg-sky-500 text-white h-10 w-10 aspect-square shadow rounded-full border-[3px] border-slate-200 flex items-center justify-center ${className}`}
     >
-      <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2" />
+      <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
     </div>
   ) : (
     <Image
@@ -43,7 +43,7 @@ export default function ProfilePhoto({
       src={src}
       height={112}
       width={112}
-      className={`h-10 w-10 shadow rounded-full border-[3px] border-slate-200 ${className}`}
+      className={`h-10 w-10 shadow rounded-full aspect-square border-[3px] border-slate-200 ${className}`}
     />
   );
 }

components/PublicPage/LinkCard.tsx

@@ -7,7 +7,7 @@ import Image from "next/image";
 import { Link as LinkType } from "@prisma/client";
 
 type Props = {
-  link: Omit<LinkType, "screenshotPath" | "pdfPath">;
+  link: LinkType;
   count: number;
 };