From e15fa404e5fbbad26fac3668501874bd892f0a6c Mon Sep 17 00:00:00 2001
From: Bullish Bear <136302410+foodstr@users.noreply.github.com>
Date: Sun, 9 Jul 2023 18:22:09 +0800
Subject: [PATCH] render URL inline (#56)

---
 UI/message-panel.tsx | 18 +++++++++++++++---
 UI/style/colors.ts   |  1 +
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/UI/message-panel.tsx b/UI/message-panel.tsx
index 24a7136..2540126 100644
--- a/UI/message-panel.tsx
+++ b/UI/message-panel.tsx
@@ -24,6 +24,7 @@ import { Database } from "../database.ts";
 import {
     DividerBackgroundColor,
     HoverButtonBackgroudColor,
+    LinkColor,
     PrimaryBackgroundColor,
     PrimaryTextColor,
 } from "./style/colors.ts";
@@ -451,13 +452,21 @@ export function ParseMessageContent(
         return <img src={message.content} />;
     }
 
-    const vnode = [<p>{message.content}</p>];
+    const vnode = [];
+    let start = 0;
     for (const item of parseContent(message.content)) {
         const itemStr = message.content.slice(item.start, item.end + 1);
+        vnode.push(message.content.slice(start, item.start));
         switch (item.type) {
             case "url":
                 if (urlIsImage(itemStr)) {
                     vnode.push(<img src={itemStr} />);
+                } else {
+                    vnode.push(
+                        <a target="_blank" class={tw`hover:underline text-[${LinkColor}]`} href={itemStr}>
+                            {itemStr}
+                        </a>,
+                    );
                 }
                 break;
             case "npub":
@@ -485,7 +494,10 @@ export function ParseMessageContent(
                 // todo
                 break;
         }
+
+        start = item.end + 1;
     }
+    vnode.push(message.content.slice(start));
 
     return vnode;
 }
@@ -493,7 +505,7 @@ export function ParseMessageContent(
 function ProfileCard(profile: ProfileData, pubkey: PublicKey, eventEmitter: EventEmitter<ViewUserDetail>) {
     return (
         <div
-            class={tw`px-4 py-2 border-2 border-[${PrimaryTextColor}4D] rounded-lg hover:bg-[${HoverButtonBackgroudColor}] cursor-pointer w-fit`}
+            class={tw`px-4 py-2 border-2 border-[${PrimaryTextColor}4D] rounded-lg hover:bg-[${HoverButtonBackgroudColor}] cursor-pointer py-1`}
             onClick={() => {
                 eventEmitter.emit({
                     type: "ViewUserDetail",
@@ -515,7 +527,7 @@ function ProfileCard(profile: ProfileData, pubkey: PublicKey, eventEmitter: Even
 
 function NoteCard(content: string) {
     return (
-        <div class={tw`px-4 py-2 border-2 border-[${PrimaryTextColor}4D] rounded-lg`}>
+        <div class={tw`px-4 py-2 border-2 border-[${PrimaryTextColor}4D] rounded-lg  py-1`}>
             {content}
         </div>
     );
diff --git a/UI/style/colors.ts b/UI/style/colors.ts
index 159c8f0..ae037dc 100644
--- a/UI/style/colors.ts
+++ b/UI/style/colors.ts
@@ -11,3 +11,4 @@ export const SuccessColor = "#22C55E";
 export const WarnColor = "#EAB308";
 export const ErrorColor = "#EF4444";
 export const TitleIconColor = "#FF772B";
+export const LinkColor = "#24ADEB";