bug fix

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -60,17 +60,13 @@ export default function LinkActions({ link, className, btnStyle }: Props) {
     <>
       {isPublicRoute ? (
         <div
-          className={clsx(
-            className || "top-3 right-3",
-            "absolute z-20",
-            btnStyle
-          )}
+          className={clsx(className || "top-3 right-3 absolute z-20")}
           tabIndex={0}
           role="button"
           onMouseDown={dropdownTriggerer}
           onClick={() => setLinkModal(true)}
         >
-          <div className="btn btn-sm btn-square text-neutral">
+          <div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>
             <i title="More" className="bi-three-dots text-xl" />
           </div>
         </div>

components/LinkViews/LinkComponents/LinkList.tsx

@@ -19,6 +19,7 @@ import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
 import { useLinks } from "@/hooks/store/links";
 import useLocalSettingsStore from "@/store/localSettings";
+import LinkPin from "./LinkPin";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -134,11 +135,16 @@ export default function LinkCardCompact({ link, editMode }: Props) {
             </div>
           </div>
         </div>
+        <LinkPin
+          link={link}
+          className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+          btnStyle="btn-ghost"
+        />
         <LinkActions
           link={link}
           collection={collection}
           className={
-            "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+            "absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
           }
           btnStyle="btn-ghost"
         />

components/LinkViews/LinkComponents/LinkMasonry.tsx

@@ -24,6 +24,7 @@ import { useUser } from "@/hooks/store/user";
 import { useGetLink, useLinks } from "@/hooks/store/links";
 import useLocalSettingsStore from "@/store/localSettings";
 import clsx from "clsx";
+import LinkPin from "./LinkPin";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -246,6 +247,10 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
           "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
         }
       />
+      <LinkPin
+        link={link}
+        className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+      />
     </div>
   );
 }

components/LinkViews/LinkComponents/LinkPin.tsx

@@ -18,10 +18,10 @@ export default function LinkPin({ link, className, btnStyle }: Props) {
 
   return (
     <div
-      className={clsx(className || "top-3 right-3 absolute", btnStyle)}
+      className={clsx(className || "top-3 right-3 absolute")}
       onClick={() => pinLink(link)}
     >
-      <div className="btn btn-sm btn-square text-neutral">
+      <div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>
         <i
           title="Pin"
           className={clsx(

hooks/store/links.tsx

@@ -433,12 +433,38 @@ const useUpdatePreview = () => {
       return data;
     },
     onSuccess: (data) => {
-      queryClient.invalidateQueries({ queryKey: ["links"] });
-      queryClient.invalidateQueries({ queryKey: ["dashboardData"] });
+      queryClient.setQueryData(["dashboardData"], (oldData: any) => {
+        if (!oldData?.links) return undefined;
+        return {
+          ...oldData,
+          links: oldData.links.map((e: any) =>
+            e.id === data.response.id
+              ? {
+                  ...e,
+                  preview: `archives/preview/${e.collectionId}/${e.id}.jpeg`,
+                }
+              : e
+          ),
+        };
+      });
 
-      queryClient.invalidateQueries({ queryKey: ["collections"] });
-      queryClient.invalidateQueries({ queryKey: ["tags"] });
-      queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
+      queryClient.setQueriesData({ queryKey: ["links"] }, (oldData: any) => {
+        if (!oldData) return undefined;
+        return {
+          pages: oldData.pages.map((page: any) =>
+            page.map((item: any) =>
+              item.id === data.response.id
+                ? {
+                    ...item,
+                    preview: `archives/preview/${item.collectionId}/${item.id}.jpeg`,
+                    updatedAt: new Date().toISOString(),
+                  }
+                : item
+            )
+          ),
+          pageParams: oldData.pageParams,
+        };
+      });
     },
   });
 };

lib/api/controllers/links/linkId/updateLinkById.ts

@@ -124,7 +124,7 @@ export default async function updateLinkById(
           })),
         },
         pinnedBy:
-          data?.pinnedBy && data.pinnedBy[0].id === userId
+          data?.pinnedBy && data.pinnedBy[0]?.id === userId
             ? { connect: { id: userId } }
             : { disconnect: { id: userId } },
       },