feat(relaunch): follow discussions + All/Following tabs + sort filter

Discussions page drops the topic-tag row for the feed pattern: All / Following
tabs (deep-linkable via ?view=) + a FilterPill sort (Recent/Active/Top). New
post_follow table (migration 0030) + discussion.follow/unfollow/isFollowing;
a ＋Follow ⇄ ✓Following toggle on the thread. New comments notify the post's
followers (NEW_COMMENT_ON_FOLLOWED_POST, de-duped vs author/parent/commenter),
rendered on the notifications page.

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

Author: NiallJoeMaher

app/(app)/discussions/_client.tsx

@@ -6,30 +6,59 @@ import { useSearchParams, useRouter } from "next/navigation";
 import { signIn, useSession } from "next-auth/react";
 import { api } from "@/server/trpc/react";
 import { FeedItemLoading } from "@/components/Feed";
+import { FilterPill, type Option } from "@/components/Feed/Filters";
 import { UnifiedContentCard } from "@/components/UnifiedContentCard";
 import { useShellActions } from "@/components/Create/ShellActionsProvider";
 
+type View = "all" | "following";
+type Sort = "recent" | "active" | "top";
+
+const sortOptions: Option[] = [
+  { value: "recent", label: "Recent" },
+  { value: "active", label: "Active" },
+  { value: "top", label: "Top" },
+];
+
 /**
  * Discussions — community threads (questions + discussions), same row style as
- * the feed. Mirrors ui_kits/app/AppShell.jsx → Discussions.
+ * the feed. All / Following tabs (deep-linkable via ?view=) + a sort filter,
+ * mirroring the feed's tab + FilterPill pattern.
  */
 const DiscussionsPage = () => {
   const searchParams = useSearchParams();
   const router = useRouter();
   const { data: session } = useSession();
   const { openCompose } = useShellActions();
 
-  const tag = searchParams?.get("tag") || null;
+  const view: View =
+    searchParams?.get("view") === "following" ? "following" : "all";
+  const sortParam = searchParams?.get("sort");
+  const sort: Sort =
+    sortParam === "active" || sortParam === "top" ? sortParam : "recent";
+
+  // Build a ?view=&sort= query string, omitting defaults to keep URLs clean.
+  const setParams = (next: { view?: View; sort?: Sort }) => {
+    const params = new URLSearchParams();
+    const nextView = next.view ?? view;
+    const nextSort = next.sort ?? sort;
+    if (nextView === "following") params.set("view", "following");
+    if (nextSort !== "recent") params.set("sort", nextSort);
+    const qs = params.toString();
+    router.replace(qs ? `/discussions?${qs}` : "/discussions", {
+      scroll: false,
+    });
+  };
 
   const { status, data, isFetchingNextPage, fetchNextPage, hasNextPage } =
-    api.content.getFeed.useInfiniteQuery(
-      { limit: 25, sort: "recent", kinds: ["DISCUSSION", "QUESTION"], tag },
-      { getNextPageParam: (lastPage) => lastPage.nextCursor },
+    api.discussion.list.useInfiniteQuery(
+      { limit: 25, view, sort },
+      {
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
+        // Following tab is meaningless signed-out — skip the query.
+        enabled: view === "all" || !!session,
+      },
     );
 
-  const { data: popularData } = api.tag.getPopular.useQuery({ limit: 6 });
-  const topics = popularData?.data ?? [];
-
   const { ref, inView } = useInView();
   useEffect(() => {
     if (inView && hasNextPage) fetchNextPage();
@@ -38,6 +67,13 @@ const DiscussionsPage = () => {
   const empty =
     status === "success" && data.pages.every((p) => p.items.length === 0);
 
+  const tabClass = (active: boolean) =>
+    `whitespace-nowrap border-b-2 px-1 pb-2 text-sm font-semibold transition-colors ${
+      active
+        ? "border-accent text-fg"
+        : "border-transparent text-muted hover:text-fg"
+    }`;
+
   return (
     <div>
       <div className="flex flex-wrap items-end justify-between gap-4">
@@ -61,36 +97,42 @@ const DiscussionsPage = () => {
         loud with other builders working with AI.
       </p>
 
-      {topics.length > 0 && (
-        <div className="mt-5 flex flex-wrap gap-2">
+      <div className="mt-6 flex items-center justify-between border-b border-hairline">
+        <div className="flex items-center gap-5" role="tablist">
           <button
-            onClick={() => router.push("/discussions")}
-            className={`whitespace-nowrap rounded-full px-3 py-1 font-mono text-xs transition-colors ${
-              !tag
-                ? "bg-accent text-on-accent"
-                : "border border-hairline text-muted hover:text-fg"
-            }`}
+            role="tab"
+            aria-selected={view === "all"}
+            data-testid="discussions-tab-all"
+            onClick={() => setParams({ view: "all" })}
+            className={tabClass(view === "all")}
           >
             All
           </button>
-          {topics.map((t) => {
-            const on = tag === t.slug;
-            return (
-              <button
-                key={t.slug}
-                onClick={() => router.push(`/discussions?tag=${t.slug}`)}
-                className={`whitespace-nowrap rounded-full px-3 py-1 font-mono text-xs transition-colors ${
-                  on
-                    ? "bg-accent text-on-accent"
-                    : "border border-hairline text-muted hover:text-fg"
-                }`}
-              >
-                {t.title}
-              </button>
-            );
-          })}
+          <button
+            role="tab"
+            aria-selected={view === "following"}
+            data-testid="discussions-tab-following"
+            onClick={() => {
+              if (!session) return signIn();
+              setParams({ view: "following" });
+            }}
+            className={tabClass(view === "following")}
+          >
+            Following
+          </button>
+        </div>
+        <div className="pb-1">
+          <FilterPill
+            testId="discussions-sort"
+            label="Sort discussions"
+            value={sort}
+            options={sortOptions}
+            isDefault={sort === "recent"}
+            align="right"
+            onChange={(next) => setParams({ sort: next as Sort })}
+          />
         </div>
-      )}
+      </div>
 
       <section className="mt-6 space-y-3">
         {status === "pending" &&
@@ -134,9 +176,17 @@ const DiscussionsPage = () => {
             </Fragment>
           ))}
 
-        {empty && (
+        {empty && view === "following" && (
+          <div className="rounded-lg border border-dashed border-hairline p-12 text-center font-mono text-sm text-faint">
+            {"// "}you&apos;re not following any discussions yet — open a thread
+            and hit Follow
+          </div>
+        )}
+
+        {empty && view === "all" && (
           <div className="rounded-lg border border-dashed border-hairline p-12 text-center font-mono text-sm text-faint">
-            {"// "}nothing here yet — {session?.user ? "start one" : "sign in to start one"}
+            {"// "}nothing here yet —{" "}
+            {session?.user ? "start one" : "sign in to start one"}
           </div>
         )}
 

app/(app)/notifications/_client.tsx

@@ -10,6 +10,7 @@ import {
   NEW_REPLY_TO_YOUR_COMMENT,
   NEW_FOLLOWER,
   POST_APPROVED,
+  NEW_COMMENT_ON_FOLLOWED_POST,
 } from "@/utils/notifications";
 import { api } from "@/server/trpc/react";
 
@@ -151,6 +152,7 @@ const Notifications = () => {
                       NEW_REPLY_TO_YOUR_COMMENT,
                       NEW_FOLLOWER,
                       POST_APPROVED,
+                      NEW_COMMENT_ON_FOLLOWED_POST,
                     ].includes(type)
                   )
                     return null;
@@ -160,9 +162,11 @@ const Notifications = () => {
                       ? "started a discussion on your post"
                       : type === NEW_REPLY_TO_YOUR_COMMENT
                         ? "replied to your comment"
-                        : type === POST_APPROVED
-                          ? "approved your post — it's now live"
-                          : "started following you";
+                        : type === NEW_COMMENT_ON_FOLLOWED_POST
+                          ? "commented on a discussion you follow"
+                          : type === POST_APPROVED
+                            ? "approved your post — it's now live"
+                            : "started following you";
 
                   return (
                     <div

components/Discussion/DiscussionArea.tsx

@@ -47,6 +47,29 @@ const DiscussionArea = ({ contentId, noWrapper = false }: Props) => {
 
   const { data: session } = useSession();
   const { openReport } = useReportModal();
+  const utils = api.useUtils();
+
+  const { data: isFollowing } = api.discussion.isFollowing.useQuery(
+    { postId: contentId },
+    { enabled: !!session, retry: false },
+  );
+
+  const onFollowSettled = () =>
+    utils.discussion.isFollowing.invalidate({ postId: contentId });
+  const followMut = api.discussion.follow.useMutation({
+    onSettled: onFollowSettled,
+  });
+  const unfollowMut = api.discussion.unfollow.useMutation({
+    onSettled: onFollowSettled,
+  });
+  const followPending = followMut.isPending || unfollowMut.isPending;
+
+  const toggleFollow = () => {
+    if (!session) return signIn();
+    if (followPending) return;
+    if (isFollowing) unfollowMut.mutate({ postId: contentId });
+    else followMut.mutate({ postId: contentId });
+  };
 
   const {
     data: discussionsResponse,
@@ -476,18 +499,36 @@ const DiscussionArea = ({ contentId, noWrapper = false }: Props) => {
           </div>
         </div>
       )}
-      {/* Sort control (the canonical "Discussion {N}" header is owned by the reader) */}
-      {initiallyLoaded && (discussionsResponse?.count ?? 0) > 1 && (
-        <div className="mb-4 flex items-center justify-end">
-          <FilterPill
-            testId="discussion-sort"
-            label="Sort comments"
-            value={sortOrder}
-            options={sortOptions}
-            isDefault={sortOrder === "top"}
-            align="right"
-            onChange={(next) => setSortOrder(next as SortOrder)}
-          />
+      {/* Follow toggle + sort control (the canonical "Discussion {N}" header is
+          owned by the reader) */}
+      {initiallyLoaded && (
+        <div className="mb-4 flex items-center justify-between gap-3">
+          <button
+            type="button"
+            onClick={toggleFollow}
+            disabled={followPending}
+            aria-pressed={!!isFollowing}
+            data-testid="discussion-follow"
+            className={`inline-flex items-center gap-1.5 rounded-full px-4 py-1.5 text-sm font-semibold transition-colors disabled:opacity-60 ${
+              isFollowing
+                ? "border border-hairline text-fg hover:border-accent/50"
+                : "bg-accent text-on-accent hover:bg-accent-soft"
+            }`}
+          >
+            <span aria-hidden="true">{isFollowing ? "✓" : "＋"}</span>
+            {isFollowing ? "Following" : "Follow"}
+          </button>
+          {(discussionsResponse?.count ?? 0) > 1 && (
+            <FilterPill
+              testId="discussion-sort"
+              label="Sort comments"
+              value={sortOrder}
+              options={sortOptions}
+              isDefault={sortOrder === "top"}
+              align="right"
+              onChange={(next) => setSortOrder(next as SortOrder)}
+            />
+          )}
         </div>
       )}
       <div className={discussions?.length ? "mb-8" : ""}>

drizzle/0030_green_doctor_spectrum.sql

@@ -0,0 +1,11 @@
+CREATE TABLE "post_follow" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"user_id" text NOT NULL,
+	"post_id" uuid NOT NULL,
+	"created_at" timestamp(3) with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "post_follow" ADD CONSTRAINT "post_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 "post_follow" ADD CONSTRAINT "post_follow_post_id_posts_id_fk" FOREIGN KEY ("post_id") REFERENCES "public"."posts"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE UNIQUE INDEX "post_follow_pair_idx" ON "post_follow" USING btree ("user_id","post_id");--> statement-breakpoint
+CREATE INDEX "post_follow_post_idx" ON "post_follow" USING btree ("post_id");