feat: add tldr for trending topics

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

@@ -0,0 +1,34 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+import { BaseModal } from '~/components/Modal'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { useModal } from '~/stores/useModalStore'
+
+type Props = {
+  text: string
+  onClose: () => void
+}
+
+export const BriefDescription: FC<Props> = ({ text, onClose }) => {
+  const { close } = useModal('briefDescription')
+
+  const handleClose = () => {
+    onClose()
+    close()
+  }
+
+  return (
+    <BaseModal id="briefDescription" kind="regular" onClose={handleClose} preventOutsideClose>
+      <Flex py={16}>
+        <StyledText>{text}</StyledText>
+      </Flex>
+    </BaseModal>
+  )
+}
+
+const StyledText = styled(Text)`
+  font-size: 18px;
+  font-weight: 400;
+  font-family: 'Barlow';
+`

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

@@ -1,4 +1,4 @@
-import { Skeleton } from '@mui/material'
+import { Button, Skeleton } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
@@ -7,8 +7,10 @@ import SentimentDataIcon from '~/components/Icons/SentimentDataIcon'
 import { Flex } from '~/components/common/Flex'
 import { getTrends } from '~/network/fetchGraphData'
 import { useDataStore } from '~/stores/useDataStore'
+import { useModal } from '~/stores/useModalStore'
 import { Trending as TrendingType } from '~/types'
 import { colors } from '~/utils/colors'
+import { BriefDescription } from './BriefDescriptionModal'
 
 const TRENDING_TOPICS = ['Drivechain', 'Ordinals', 'L402', 'Nostr', 'AI']
 
@@ -18,6 +20,8 @@ type Props = {
 
 export const Trending = ({ onSubmit }: Props) => {
   const [loading, setLoading] = useState(false)
+  const [briefDescription, setBriefDescription] = useState('')
+  const { open } = useModal('briefDescription')
 
   const [trendingTopics, setTrendingTopics] = useDataStore((s) => [s.trendingTopics, s.setTrendingTopics])
 
@@ -31,10 +35,10 @@ export const Trending = ({ onSubmit }: Props) => {
         const res = await getTrends()
 
         if (res.length) {
-          setTrendingTopics(res.map((i: TrendingType) => i.topic))
+          setTrendingTopics(res)
         }
       } catch (err) {
-        setTrendingTopics(TRENDING_TOPICS)
+        setTrendingTopics(TRENDING_TOPICS.map((i) => ({ topic: i, count: 0 })))
       } finally {
         setLoading(false)
       }
@@ -50,6 +54,15 @@ export const Trending = ({ onSubmit }: Props) => {
     onSubmit?.()
   }
 
+  const showModal = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, trending: TrendingType) => {
+    e.stopPropagation()
+
+    if (trending?.tldr) {
+      setBriefDescription(trending.tldr)
+      open()
+    }
+  }
+
   return (
     <Wrapper>
       <div className="heading">
@@ -70,13 +83,22 @@ export const Trending = ({ onSubmit }: Props) => {
         ) : (
           <>
             {trendingTopics.map((i) => (
-              <Flex key={i} className="list-item" onClick={() => selectTrending(i)}>
-                #{i}
+              <Flex
+                key={i.topic}
+                align="center"
+                className="list-item"
+                direction="row"
+                justify="space-between"
+                onClick={() => selectTrending(i.topic)}
+              >
+                <span>#{i.topic}</span>
+                {i.tldr && <Button onClick={(e) => showModal(e, i)}>TLDR</Button>}
               </Flex>
             ))}
           </>
         )}
       </ul>
+      <BriefDescription onClose={() => setBriefDescription('')} text={briefDescription} />
     </Wrapper>
   )
 }

src/stores/useDataStore/index.ts

@@ -2,7 +2,7 @@ import create from 'zustand'
 import { nodesAreRelatives } from '~/components/Universe/constants'
 import { isChileGraph } from '~/constants'
 import { fetchGraphData } from '~/network/fetchGraphData'
-import { GraphData, NodeExtended, NodeType, Sources } from '~/types'
+import { GraphData, NodeExtended, NodeType, Sources, Trending } from '~/types'
 import { saveSearchTerm } from '~/utils/relayHelper/index'
 
 export type GraphStyle = 'split' | 'force' | 'sphere' | 'earth'
@@ -32,9 +32,9 @@ type DataStore = {
   showTeachMe: boolean
   hideNodeDetails: boolean
   sidebarFilter: string
-  trendingTopics: string[]
+  trendingTopics: Trending[]
 
-  setTrendingTopics: (trendingTopics: string[]) => void
+  setTrendingTopics: (trendingTopics: Trending[]) => void
   setSidebarFilter: (filter: string) => void
   setScrollEventsDisabled: (scrollEventsDisabled: boolean) => void
   setCategoryFilter: (categoryFilter: NodeType | null) => void

src/stores/useModalStore/index.ts

@@ -7,6 +7,7 @@ export type AvailableModals =
   | 'editTopic'
   | 'addSource'
   | 'mergeTopic'
+  | 'briefDescription'
 
 type ModalStore = {
   currentModals: Record<AvailableModals, boolean>
@@ -23,6 +24,7 @@ const defaultData = {
     editTopic: false,
     addSource: false,
     mergeTopic: false,
+    briefDescription: false,
   },
 }
 

src/types/index.ts

@@ -145,6 +145,7 @@ export type Sentiment = {
 export type Trending = {
   count: number
   topic: string
+  tldr?: string
 }
 
 export type Sources = {