From b3d8bd1cc8e22699810e551373466ee874cb71c6 Mon Sep 17 00:00:00 2001
From: Apoorv Mishra <apoorvmishra101092@gmail.com>
Date: Mon, 24 Jul 2023 20:42:59 +0530
Subject: [PATCH] cleanup: separate info and description

---
 .../{Components.ts => Components.tsx}         | 21 ++++++++++------
 app/components/HoverPreview/HoverPreview.tsx  |  4 +--
 .../HoverPreview/HoverPreviewDocument.tsx     | 25 +++++++++++--------
 .../HoverPreview/HoverPreviewMention.tsx      | 12 ++++-----
 server/presenters/unfurls/document.ts         |  4 +--
 server/presenters/unfurls/mention.ts          |  2 +-
 shared/types.ts                               |  2 +-
 7 files changed, 39 insertions(+), 31 deletions(-)
 rename app/components/HoverPreview/{Components.ts => Components.tsx} (56%)

diff --git a/app/components/HoverPreview/Components.ts b/app/components/HoverPreview/Components.tsx
similarity index 56%
rename from app/components/HoverPreview/Components.ts
rename to app/components/HoverPreview/Components.tsx
index 5f648c837..c42856487 100644
--- a/app/components/HoverPreview/Components.ts
+++ b/app/components/HoverPreview/Components.tsx
@@ -1,8 +1,14 @@
+import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import Text from "~/components/Text";
 
+const StyledText = styled(Text)`
+  margin-bottom: 0;
+  padding-top: 0.125em;
+`;
+
 export const Preview = styled(Link)`
   cursor: var(--pointer);
   margin-bottom: 0;
@@ -11,15 +17,16 @@ export const Preview = styled(Link)`
 
 export const Title = styled.h2`
   font-size: 1.25em;
-  margin: 2px 0 0 0;
+  margin: 0.125em 0 0 0;
   color: ${s("text")};
 `;
 
-export const Description = styled(Text)`
-  margin-bottom: 0;
-  padding-top: 2px;
-`;
+export const Info: React.FC = ({ children }) => (
+  <StyledText type="tertiary" size="xsmall">
+    {children}
+  </StyledText>
+);
 
