Merge pull request #649 from stakwork/feature/637

feat: add formating for tldr

package.json

@@ -41,6 +41,7 @@
     "react-icons": "^4.8.0",
     "react-input-mask": "3.0.0-alpha.2",
     "react-is": "^18.2.0",
+    "react-markdown": "^9.0.1",
     "react-player": "^2.11.2",
     "react-spinners": "^0.13.3",
     "react-toastify": "^8.2.0",

src/components/App/SideBar/Trending/BriefDescriptionModal/index.tsx

@@ -1,4 +1,5 @@
-import { FC } from 'react'
+import { FC, useCallback, useEffect } from 'react'
+import Markdown from 'react-markdown'
 import styled from 'styled-components'
 import { BaseModal } from '~/components/Modal'
 import { Flex } from '~/components/common/Flex'
@@ -8,21 +9,33 @@ import { useModal } from '~/stores/useModalStore'
 type Props = {
   text: string
   onClose: () => void
+  topic: string
 }
 
-export const BriefDescription: FC<Props> = ({ text, onClose }) => {
+export const BriefDescription: FC<Props> = ({ text, onClose, topic }) => {
   const { close } = useModal('briefDescription')
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     onClose()
     close()
-  }
+  }, [onClose, close])
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleClose)
+
+    return () => {
+      window.removeEventListener('keydown', handleClose)
+    }
+  }, [handleClose])
 
   return (
-    <BaseModal id="briefDescription" kind="regular" onClose={handleClose} preventOutsideClose>
+    <BaseModal id="briefDescription" kind="regular" onClose={handleClose}>
+      <Title>{topic}</Title>
       <ScrollableContent>
-        <Flex py={16}>
-          <StyledText>{text}</StyledText>
+        <Flex>
+          <StyledText>
+            <Markdown>{text}</Markdown>
+          </StyledText>
         </Flex>
       </ScrollableContent>
     </BaseModal>
@@ -32,10 +45,19 @@ export const BriefDescription: FC<Props> = ({ text, onClose }) => {
 const ScrollableContent = styled.div`
   max-height: 300px;
   overflow-y: auto;
+  margin: 8px 0;
 `
 
 const StyledText = styled(Text)`
   font-size: 18px;
   font-weight: 400;
   font-family: 'Barlow';
+  * {
+    all: revert;
+  }
+`
+
+const Title = styled(Text)`
+  font-weight: 600;
+  font-size: 20px;
 `

src/components/App/SideBar/Trending/index.tsx

@@ -1,6 +1,7 @@
 import { Button, Skeleton } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
+import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import PlusIcon from '~/components/Icons/PlusIcon'
 import { Flex } from '~/components/common/Flex'
@@ -10,7 +11,6 @@ import { useModal } from '~/stores/useModalStore'
 import { Trending as TrendingType } from '~/types'
 import { colors } from '~/utils/colors'
 import { BriefDescription } from './BriefDescriptionModal'
-import { ClipLoader } from 'react-spinners'
 
 const TRENDING_TOPICS = ['Drivechain', 'Ordinals', 'L402', 'Nostr', 'AI']
 
@@ -22,6 +22,8 @@ export const Trending = ({ onSubmit }: Props) => {
   const { open: openContentAddModal } = useModal('addContent')
   const [loading, setLoading] = useState(false)
   const [briefDescription, setBriefDescription] = useState('')
+  const [selectedTopic, setSelectedTopic] = useState('')
+
   const { open } = useModal('briefDescription')
 
   const [trendingTopics, setTrendingTopics] = useDataStore((s) => [s.trendingTopics, s.setTrendingTopics])
@@ -57,13 +59,20 @@ export const Trending = ({ onSubmit }: Props) => {
 
   const showModal = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, trending: TrendingType) => {
     e.stopPropagation()
+    e.currentTarget.blur()
 
     if (trending?.tldr) {
       setBriefDescription(trending.tldr)
+      setSelectedTopic(trending.topic)
       open()
     }
   }
 
+  const hideModal = () => {
+    setBriefDescription('')
+    setSelectedTopic('')
+  }
+
   return (
     <Wrapper>
       <div>
@@ -114,7 +123,7 @@ export const Trending = ({ onSubmit }: Props) => {
           </ul>
         )}
       </div>
-      <BriefDescription onClose={() => setBriefDescription('')} text={briefDescription} />
+      <BriefDescription onClose={hideModal} text={briefDescription} topic={selectedTopic} />
     </Wrapper>
   )
 }