feat(explore): full-width topic content + polished entity cards

Dramatically improve the /explore/[tag] page:
- Content (recommended stories, who-to-follow, top sources, feeds) now spans
  the full content width instead of being squeezed in a narrow column; only
  the identity header stays centered & readable.
- Widen the description paragraph so it wraps over fewer lines.
- New shared ExploreEntityCard (avatar, name, @handle, bio, full-width Follow
  button at the bottom) used for BOTH "Who to follow" (users) and "Top sources
  covering it" (sources), laid out in a responsive grid with skeletons.
- Followers stat remains in the header (renders once the backend field lands).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: tsahimatsliah

packages/shared/src/components/explore/ExploreEntityCard.tsx

@@ -0,0 +1,111 @@
+import type { ReactElement } from 'react';
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import Link from '../utilities/Link';
+import { Image } from '../image/Image';
+import { fallbackImages } from '../../lib/config';
+import { FollowButton } from '../contentPreference/FollowButton';
+import { ContentPreferenceType } from '../../graphql/contentPreference';
+import { useContentPreferenceStatusQuery } from '../../hooks/contentPreference/useContentPreferenceStatusQuery';
+import AuthContext from '../../contexts/AuthContext';
+import { ButtonVariant } from '../buttons/Button';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../typography/Typography';
+
+export interface ExploreEntityCardProps {
+  entityId: string;
+  entityType: ContentPreferenceType;
+  entityName: string;
+  name: string;
+  image?: string;
+  handle?: string;
+  bio?: string;
+  permalink: string;
+}
+
+// A single card shared by "Who to follow" (users) and "Top sources" (sources):
+// avatar + name + handle + bio, with a full-width Follow button pinned to the
+// bottom so every card lines up regardless of bio length.
+export function ExploreEntityCard({
+  entityId,
+  entityType,
+  entityName,
+  name,
+  image,
+  handle,
+  bio,
+  permalink,
+}: ExploreEntityCardProps): ReactElement {
+  const { user: loggedUser } = useContext(AuthContext);
+  const { data: contentPreference } = useContentPreferenceStatusQuery({
+    id: entityId,
+    entity: entityType,
+  });
+  const isUser = entityType === ContentPreferenceType.User;
+  const isSelf = isUser && loggedUser?.id === entityId;
+
+  return (
+    <article className="flex h-full w-full flex-col gap-3 rounded-16 border border-border-subtlest-tertiary p-4">
+      <Link href={permalink} passHref prefetch={false}>
+        <a className="flex items-center gap-3 no-underline">
+          <Image
+            src={image || fallbackImages.avatar}
+            alt={isUser ? `${name}'s avatar` : `${name} logo`}
+            className={classNames(
+              'size-12 shrink-0 object-cover',
+              isUser ? 'rounded-full' : 'rounded-12',
+            )}
+          />
+          <span className="flex min-w-0 flex-col">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Body}
+              color={TypographyColor.Primary}
+              bold
+              truncate
+            >
+              {name}
+            </Typography>
+            {handle && (
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Footnote}
+                color={TypographyColor.Tertiary}
+                truncate
+              >
+                @{handle}
+              </Typography>
+            )}
+          </span>
+        </a>
+      </Link>
+      {bio && (
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Secondary}
+          className="line-clamp-2"
+        >
+          {bio}
+        </Typography>
+      )}
+      {!isSelf && (
+        <FollowButton
+          className="mt-auto w-full"
+          buttonClassName="w-full justify-center"
+          entityId={entityId}
+          entityName={entityName}
+          status={contentPreference?.status}
+          type={entityType}
+          variant={ButtonVariant.Primary}
+          followedVariant={ButtonVariant.Secondary}
+          showSubscribe={false}
+          alwaysShow
+        />
+      )}
+    </article>
+  );
+}

packages/shared/src/components/explore/ExploreTopicPage.tsx

@@ -50,9 +50,8 @@ import { ContentPreferenceType } from '../../graphql/contentPreference';
 import { TOP_CREATORS_BY_TAG_QUERY } from '../../graphql/users';
 import type { UserShortProfile } from '../../lib/user';
 import { SponsoredTagHero } from '../brand/SponsoredTagHero';
-import { RelatedEntities } from '../RelatedEntities';
 import { ElementPlaceholder } from '../ElementPlaceholder';
-import UserEntityCard from '../cards/entity/UserEntityCard';
+import { ExploreEntityCard } from './ExploreEntityCard';
 import { largeNumberFormat } from '../../lib';
 import { getExploreTagPageLink } from '../../lib/links';
 import { webappUrl } from '../../lib/constants';
@@ -156,6 +155,21 @@ const RelatedTagsBar = ({
   );
 };
 