-export const Summary = styled.div`
-  margin-top: 8px;
+export const DescriptionContainer = styled.div`
+  margin-top: 0.5em;
 `;
diff --git a/app/components/HoverPreview/HoverPreview.tsx b/app/components/HoverPreview/HoverPreview.tsx
index b737d0df8..fbed9ec93 100644
--- a/app/components/HoverPreview/HoverPreview.tsx
+++ b/app/components/HoverPreview/HoverPreview.tsx
@@ -156,7 +156,7 @@ function HoverPreviewInternal({ element, onClose }: Props) {
                     <HoverPreviewMention
                       url={data.thumbnailUrl}
                       title={data.title}
-                      description={data.description}
+                      info={data.meta.info}
                       color={data.meta.color}
                     />
                   ) : data.type === UnfurlType.Document ? (
@@ -165,7 +165,7 @@ function HoverPreviewInternal({ element, onClose }: Props) {
                       url={data.url}
                       title={data.title}
                       description={data.description}
-                      summary={data.meta.summary}
+                      info={data.meta.info}
                     />
                   ) : null}
                 </CardContent>
diff --git a/app/components/HoverPreview/HoverPreviewDocument.tsx b/app/components/HoverPreview/HoverPreviewDocument.tsx
index a2e7ecc8b..7e171ace9 100644
--- a/app/components/HoverPreview/HoverPreviewDocument.tsx
+++ b/app/components/HoverPreview/HoverPreviewDocument.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
-import { Preview, Title, Description, Summary } from "./Components";
+import { Preview, Title, Info, DescriptionContainer } from "./Components";
 
 type Props = {
   /** Document id associated with the editor, if any */
@@ -10,25 +10,28 @@ type Props = {
   url: string;
   /** Title for the preview card */
   title: string;
-  /** Description about recent activity on document */
+  /** Info about last activity on the document */
+  info: string;
+  /** Text preview of document content */
   description: string;
-  /** Summary of document content */
-  summary: string;
 };
 
-function HoverPreviewDocument({ id, url, title, description, summary }: Props) {
+function HoverPreviewDocument({ id, url, title, info, description }: Props) {
   return (
     <Preview to={url}>
       <Flex column>
         <Title>{title}</Title>
-        <Description type="tertiary" size="xsmall">
-          {description}
-        </Description>
-        <Summary>
+        <Info>{info}</Info>
+        <DescriptionContainer>
           <React.Suspense fallback={<div />}>
-            <Editor key={id} defaultValue={summary} embedsDisabled readOnly />
+            <Editor
+              key={id}
+              defaultValue={description}
+              embedsDisabled
+              readOnly
+            />
           </React.Suspense>
-        </Summary>
+        </DescriptionContainer>
       </Flex>
     </Preview>
   );
diff --git a/app/components/HoverPreview/HoverPreviewMention.tsx b/app/components/HoverPreview/HoverPreviewMention.tsx
index b21cf19de..f30d26f6e 100644
--- a/app/components/HoverPreview/HoverPreviewMention.tsx
+++ b/app/components/HoverPreview/HoverPreviewMention.tsx
@@ -2,20 +2,20 @@ import * as React from "react";
 import Avatar from "~/components/Avatar";
 import { AvatarSize } from "~/components/Avatar/Avatar";
 import Flex from "~/components/Flex";
-import { Preview, Title, Description } from "./Components";
+import { Preview, Title, Info } from "./Components";
 
 type Props = {
   /** Resource url, avatar url in case of user mention */
   url: string;
   /** Title for the preview card*/
   title: string;
-  /** Description about mentioned user's recent activity */
-  description: string;
+  /** Info about mentioned user's recent activity */
+  info: string;
   /** Used for avatar's background color in absence of avatar url */
   color: string;
 };
 
-function HoverPreviewMention({ url, title, description, color }: Props) {
+function HoverPreviewMention({ url, title, info, color }: Props) {
   return (
     <Preview to="">
       <Flex gap={12}>
@@ -29,9 +29,7 @@ function HoverPreviewMention({ url, title, description, color }: Props) {
         />
         <Flex column>
           <Title>{title}</Title>
-          <Description type="tertiary" size="xsmall">
-            {description}
-          </Description>
+          <Info>{info}</Info>
         </Flex>
       </Flex>
     </Preview>
diff --git a/server/presenters/unfurls/document.ts b/server/presenters/unfurls/document.ts
index 5cdbc264b..7e70bc7a5 100644
--- a/server/presenters/unfurls/document.ts
+++ b/server/presenters/unfurls/document.ts
@@ -10,10 +10,10 @@ function presentDocument(
     url: document.url,
     type: UnfurlType.Document,
     title: document.titleWithDefault,
-    description: presentLastActivityInfoFor(document, viewer),
+    description: document.getSummary(),
     meta: {
       id: document.id,
-      summary: document.getSummary(),
+      info: presentLastActivityInfoFor(document, viewer),
     },
   };
 }
diff --git a/server/presenters/unfurls/mention.ts b/server/presenters/unfurls/mention.ts
index 5b95f2dc0..abeb9042f 100644
--- a/server/presenters/unfurls/mention.ts
+++ b/server/presenters/unfurls/mention.ts
@@ -12,11 +12,11 @@ async function presentMention(
   return {
     type: UnfurlType.Mention,
     title: user.name,
-    description: `${lastOnlineInfo} • ${lastViewedInfo}`,
     thumbnailUrl: user.avatarUrl,
     meta: {
       id: user.id,
       color: user.color,
+      info: `${lastOnlineInfo} • ${lastViewedInfo}`,
     },
   };
 }
diff --git a/shared/types.ts b/shared/types.ts
index 18b02bf2e..a01325862 100644
--- a/shared/types.ts
+++ b/shared/types.ts
@@ -220,7 +220,7 @@ export type Unfurl<T = OEmbedType> = {
   url?: string;
   type: T;
   title: string;
-  description: string;
+  description?: string;
   thumbnailUrl?: string | null;
   meta?: Record<string, string>;
 };