From 1a96ca32f99c41876f110a5078373c966388f5c8 Mon Sep 17 00:00:00 2001
From: Matthew Jacobs <codingmatty@gmail.com>
Date: Wed, 24 Apr 2024 00:56:00 +0000
Subject: [PATCH 1/2] add link actions to readable view

---
 .../LinkViews/LinkComponents/LinkActions.tsx  | 12 ++++++++---
 components/ReadableView.tsx                   | 21 +++++++++++++++++--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx
index d809dfc..fcd4750 100644
--- a/components/LinkViews/LinkComponents/LinkActions.tsx
+++ b/components/LinkViews/LinkComponents/LinkActions.tsx
@@ -18,6 +18,7 @@ type Props = {
   position?: string;
   toggleShowInfo?: () => void;
   linkInfo?: boolean;
+  alignToTop?: boolean;
   flipDropdown?: boolean;
 };
 
@@ -26,6 +27,7 @@ export default function LinkActions({
   toggleShowInfo,
   position,
   linkInfo,
+  alignToTop,
   flipDropdown,
 }: Props) {
   const permissions = usePermissions(link.collection.id as number);
@@ -67,9 +69,9 @@ export default function LinkActions({
   return (
     <>
       <div
-        className={`dropdown dropdown-left dropdown-end absolute ${
+        className={`dropdown dropdown-left absolute ${
           position || "top-3 right-3"
-        } z-20`}
+        } ${alignToTop ? "" : "dropdown-end"} z-20`}
       >
         <div
           tabIndex={0}
@@ -79,7 +81,11 @@ export default function LinkActions({
         >
           <i title="More" className="bi-three-dots text-xl" />
         </div>
-        <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 translate-y-10">
+        <ul
+          className={`dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1 ${
+            alignToTop ? "" : "translate-y-10"
+          }`}
+        >
           <li>
             <div
               role="button"
diff --git a/components/ReadableView.tsx b/components/ReadableView.tsx
index 9c7ce17..977ca2a 100644
--- a/components/ReadableView.tsx
+++ b/components/ReadableView.tsx
@@ -4,6 +4,7 @@ import isValidUrl from "@/lib/shared/isValidUrl";
 import useLinkStore from "@/store/links";
 import {
   ArchivedFormat,
+  CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import ColorThief, { RGBColor } from "colorthief";
@@ -11,7 +12,9 @@ import DOMPurify from "dompurify";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
+import LinkActions from "./LinkViews/LinkComponents/LinkActions";
+import useCollectionStore from "@/store/collections";
 
 type LinkContent = {
   title: string;
@@ -41,6 +44,13 @@ export default function ReadableView({ link }: Props) {
   const router = useRouter();
 
   const { links, getLink } = useLinkStore();
+  const { collections } = useCollectionStore();
+
+  const collection = useMemo(() => {
+    return collections.find(
+      (e) => e.id === link.collection.id
+    ) as CollectionIncludingMembersAndLinkCount;
+  }, [collections, link]);
 
   useEffect(() => {
     const fetchLinkContent = async () => {
@@ -131,7 +141,7 @@ export default function ReadableView({ link }: Props) {
     <div className={`flex flex-col max-w-screen-md h-full mx-auto py-5`}>
       <div
         id="link-banner"
-        className="link-banner bg-opacity-10 border-neutral-content p-3 border mb-3"
+        className="link-banner relative bg-opacity-10 border-neutral-content p-3 border mb-3"
       >
         <div id="link-banner-inner" className="link-banner-inner"></div>
 
@@ -226,6 +236,13 @@ export default function ReadableView({ link }: Props) {
 
           {link?.name ? <p>{unescapeString(link?.description)}</p> : undefined}
         </div>
+
+        <LinkActions
+          link={link}
+          collection={collection}
+          position="top-3 right-3"
+          alignToTop
+        />
       </div>
 
       <div className="flex flex-col gap-5 h-full">

From 7442799836f89233c82364b8b7dfe9a7c9401f14 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Tue, 14 May 2024 12:14:22 -0400
Subject: [PATCH 2/2] minor fix

---
 components/LinkViews/LinkCard.tsx | 2 +-
 components/ReadableView.tsx       | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/LinkViews/LinkCard.tsx b/components/LinkViews/LinkCard.tsx
index d93904a..8f11cea 100644
--- a/components/LinkViews/LinkCard.tsx
+++ b/components/LinkViews/LinkCard.tsx
@@ -208,7 +208,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
               </span>
             )}
           </p>
-          {link.tags[0] && (
+          {link.tags && link.tags[0] && (
             <>
               <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
 
diff --git a/components/ReadableView.tsx b/components/ReadableView.tsx
index 977ca2a..539ec8e 100644
--- a/components/ReadableView.tsx
+++ b/components/ReadableView.tsx
@@ -43,7 +43,7 @@ export default function ReadableView({ link }: Props) {
 
   const router = useRouter();
 
-  const { links, getLink } = useLinkStore();
+  const { getLink } = useLinkStore();
   const { collections } = useCollectionStore();
 
   const collection = useMemo(() => {
@@ -138,7 +138,7 @@ export default function ReadableView({ link }: Props) {
   }, [colorPalette]);
 
   return (
-    <div className={`flex flex-col max-w-screen-md h-full mx-auto py-5`}>
+    <div className={`flex flex-col max-w-screen-md h-full mx-auto p-5`}>
       <div
         id="link-banner"
         className="link-banner relative bg-opacity-10 border-neutral-content p-3 border mb-3"
@@ -174,7 +174,7 @@ export default function ReadableView({ link }: Props) {
               />
             )}
             <div className="flex flex-col">
-              <p className="text-xl">
+              <p className="text-xl pr-10">
                 {unescapeString(
                   link?.name || link?.description || link?.url || ""
                 )}
@@ -212,7 +212,7 @@ export default function ReadableView({ link }: Props) {
                 {link?.collection.name}
               </p>
             </Link>
-            {link?.tags.map((e, i) => (
+            {link?.tags?.map((e, i) => (
               <Link key={i} href={`/tags/${e.id}`} className="z-10">
                 <p
                   title={e.name}