Profile: Show links without preview in the list (#6450)

src/components/common/WebLink.tsx

@@ -1,4 +1,4 @@
-import { memo } from '../../lib/teact/teact';
+import { memo, useMemo } from '../../lib/teact/teact';
 import { withGlobal } from '../../global';
 
 import type { ApiMessage, ApiWebPage } from '../../api/types';
@@ -50,41 +50,64 @@ const WebLink = ({
   const lang = useLang();
   const oldLang = useOldLang();
 
+  const handleMessageClick = useLastCallback(() => {
+    onMessageClick(message);
+  });
+
   let linkData: ApiWebPageWithFormatted | undefined = webPage;
 
   if (!linkData) {
     const link = getFirstLinkInMessage(message);
     if (link) {
-      const { url, domain } = link;
+      const { url: linkUrl, domain } = link;
 
       linkData = {
+        mediaType: 'webpage',
+        webpageType: 'full',
+        id: '',
+        displayUrl: linkUrl,
         siteName: domain.replace(/^www./, ''),
-        url: url.includes('://') ? url : url.includes('@') ? `mailto:${url}` : `http://${url}`,
-        formattedDescription: getMessageTextWithFallback(lang, message)?.text !== url
+        url: linkUrl.includes('://') ? linkUrl : linkUrl.includes('@') ? `mailto:${linkUrl}` : `http://${linkUrl}`,
+        formattedDescription: getMessageTextWithFallback(lang, message)?.text !== linkUrl
           ? renderMessageSummary(lang, message, undefined, undefined, MAX_TEXT_LENGTH)
           : undefined,
-      } as ApiWebPageWithFormatted;
+      } satisfies ApiWebPageWithFormatted;
     }
   }
 
-  const handleMessageClick = useLastCallback(() => {
-    onMessageClick(message);
-  });
+  const fullLinkData = linkData?.webpageType === 'full' ? linkData : undefined;
 
-  if (linkData?.webpageType !== 'full') {
-    return undefined;
-  }
+  const { url } = linkData || {};
+
+  const fallbackDescription = useMemo(() => {
+    return getMessageTextWithFallback(lang, message)?.text !== url
+      ? renderMessageSummary(lang, message, undefined, undefined, MAX_TEXT_LENGTH)
+      : undefined;
+  }, [lang, message, url]);
 
   const {
     siteName,
-    url,
     displayUrl,
     title,
     description,
-    formattedDescription,
+    formattedDescription = fallbackDescription,
     photo,
     video,
-  } = linkData;
+  } = fullLinkData || {};
+
+  const siteTitle = useMemo(() => {
+    const text = title || siteName || displayUrl;
+    if (text) return text;
+    if (!url) return '';
+    try {
+      const parsedUrl = new URL(url);
+      return parsedUrl.hostname;
+    } catch (e) {
+      return '';
+    }
+  }, [title, siteName, displayUrl, url]);
+
+  if (!url) return undefined;
 
   const truncatedDescription = !senderTitle && description && trimText(description, MAX_TEXT_LENGTH);
 
@@ -93,12 +116,12 @@ const WebLink = ({
     (!photo && !video) && 'without-media',
   );
 
-  const safeLinkContent = url.replace('mailto:', '') || displayUrl;
+  const safeLinkContent = displayUrl || url.replace('mailto:', '');
 
   return (
     <div
       className={className}
-      data-initial={(siteName || displayUrl)[0]}
+      data-initial={siteTitle[0]}
       dir={lang.isRtl ? 'rtl' : undefined}
     >
       {photo && (
@@ -106,7 +129,7 @@ const WebLink = ({
       )}
       <div className="content">
         <Link isRtl={lang.isRtl} className="site-title" onClick={handleMessageClick}>
-          {renderText(title || siteName || displayUrl)}
+          {renderText(siteTitle)}
         </Link>
         {(truncatedDescription || formattedDescription) && (
           <Link isRtl={lang.isRtl} className="site-description" onClick={handleMessageClick}>