feat(relaunch): followable Publications (handoff #5 §2)

Publications = feed sources, now followable. New publication_follow table
(userId↔sourceId, migration 0028) + publication tRPC router (getBySlug with
follower/article counts + isFollowing, follow/unfollow). The source profile at
/{slug} (_sourceProfileClient) is redesigned to the publication layout: square
logo tile, "// publication" eyebrow, name + @handle, Follow/Share, tagline,
Followers + Articles stats, "// latest articles" via UnifiedContentCard — no
banner. Byline "in {Publication}" links (card + reader MetaHeader) point to
/{slug}. (The /feed/[sourceSlug] route is 308-redirected to /{slug} by
next.config, so the canonical page lives there.)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: NiallJoeMaher

app/(app)/[username]/_sourceProfileClient.tsx

@@ -60,14 +60,14 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
 
   if (sourceStatus === "pending") {
     return (
-      <div className="mx-auto max-w-2xl px-4 text-fg">
+      <div className="mx-auto max-w-2xl px-4 text-black dark:text-white">
         <div className="pt-6 sm:flex">
           <div className="mr-4 flex-shrink-0 self-center">
-            <div className="mb-2 h-20 w-20 animate-pulse rounded-full bg-inset sm:mb-0 sm:h-24 sm:w-24 lg:h-32 lg:w-32" />
+            <div className="mb-2 h-20 w-20 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-700 sm:mb-0 sm:h-24 sm:w-24 lg:h-32 lg:w-32" />
           </div>
           <div className="flex flex-col justify-center">
-            <div className="mb-2 h-6 w-48 animate-pulse rounded bg-inset" />
-            <div className="h-4 w-32 animate-pulse rounded bg-inset" />
+            <div className="mb-2 h-6 w-48 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" />
+            <div className="h-4 w-32 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" />
           </div>
         </div>
       </div>
@@ -76,17 +76,17 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
 
   if (sourceStatus === "error" || !source) {
     return (
-      <div className="mx-auto max-w-2xl px-4 py-8 text-fg">
-        <div className="rounded-lg border border-danger/30 bg-danger/12 p-6 text-center">
-          <h1 className="text-lg font-semibold text-danger">
+      <div className="mx-auto max-w-2xl px-4 py-8 text-black dark:text-white">
+        <div className="rounded-lg border border-red-200 bg-red-50 p-6 text-center dark:border-red-800 dark:bg-red-950">
+          <h1 className="text-lg font-semibold text-red-700 dark:text-red-300">
             Source Not Found
           </h1>
-          <p className="mt-2 text-sm text-danger">
+          <p className="mt-2 text-sm text-red-600 dark:text-red-400">
             This source may have been removed or the link is invalid.
           </p>
           <Link
             href="/feed"
-            className="mt-4 inline-block text-sm text-accent-soft hover:text-accent"
+            className="mt-4 inline-block text-sm text-blue-500 hover:underline"
           >
             Back to Feed
           </Link>
@@ -100,7 +100,7 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
 
   return (
     <>
-      <div className="mx-auto max-w-2xl px-4 text-fg">
+      <div className="text-900 mx-auto max-w-2xl px-4 text-black dark:text-white">
         {/* Profile header - matching user profile pattern exactly */}
         <div className="pt-6 sm:flex">
           <div className="mr-4 flex-shrink-0 self-center">
@@ -117,16 +117,16 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
                 src={faviconUrl}
               />
             ) : (
-              <div className="mb-2 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-accent to-accent text-3xl font-bold text-on-accent sm:mb-0 sm:h-24 sm:w-24 lg:h-32 lg:w-32 lg:text-4xl">
+              <div className="mb-2 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-orange-400 to-orange-600 text-3xl font-bold text-white sm:mb-0 sm:h-24 sm:w-24 lg:h-32 lg:w-32 lg:text-4xl">
                 {source.name?.charAt(0).toUpperCase() || "?"}
               </div>
             )}
           </div>
           <div className="flex flex-col justify-center">
-            <h1 className="mb-0 font-display text-lg font-extrabold tracking-tight text-fg md:text-xl">
-              {source.name}
-            </h1>
-            <h2 className="text-sm font-bold text-muted">@{sourceSlug}</h2>
+            <h1 className="mb-0 text-lg font-bold md:text-xl">{source.name}</h1>
+            <h2 className="text-sm font-bold text-neutral-500 dark:text-neutral-400">
+              @{sourceSlug}
+            </h2>
             <p className="mt-1">{source.description || ""}</p>
             {source.websiteUrl && (
               <Link
@@ -135,8 +135,8 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <LinkIcon className="mr-2 h-5 text-muted" />
-                <p className="mt-1 text-accent-soft hover:text-accent">
+                <LinkIcon className="mr-2 h-5 text-neutral-500 dark:text-neutral-400" />
+                <p className="mt-1 text-blue-500">
                   {getDomainFromUrl(source.websiteUrl)}
                 </p>
               </Link>
@@ -149,17 +149,18 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
           <Heading level={1}>{`Articles (${source.articleCount})`}</Heading>
         </div>
 
+        {/* Articles list using UnifiedContentCard */}
         <div>
           {articlesStatus === "pending" ? (
             <div className="space-y-4">
               {[...Array(5)].map((_, i) => (
                 <div
                   key={i}
-                  className="animate-pulse rounded-lg border border-hairline p-3"
+                  className="animate-pulse rounded-lg border border-neutral-200 p-3 dark:border-neutral-700"
                 >
-                  <div className="mb-2 h-4 w-1/4 rounded bg-inset" />
-                  <div className="mb-2 h-5 w-3/4 rounded bg-inset" />
-                  <div className="h-4 w-1/2 rounded bg-inset" />
+                  <div className="mb-2 h-4 w-1/4 rounded bg-neutral-200 dark:bg-neutral-700" />
+                  <div className="mb-2 h-5 w-3/4 rounded bg-neutral-200 dark:bg-neutral-700" />
+                  <div className="h-4 w-1/2 rounded bg-neutral-200 dark:bg-neutral-700" />
                 </div>
               ))}
             </div>
@@ -198,14 +199,15 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
                 );
               })}
 
+              {/* Load more trigger */}
               <div ref={loadMoreRef} className="py-4 text-center">
                 {isFetchingNextPage && (
-                  <div className="text-sm text-muted">
+                  <div className="text-sm text-neutral-500 dark:text-neutral-400">
                     Loading more articles...
                   </div>
                 )}
                 {!hasNextPage && articles.length > 0 && (
-                  <div className="text-sm text-muted">
+                  <div className="text-sm text-neutral-500 dark:text-neutral-400">
                     No more articles
                   </div>
                 )}

app/(app)/feed/[sourceSlug]/_client.tsx

@@ -109,12 +109,13 @@ const ContentMetaHeader = ({
 
   // Render source info (for feed articles)
   if (source) {
-    const sourceLink = source.slug ? `/feed/${source.slug}` : "#";
+    const sourceLink = source.slug ? `/${source.slug}` : "#";
     return (
       <div className="mb-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted">
         <Link
           href={sourceLink}
-          className="flex items-center gap-2 hover:text-fg"
+          className="flex items-center gap-2"
+          onClick={(e) => e.stopPropagation()}
         >
           {source.logo ? (
             <img
@@ -129,7 +130,9 @@ const ContentMetaHeader = ({
               {source.name?.charAt(0).toUpperCase() || "?"}
             </div>
           )}
-          <span className="font-medium">{source.name || "Unknown Source"}</span>
+          <span className="whitespace-nowrap font-mono text-accent-soft hover:text-accent">
+            in {source.name || "Unknown Source"}
+          </span>
         </Link>
         {source.author &&
           source.author.trim() &&

components/ContentDetail/MetaHeader.tsx

@@ -249,7 +249,24 @@ const UnifiedContentCard = ({
             <span className="whitespace-nowrap font-mono text-xs text-faint">
               {handle ? `@${handle}` : ""}
               {relativeTime ? `${handle ? " · " : ""}${relativeTime}` : ""}
-              {type === "LINK" && source?.name ? ` · via ${source.name}` : ""}
+              {type === "LINK" && source?.name ? (
+                <>
+                  {" · in "}
+                  {source.slug ? (
+                    <Link
+                      href={`/${source.slug}`}
+                      onClick={(e) => e.stopPropagation()}
+                      className="text-accent-soft hover:text-accent"
+                    >
+                      {source.name}
+                    </Link>
+                  ) : (
+                    <span className="text-accent-soft">{source.name}</span>
+                  )}
+                </>
+              ) : (
+                ""
+              )}
               {readTimeMins ? ` · ${readTimeMins} min` : ""}
             </span>
           </div>

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -0,0 +1,11 @@
+CREATE TABLE "publication_follow" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"user_id" text NOT NULL,
+	"source_id" integer NOT NULL,
+	"created_at" timestamp(3) with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "publication_follow" ADD CONSTRAINT "publication_follow_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "publication_follow" ADD CONSTRAINT "publication_follow_source_id_feed_sources_id_fk" FOREIGN KEY ("source_id") REFERENCES "public"."feed_sources"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE UNIQUE INDEX "publication_follow_pair_idx" ON "publication_follow" USING btree ("user_id","source_id");--> statement-breakpoint
+CREATE INDEX "publication_follow_source_idx" ON "publication_follow" USING btree ("source_id");