Sidebar show type

src/components/App/SideBar/Relevance/Episode/index.tsx

@@ -80,13 +80,17 @@ export const Episode = ({
   const selectedTimestamp = useDataStore((s) => s.selectedTimestamp)
   const isSelected = !!(selectedTimestamp && selectedTimestamp.id === id)
 
+  const description = type === 'show' ? showTitle : episodeTitle;
+  const subtitle = type === 'show' ? '' : showTitle;
+
   return (
     <EpisodeWrapper className={className} isSelected={isSelected} onClick={onClick}>
       {type !== 'tweet' && type !== 'person' && type !== 'guest' && (
         <Flex direction="row">
           {!isSelectedView && (
             <Flex align="center" pr={16}>
               <Avatar size={64} src={imageUrl} type={type || ''} />
+              <Avatar size={64} src={imageUrl} type={type || ''} />
             </Flex>
           )}
 
@@ -102,10 +106,10 @@ export const Episode = ({
               ) : null}
             </Flex>
 
-            <Description data-testid="episode-description">{episodeTitle}</Description>
+            <Description data-testid="episode-description">{description}</Description>
             <Flex align="center" direction="row" justify="flex-start">
               {Boolean(date) && <Date>{moment.unix(date).fromNow()}</Date>}
-              {Boolean(showTitle) && <Title>{showTitle}</Title>}
+              {Boolean(subtitle) && <Title>{subtitle}</Title>}
               {!isSelectedView && boostCount > 0 && (
                 <Flex style={{ marginLeft: 'auto' }}>
                   <BoostAmt amt={boostCount} />
@@ -180,6 +184,22 @@ export const Title = styled(Date)`
     flex-shrink: 0;
     height: 4px;
     background: ${colors.GRAY6};
+
+    margin-top: 20px;
+
+  }
+
+  &.is-show {
+    margin: 20px 0px;
+    padding: 0px;
+    color: var(--Primary-Text, #FFF);
+    leading-trim: both;
+    text-edge: cap;
+    font-family: Barlow;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 17px; /* 130.769% */
   }
 `
 

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

@@ -1,8 +1,8 @@
 import { Button } from '@mui/material'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components'
-import { Flex } from '~/components/common/Flex'
 import { ScrollView } from '~/components/ScrollView'
+import { Flex } from '~/components/common/Flex'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore, useFilteredNodes } from '~/stores/useDataStore'
 import { NodeExtended } from '~/types'

src/components/Icons/DefaultShowIcon.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable */
+import React from 'react'
+
+const DefaultShowIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="1em" height="1em" viewBox="0 0 34 34" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_2777_4506" maskUnits="userSpaceOnUse" x="0" y="0" width="34" height="34">
+      <rect width="1em" height="1em" fill="currentColor" />
+    </mask>
+    <g mask="url(#mask0_2777_4506)">
+      <mask id="mask1_2777_4506" maskUnits="userSpaceOnUse" x="0" y="0" width="34" height="34">
+        <rect width="1em" height="1em" fill="currentColor" />
+      </mask>
+      <g mask="url(#mask1_2777_4506)">
+        <path
+          d="M8.25212 29.988L10.5542 20.0359L2.83337 13.3421L13.0334 12.4567L17 3.07129L20.9667 12.4567L31.1667 13.3421L23.4459 20.0359L25.748 29.988L17 24.7109L8.25212 29.988Z"
+          fill="currentColor"
+        />
+      </g>
+    </g>
+  </svg>
+)
+
+export default DefaultShowIcon

src/components/common/Avatar/index.tsx

@@ -20,6 +20,7 @@ const TypesMapper: TTypeMapper = {
   person: 'person',
   guest: 'person',
   twitter_space: 'audio',
+  show: 'show'
 }
 
 export const Avatar = styled.div<Props>`

src/components/common/TypeBadge/index.tsx

@@ -14,7 +14,7 @@ type EpisodeTypeImage = {
 const EpisodeTypeImages: EpisodeTypeImage = {
   podcast: { img: 'audio_badge.svg', label: 'podcast' },
   clip: { img: 'audio_badge.svg', label: 'clip' },
-  show: { img: 'audio_badge.svg', label: 'show' },
+  show: { img: 'show_badge.svg', label: 'show' },
   tweet: { img: 'twitter_badge.svg', label: 'tweet' },
   twitter_space: { img: 'audio_badge.svg', label: 'clip' },
   youtube: { img: 'video_badge.svg', label: 'clip' },