From db67ec878ea4994965ecc03a888f7b98f0c07fb9 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Wed, 23 Jul 2025 21:12:27 +0800
Subject: [PATCH] fix: add color highlight for entry link, resolves FOL-2288

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../ui/markdown/renderers/MarkdownLink.tsx    | 30 ++++++++++++-------
 .../layer/renderer/src/lib/parse-html.ts      |  2 +-
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/components/ui/markdown/renderers/MarkdownLink.tsx b/apps/desktop/layer/renderer/src/components/ui/markdown/renderers/MarkdownLink.tsx
index a93ea172a..e7afc75fa 100644
--- a/apps/desktop/layer/renderer/src/components/ui/markdown/renderers/MarkdownLink.tsx
+++ b/apps/desktop/layer/renderer/src/components/ui/markdown/renderers/MarkdownLink.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@follow/components/ui/button/index.js"
 import { MagneticHoverEffect } from "@follow/components/ui/effect/MagneticHoverEffect.js"
 import type { LinkProps } from "@follow/components/ui/link/LinkWithTooltip.js"
 import {
@@ -7,7 +8,7 @@ import {
   TooltipTrigger,
 } from "@follow/components/ui/tooltip/index.jsx"
 import { useCorrectZIndex } from "@follow/components/ui/z-index/ctx.js"
-import { stopPropagation } from "@follow/utils"
+import { cn, stopPropagation } from "@follow/utils"
 import { use, useCallback } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -16,7 +17,7 @@ import { copyToClipboard } from "~/lib/clipboard"
 
 import { MarkdownRenderActionContext } from "../context"
 
-export const MarkdownLink = (props: LinkProps) => {
+export const MarkdownLink: Component<LinkProps> = (props) => {
   const { transformUrl, isAudio, ensureAndRenderTimeStamp } = use(MarkdownRenderActionContext)
   const { t } = useTranslation()
 
@@ -51,7 +52,7 @@ export const MarkdownLink = (props: LinkProps) => {
         <MagneticHoverEffect
           as="a"
           draggable="false"
-          className="text-text font-semibold no-underline"
+          className={cn("text-text font-semibold no-underline", props.className)}
           href={populatedFullHref}
           title={props.title}
           target="_blank"
@@ -68,14 +69,23 @@ export const MarkdownLink = (props: LinkProps) => {
       {!!populatedFullHref && (
         <TooltipPortal>
           <TooltipContent align="start" className="break-all" style={{ zIndex }} side="bottom">
-            <span>{populatedFullHref}</span>
-            <button
-              type="button"
-              className="text-accent ml-2 cursor-pointer"
-              onClick={handleCopyLink}
+            <a
+              className="follow-link--underline"
+              href={populatedFullHref}
+              target="_blank"
+              rel="noreferrer"
             >
-              {t("share.copy_link")}
-            </button>
+              {populatedFullHref}
+            </a>
+
+            <Button
+              onClick={handleCopyLink}
+              buttonClassName="p-1 cursor-link"
+              variant={"ghost"}
+              aria-label={t("share.copy_link")}
+            >
+              <i className="i-mgc-copy-2-cute-re ml-1 size-3" />
+            </Button>
           </TooltipContent>
         </TooltipPortal>
       )}
diff --git a/apps/desktop/layer/renderer/src/lib/parse-html.ts b/apps/desktop/layer/renderer/src/lib/parse-html.ts
index c11b5bf02..a353c581a 100644
--- a/apps/desktop/layer/renderer/src/lib/parse-html.ts
+++ b/apps/desktop/layer/renderer/src/lib/parse-html.ts
@@ -35,7 +35,7 @@ export const parseHtml = (
     components: {
       a: ({ node, ...props }) => {
         // markInlineImage(node)
-        return createElement(MarkdownLink, { ...props } as any)
+        return createElement(MarkdownLink, { ...props, className: "text-accent" } as any)
       },
       img: Img,