From 94e1c534ca5a574ee58d868075626db01c4d6e89 Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Sat, 8 Nov 2025 00:19:30 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20add=20link=20to=20read=20more?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ProductUpdates.tsx | 33 ++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/ProductUpdates.tsx b/src/components/ProductUpdates.tsx
index 6d8a39f6..6c56d69d 100644
--- a/src/components/ProductUpdates.tsx
+++ b/src/components/ProductUpdates.tsx
@@ -9,6 +9,7 @@ import {
     ArrowRight,
     BellIcon,
     ChevronRightIcon,
+    ExternalLinkIcon,
     RocketIcon,
     XIcon
 } from "lucide-react";
@@ -181,9 +182,14 @@ function ProductUpdatesListPopup({
                             <BellIcon className="flex-none size-4" />
                         </div>
                         <div className="flex flex-col gap-2">
-                            <p className="font-medium text-start">
-                                {t("productUpdateWhatsNew")}
-                            </p>
+                            <div className="flex justify-between items-center">
+                                <p className="font-medium text-start">
+                                    {t("productUpdateWhatsNew")}
+                                </p>
+                                <div className="p-1 cursor-pointer">
+                                    <ChevronRightIcon className="size-4 flex-none" />
+                                </div>
+                            </div>
                             <small
                                 className={cn(
                                     "text-start text-muted-foreground",
@@ -194,9 +200,6 @@ function ProductUpdatesListPopup({
                                 {updates[0]?.contents}
                             </small>
                         </div>
-                        <div className="p-1 cursor-pointer">
-                            <ChevronRightIcon className="size-4 flex-none" />
-                        </div>
                     </div>
                 </PopoverTrigger>
             </Transition>
@@ -267,9 +270,21 @@ function ProductUpdatesListPopup({
                                     </Tooltip>
                                 </TooltipProvider>
                             </div>
-                            <small className="text-muted-foreground">
-                                {update.contents}
-                            </small>
+                            <div className="flex flex-col gap-0.5">
+                                <small className="text-muted-foreground">
+                                    {update.contents}{" "}
+                                    {update.link && (
+                                        <a
+                                            href={update.link}
+                                            target="_blank"
+                                            className="underline text-foreground inline-flex flex-wrap items-center gap-1 text-xs"
+                                        >
+                                            Read more{" "}
+                                            <ExternalLinkIcon className="size-3 flex-none" />
+                                        </a>
+                                    )}
+                                </small>
+                            </div>
                             <time
                                 dateTime={update.publishedAt.toLocaleString()}
                                 className="text-xs text-muted-foreground"