cleanup: separate info and description

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)`
+export const Info: React.FC = ({ children }) => (
-  margin-bottom: 0;
+  <StyledText type="tertiary" size="xsmall">
-  padding-top: 2px;
+    {children}
-`;
+  </StyledText>
+);
 
-export const Summary = styled.div`
+export const DescriptionContainer = styled.div`
-  margin-top: 8px;
+  margin-top: 0.5em;
 `;

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>

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">
+        <Info>{info}</Info>
-          {description}
+        <DescriptionContainer>
-        </Description>
-        <Summary>
           <React.Suspense fallback={<div />}>
-            <Editor key={id} defaultValue={summary} embedsDisabled readOnly />
+            <Editor
+              key={id}
+              defaultValue={description}
+              embedsDisabled
+              readOnly
+            />
           </React.Suspense>
-        </Summary>
+        </DescriptionContainer>
       </Flex>
     </Preview>
   );

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 */
+  /** Info about mentioned user's recent activity */
-  description: string;
+  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">
+          <Info>{info}</Info>
-            {description}
-          </Description>
         </Flex>
       </Flex>
     </Preview>

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),
     },
   };
 }

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}`,
     },
   };
 }

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>;
 };