Show smart media

apps/web/src/components/Post/FullPost.tsx

@@ -5,6 +5,7 @@ import {
   getBlockedByMeMessage,
   getBlockedMeMessage
 } from "@/helpers/getBlockedMessage";
+import type { SmartMedia, SmartMediaLight } from "@/types/smart-media";
 import { QueueListIcon } from "@heroicons/react/24/outline";
 import { isRepost } from "@hey/helpers/postHelpers";
 import type { AnyPostFragment } from "@hey/indexer";
@@ -21,9 +22,10 @@ import PostType from "./Type";
 interface FullPostProps {
   hasHiddenComments: boolean;
   post: AnyPostFragment;
+  smartMedia?: SmartMedia | SmartMediaLight | null;
 }
 
-const FullPost = ({ hasHiddenComments, post }: FullPostProps) => {
+const FullPost = ({ hasHiddenComments, post, smartMedia }: FullPostProps) => {
   const { setShowHiddenComments, showHiddenComments } =
     useHiddenCommentFeedStore();
 
@@ -47,7 +49,7 @@ const FullPost = ({ hasHiddenComments, post }: FullPostProps) => {
       <div className="flex items-start gap-x-3">
         <PostAvatar post={post} />
         <div className="w-[calc(100%-55px)]">
-          <PostHeader post={targetPost} />
+          <PostHeader post={targetPost} smartMedia={smartMedia} />
           {targetPost.isDeleted ? (
             <HiddenPost type={targetPost.__typename} />
           ) : (

apps/web/src/components/Post/PostAccount.tsx

@@ -21,9 +21,16 @@ interface PostAccountProps {
   group?: PostGroupInfoFragment;
   post: AnyPostFragment;
   timestamp: Date;
+  smartMediaCategoryFormatted?: string;
 }
 
-const PostAccount = ({ account, group, post, timestamp }: PostAccountProps) => {
+const PostAccount = ({
+  account,
+  group,
+  post,
+  timestamp,
+  smartMediaCategoryFormatted
+}: PostAccountProps) => {
   const CustomLink = ({ children }: { children: ReactNode }) => (
     <AccountLink
       className="outline-hidden hover:underline focus:underline"
@@ -41,7 +48,7 @@ const PostAccount = ({ account, group, post, timestamp }: PostAccountProps) => {
 
   return (
     <div className="flex flex-col">
-      <div className="flex flex-wrap items-center gap-x-1">
+      <div className="flex flex-wrap items-baseline gap-x-1">
         <CustomLink>
           <span className="font-semibold">{getAccount(account).name}</span>
         </CustomLink>
@@ -59,6 +66,12 @@ const PostAccount = ({ account, group, post, timestamp }: PostAccountProps) => {
             </PostLink>
           </span>
         ) : null}
+        {smartMediaCategoryFormatted ? (
+          <span className="text-gray-500 dark:text-gray-200">
+            <span className="mr-1">·</span>
+            <span className="text-xs ">{smartMediaCategoryFormatted}</span>
+          </span>
+        ) : null}
       </div>
       {group?.metadata ? (
         <Link

apps/web/src/components/Post/PostHeader.tsx

@@ -1,5 +1,6 @@
 import stopEventPropagation from "@/helpers/stopEventPropagation";
 import { usePostStore } from "@/store/non-persisted/post/usePostStore";
+import type { SmartMedia, SmartMediaLight } from "@/types/smart-media";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { isRepost } from "@hey/helpers/postHelpers";
 import type {
@@ -15,13 +16,15 @@ interface PostHeaderProps {
   isNew?: boolean;
   post: AnyPostFragment;
   quoted?: boolean;
+  smartMedia?: SmartMedia | SmartMediaLight | null;
 }
 
 const PostHeader = ({
   timelineItem,
   isNew = false,
   post,
-  quoted = false
+  quoted = false,
+  smartMedia
 }: PostHeaderProps) => {
   const { setQuotedPost } = usePostStore();
 
@@ -35,12 +38,15 @@ const PostHeader = ({
       className="flex w-full items-start justify-between"
       onClick={stopEventPropagation}
     >
-      <PostAccount
-        account={account}
-        group={targetPost.feed?.group as PostGroupInfoFragment}
-        post={targetPost}
-        timestamp={timestamp}
-      />
+      <div className="flex items-center gap-x-4">
+        <PostAccount
+          account={account}
+          group={targetPost.feed?.group as PostGroupInfoFragment}
+          post={targetPost}
+          timestamp={timestamp}
+          smartMediaCategoryFormatted={smartMedia?.category?.formatted}
+        />
+      </div>
       {!post.isDeleted && !quoted ? (
         <PostMenu post={targetPost} />
       ) : (

apps/web/src/components/Post/SinglePost.tsx

@@ -1,7 +1,9 @@
 import ActionType from "@/components/Home/Timeline/EventType";
 import PostWrapper from "@/components/Shared/Post/PostWrapper";
-import type { AnyPostFragment, TimelineItemFragment } from "@hey/indexer";
-import { memo } from "react";
+import cn from "@/helpers/cn";
+import { usePostSmartMedia } from "@/store/non-persisted/post/useSmartMediaStore";
+import type { AnyPostFragment, Post, TimelineItemFragment } from "@hey/indexer";
+import { memo, useEffect } from "react";
 import PostActions from "./Actions";
 import HiddenPost from "./HiddenPost";
 import PostAvatar from "./PostAvatar";
@@ -23,6 +25,11 @@ const SinglePost = ({
   showType = true
 }: SinglePostProps) => {
   const rootPost = timelineItem ? timelineItem?.primary : post;
+  const { smartMedia, fetchSmartMedia } = usePostSmartMedia(post.slug);
+
+  useEffect(() => {
+    if (!(post as Post).root) fetchSmartMedia(post as Post, false);
+  }, [post, fetchSmartMedia]);
 
   return (
     <PostWrapper className="cursor-pointer px-5 pt-4 pb-3" post={rootPost}>
@@ -34,7 +41,11 @@ const SinglePost = ({
       <div className="flex items-start gap-x-3">
         <PostAvatar timelineItem={timelineItem} post={rootPost} />
         <div className="w-[calc(100%-55px)]">
-          <PostHeader timelineItem={timelineItem} post={rootPost} />
+          <PostHeader
+            timelineItem={timelineItem}
+            post={rootPost}
+            smartMedia={smartMedia}
+          />
           {post.isDeleted ? (
             <HiddenPost type={post.__typename} />
           ) : (

apps/web/src/components/Post/index.tsx

@@ -8,20 +8,26 @@ import Footer from "@/components/Shared/Footer";
 import { PageLayout } from "@/components/Shared/PageLayout";
 import { Card, CardHeader, WarningMessage } from "@/components/Shared/UI";
 import { usePostLinkStore } from "@/store/non-persisted/navigation/usePostLinkStore";
+import { usePostSmartMedia } from "@/store/non-persisted/post/useSmartMediaStore";
 import { useAccountStore } from "@/store/persisted/useAccountStore";
+import { type SmartMedia, SmartMediaStatus } from "@/types/smart-media";
 import getAccount from "@hey/helpers/getAccount";
 import { isRepost } from "@hey/helpers/postHelpers";
 import {
   PageSize,
+  type Post,
   PostReferenceType,
   PostVisibilityFilter,
   useHiddenCommentsQuery,
   usePostQuery
 } from "@hey/indexer";
+import { useEffect } from "react";
 import { useLocation, useParams } from "react-router";
 import { createTrackedSelector } from "react-tracked";
 import { create } from "zustand";
 import NoneRelevantFeed from "../Comment/NoneRelevantFeed";
+import SmartMediaCard from "../SmartMedia/Card";
+import SmartMediaDetails from "../SmartMedia/Details";
 import FullPost from "./FullPost";
 import Quotes from "./Quotes";
 import RelevantPeople from "./RelevantPeople";
@@ -44,6 +50,12 @@ const ViewPost = () => {
   const { slug } = useParams<{ slug: string }>();
   const { currentAccount } = useAccountStore();
   const { cachedPost, setCachedPost } = usePostLinkStore();
+  const {
+    smartMedia: _smartMedia,
+    fetchSmartMedia,
+    isLoading: isLoadingSmartMedia
+  } = usePostSmartMedia(slug || "");
+  const smartMedia = _smartMedia as SmartMedia | undefined;
 
   const showQuotes = pathname === `/posts/${slug}/quotes`;
 
@@ -72,7 +84,13 @@ const ViewPost = () => {
   const post = data?.post ?? cachedPost;
   const hasHiddenComments = (comments?.postReferences.items.length || 0) > 0;
 
-  if (!slug || (loading && !cachedPost)) {
+  useEffect(() => {
+    if (post) {
+      fetchSmartMedia(post as Post, true);
+    }
+  }, [post, fetchSmartMedia]);
+
+  if (!slug || (loading && !cachedPost) || isLoadingSmartMedia) {
     return <PostPageShimmer isQuotes={showQuotes} />;
   }
 
@@ -109,6 +127,11 @@ const ViewPost = () => {
             />
           </Card>
           <RelevantPeople mentions={targetPost.mentions} />
+          {smartMedia?.status === SmartMediaStatus.ACTIVE && (
+            <SmartMediaCard as="aside" className="p-5" forceRounded withGlow>
+              <SmartMediaDetails smartMedia={smartMedia} />
+            </SmartMediaCard>
+          )}
           <Footer />
         </div>
       }
@@ -125,6 +148,7 @@ const ViewPost = () => {
                 hasHiddenComments={hasHiddenComments}
                 key={post?.id}
                 post={post}
+                smartMedia={smartMedia}
               />
             </Card>
             {currentAccount && !canComment && (

apps/web/src/components/SmartMedia/Card.tsx

@@ -0,0 +1,62 @@
+import cn from "@/helpers/cn";
+import { type ElementType, type MouseEvent, type ReactNode, memo } from "react";
+
+interface CardProps {
+  as?: ElementType;
+  children: ReactNode;
+  className?: string;
+  forceRounded?: boolean;
+  withGlow?: boolean;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+}
+
+const SmartMediaCard = ({
+  as: Tag = "div",
+  children,
+  className = "",
+  forceRounded = false,
+  withGlow = false,
+  onClick
+}: CardProps) => {
+  const outerRoundedClasses = forceRounded
+    ? "rounded-xl"
+    : "rounded-none md:rounded-xl";
+
+  // Assuming rounded-xl is 0.75rem (12px), inner radius is 11px.
+  // For md:rounded-xl, inner is md:rounded-[11px].
+  const innerRoundedClasses = forceRounded
+    ? "rounded-[11px]"
+    : "rounded-none md:rounded-[11px]";
+
+  const outerDivStyle: React.CSSProperties = {
+    background:
+      "linear-gradient(90deg, #B8D9C5, #4D7F79, #5BE39D, #9DC4D5, #C6FFD9, #B8D9C5)"
+  };
+
+  const innerTagStyle: React.CSSProperties = {};
+
+  if (withGlow) {
+    innerTagStyle.boxShadow = "inset 0 0 16px rgba(91, 227, 157, 0.6)";
+  }
+
+  return (
+    <div
+      className={cn("p-[1px]", outerRoundedClasses)}
+      style={outerDivStyle}
+      onClick={onClick}
+    >
+      <Tag
+        className={cn(
+          "h-full w-full bg-white dark:bg-black",
+          innerRoundedClasses,
+          className
+        )}
+        style={innerTagStyle}
+      >
+        {children}
+      </Tag>
+    </div>
+  );
+};
+
+export default memo(SmartMediaCard);

apps/web/src/components/SmartMedia/Details.tsx

@@ -0,0 +1,31 @@
+import type { SmartMedia } from "@/types/smart-media";
+
+interface SmartMediaDetailsProps {
+  smartMedia: SmartMedia;
+}
+
+const SmartMediaDetails = ({ smartMedia }: SmartMediaDetailsProps) => {
+  if (!smartMedia) {
+    return null;
+  }
+
+  const { template, category, description } = smartMedia;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-col">
+        <span className="font-bold text-base">
+          {typeof template === "string" ? template : template.formatted}
+        </span>
+        {category && (
+          <span className="text-gray-500 text-sm">
+            {typeof category === "string" ? category : category.formatted}
+          </span>
+        )}
+      </div>
+      {description && <div className="text-sm">{description}</div>}
+    </div>
+  );
+};
+
+export default SmartMediaDetails;