diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css index a7205fdc..7d948925 100644 --- a/src/components/catalog-row/catalog-row.module.css +++ b/src/components/catalog-row/catalog-row.module.css @@ -21,6 +21,31 @@ display: flex; justify-content: center; align-items: center; + position: relative; +} + +.threadIcons { + position: absolute; + top: 2px; + right: 16px; +} + +.threadIcons span { + width: 16px; + height: 16px; + display: inline-block; + border: none; + background-repeat: no-repeat; + background-position: center; + image-rendering: pixelated; +} + +.threadIcons .stickyIcon { + background-image: url("/public/assets/icons/sticky.gif"); +} + +.threadIcons .closedIcon { + background-image: url("/public/assets/icons/closed.gif"); } .mediaWrapper { diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx index 10242c06..b645a26a 100644 --- a/src/components/catalog-row/catalog-row.tsx +++ b/src/components/catalog-row/catalog-row.tsx @@ -1,9 +1,10 @@ +import { Link } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; import { Comment } from '@plebbit/plebbit-react-hooks'; import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; import styles from './catalog-row.module.css'; -import { Link } from 'react-router-dom'; const CatalogPostMedia = ({ commentMediaInfo, link }: { commentMediaInfo: any; link: string }) => { const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {}; @@ -28,7 +29,8 @@ const CatalogPostMedia = ({ commentMediaInfo, link }: { commentMediaInfo: any; l }; const CatalogPost = ({ post }: { post: Comment }) => { - const { cid, content, isDescription, isRules, link, linkHeight, linkWidth, replyCount, subplebbitAddress, title } = post || {}; + const { t } = useTranslation(); + const { cid, content, isDescription, isRules, link, linkHeight, linkWidth, locked, pinned, replyCount, subplebbitAddress, title } = post || {}; const commentMediaInfo = getCommentMediaInfo(post); const { type } = commentMediaInfo || {}; const hasThumbnail = getHasThumbnail(commentMediaInfo, link); @@ -50,21 +52,36 @@ const CatalogPost = ({ post }: { post: Comment }) => { displayHeight = '75px'; } + if (isDescription || isRules) { + displayWidth = 'unset'; + displayHeight = 'unset'; + } + const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties; const postLink = `/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`; const linkCount = useCountLinksInReplies(post); + const threadIcons = ( +