+const ENTITY_GRID =
+  'grid grid-cols-1 gap-4 mobileL:grid-cols-2 laptop:grid-cols-3';
+
+const EntityGridSkeleton = (): ReactElement => (
+  <div className={ENTITY_GRID}>
+    {Array.from({ length: 3 }).map((_, index) => (
+      <ElementPlaceholder
+        // eslint-disable-next-line react/no-array-index-key
+        key={index}
+        className="h-40 w-full rounded-16"
+      />
+    ))}
+  </div>
+);
+
 const TagTopSources = ({ tag }: { tag: string }): ReactElement | null => {
   const { data: topSources, isPending } = useQuery({
     queryKey: [RequestKey.SourceByTag, null, tag],
@@ -168,24 +182,35 @@ const TagTopSources = ({ tag }: { tag: string }): ReactElement | null => {
     staleTime: StaleTime.OneHour,
   });
 
-  const sources = topSources?.sourcesByTag?.edges?.map((edge) => edge.node);
-  if (!sources || sources.length === 0) {
+  const sources =
+    topSources?.sourcesByTag?.edges?.map((edge) => edge.node) ?? [];
+  if (!isPending && sources.length === 0) {
     return null;
   }
 
   return (
-    <RelatedEntities
-      isLoading={isPending}
-      items={sources.map((source) => ({
-        id: source.id,
-        image: source.image,
-        imageAlt: `${source.name} logo`,
-        name: source.name,
-        permalink: source.permalink,
-      }))}
-      title="🔔 Top sources covering it"
-      className="mx-4"
-    />
+    <section className="mb-10">
+      <SectionHeading>Top sources covering it</SectionHeading>
+      {isPending ? (
+        <EntityGridSkeleton />
+      ) : (
+        <div className={ENTITY_GRID}>
+          {sources.map((source) => (
+            <ExploreEntityCard
+              key={source.id}
+              entityId={source.id ?? ''}
+              entityType={ContentPreferenceType.Source}
+              entityName={source.handle || source.name || ''}
+              name={source.name ?? ''}
+              image={source.image}
+              handle={source.handle}
+              bio={source.description}
+              permalink={source.permalink ?? ''}
+            />
+          ))}
+        </div>
+      )}
+    </section>
   );
 };
 
@@ -215,32 +240,27 @@ const WhoToFollow = ({
   }
 
   return (
-    <section className="mx-4 mb-10 flex flex-col gap-3">
-      <Typography
-        tag={TypographyTag.H2}
-        type={TypographyType.Title3}
-        color={TypographyColor.Primary}
-        bold
-      >
-        Who to follow
-      </Typography>
-      <div className="no-scrollbar flex gap-4 overflow-x-auto">
-        {isLoading
-          ? Array.from({ length: 3 }).map((_, index) => (
-              <ElementPlaceholder
-                // eslint-disable-next-line react/no-array-index-key
-                key={index}
-                className="h-40 w-80 shrink-0 rounded-16"
-              />
-            ))
-          : users.map((user) => (
-              <UserEntityCard
-                key={user.id}
-                user={user}
-                className={{ container: 'shrink-0' }}
-              />
-            ))}
-      </div>
+    <section className="mb-10">
+      <SectionHeading>Who to follow</SectionHeading>
+      {isLoading ? (
+        <EntityGridSkeleton />
+      ) : (
+        <div className={ENTITY_GRID}>
+          {users.map((user) => (
+            <ExploreEntityCard
+              key={user.id}
+              entityId={user.id}
+              entityType={ContentPreferenceType.User}
+              entityName={user.username || user.name || ''}
+              name={user.name ?? ''}
+              image={user.image}
+              handle={user.username}
+              bio={user.bio}
+              permalink={user.permalink ?? ''}
+            />
+          ))}
+        </div>
+      )}
     </section>
   );
 };
@@ -350,11 +370,11 @@ export const ExploreTopicPage = ({
           />
         </Head>
       )}
-      <div className="mx-auto flex w-full max-w-screen-laptop flex-col px-4 py-6">
+      <div className="flex w-full flex-col px-4 py-6">
         <RelatedTagsBar tag={tag} tags={recommendedTags} />
 
-        {/* Identity header — centered, editorial. */}
-        <header className="mx-auto flex w-full max-w-screen-tablet flex-col items-center gap-4 py-8 text-center">
+        {/* Identity header — centered & readable; content below spans full width. */}
+        <header className="mx-auto flex w-full max-w-[48rem] flex-col items-center gap-4 py-8 text-center">
           <SponsoredTagHero tag={tag} />
           <Typography
             tag={TypographyTag.H1}
@@ -383,7 +403,7 @@ export const ExploreTopicPage = ({
               type={TypographyType.Body}
               color={TypographyColor.Secondary}
               center
-              className="max-w-[34rem]"
+              className="max-w-[44rem]"
             >
               {initialData.flags.description}
             </Typography>