docs(relaunch): trim comment noise from handoff #5 + fixes

Remove redundant JSX banners, numbered group labels, and narration across the
recently-changed files; keep the WHY/gotchas/security rationale. Comments only.

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

Author: NiallJoeMaher

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

@@ -124,7 +124,6 @@ const SourceProfileContent = ({ sourceSlug }: Props) => {
 
   return (
     <div className="mx-auto max-w-2xl px-4 pt-6 text-fg">
-      {/* ── Publication header ── */}
       <header>
         <div className="flex items-start gap-4">
           {/* Square logo tile — the "publication, not person" signal. */}
@@ -157,7 +156,6 @@ const SourceProfileContent = ({ sourceSlug }: Props) => {
           </div>
         </div>
 
-        {/* Actions */}
         <div className="mt-5 flex flex-wrap items-center gap-3">
           <button
             type="button"
@@ -177,7 +175,6 @@ const SourceProfileContent = ({ sourceSlug }: Props) => {
           </button>
         </div>
 
-        {/* Tagline */}
         {pub.tagline && (
           <p className="mt-4 max-w-[60ch] leading-relaxed text-muted">
             {pub.tagline}
@@ -205,7 +202,6 @@ const SourceProfileContent = ({ sourceSlug }: Props) => {
         </div>
       </header>
 
-      {/* ── Latest articles ── */}
       <section className="mt-8">
         <p className="eyebrow mb-3">
           <span className="slash">{"// "}</span>latest articles

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

@@ -149,7 +149,6 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
           <Heading level={1}>{`Articles (${source.articleCount})`}</Heading>
         </div>
 
-        {/* Articles list using UnifiedContentCard */}
         <div>
           {articlesStatus === "pending" ? (
             <div className="space-y-4">
@@ -199,7 +198,6 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
                 );
               })}
 
-              {/* Load more trigger */}
               <div ref={loadMoreRef} className="py-4 text-center">
                 {isFetchingNextPage && (
                   <div className="text-sm text-neutral-500 dark:text-neutral-400">

components/ContentDetail/MetaHeader.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { Temporal } from "@js-temporal/polyfill";
 
-// Get favicon URL from a website
 const getFaviconUrl = (
   websiteUrl: string | null | undefined,
 ): string | null => {
@@ -14,7 +13,6 @@ const getFaviconUrl = (
   }
 };
 
-// Get hostname from URL
 const getHostname = (urlString: string | null | undefined): string | null => {
   if (!urlString) return null;
   try {

components/Discussion/DiscussionArea.tsx

@@ -125,7 +125,6 @@ const DiscussionArea = ({ contentId, noWrapper = false }: Props) => {
   type Discussions = typeof discussions;
   type Children = typeof firstChild;
 
-  // Sort discussions based on selected sort order
   const sortDiscussions = (
     items: Discussions | Children | undefined,
   ): typeof items => {
@@ -135,22 +134,18 @@ const DiscussionArea = ({ contentId, noWrapper = false }: Props) => {
         return b.score - a.score;
       }
       if (sortOrder === "oldest") {
-        // ascending by createdAt
         return (
           new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
         );
       }
-      // "new" - sort by createdAt descending
       return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
     });
     return sorted as typeof items;
   };
 
-  // Derive initial load state from query status - data exists means loaded at least once
   const initiallyLoaded = discussionStatus === "success" || !!discussions;
 
   const handleCreateComment = async (body: string, parentId?: string) => {
-    // validate markdoc syntax
     const ast = Markdoc.parse(body);
     const errors = Markdoc.validate(ast, config).filter(
       (e) => e.error.level === "critical",
@@ -176,7 +171,6 @@ const DiscussionArea = ({ contentId, noWrapper = false }: Props) => {
   };
 
   const handleEditComment = async (body: string, id: string) => {
-    // validate markdoc syntax
     const ast = Markdoc.parse(body);
     const errors = Markdoc.validate(ast, config).filter(
       (e) => e.error.level === "critical",

components/Feed/OnboardingBanner.tsx

@@ -61,13 +61,10 @@ export function OnboardingBanner() {
 
   const allDone = wins ? steps.every((s) => s.done) : false;
 
-  // Celebration single-fire. We never want this to show twice:
-  //  - across visits: a localStorage flag (read via an external store, so it's
-  //    SSR-safe and stays in sync without setState-in-effect);
-  //  - within a session: once the user closes it, `closed` stays true.
-  // `closed` only ever flips from the onClose event handler — never from an
-  // effect — so there's no cascading-render loop. The effect below is a pure
-  // external-system sync (it writes localStorage, no setState).
+  // Celebration single-fire: a localStorage flag (read via the external store so
+  // it's SSR-safe) guards across visits; `closed` guards within a session.
+  // `closed` only flips from the onClose handler, never an effect — no render
+  // loop. The effect below is a pure external-system sync (writes localStorage).
   const celebrated = useSyncExternalStore(
     subscribe,
     hasCelebrated,

components/Layout/TopBar.tsx

@@ -42,7 +42,6 @@ export function TopBar({
 
   return (
     <header className="app-topbar">
-      {/* Left: hamburger (≤720px) + logo */}
       <div className="flex items-center gap-2 justify-self-start">
         <button
           type="button"
@@ -74,7 +73,6 @@ export function TopBar({
         </Link>
       </div>
 
-      {/* Center: search button styled like an input — opens the ⌘K palette */}
       <button
         type="button"
         onClick={onOpenPalette}
@@ -89,7 +87,6 @@ export function TopBar({
         </kbd>
       </button>
 
-      {/* Right: notifications · Create · avatar (or auth) */}
       {session ? (
         <div className="flex items-center gap-3 justify-self-end">
           <Link

components/RichText/RichToolbar.tsx

@@ -69,7 +69,6 @@ export function RichToolbar({
 }: RichToolbarProps) {
   return (
     <div className="flex flex-nowrap items-center gap-[2px] overflow-x-auto rounded-md border border-hairline bg-canvas px-1.5 py-1">
-      {/* 1. Inline */}
       <TBtn label="Bold" onClick={() => exec("bold")} compact={compact}>
         <span className="font-display text-sm font-bold leading-none">B</span>
       </TBtn>
@@ -108,7 +107,6 @@ export function RichToolbar({
 
       <Divider />
 
-      {/* 3. Lists */}
       <TBtn
         label="Bulleted list"
         onClick={() => exec("ul")}
@@ -140,7 +138,6 @@ export function RichToolbar({
 
       <Divider />
 
-      {/* 5. Block */}
       <TBtn label="Quote" onClick={() => exec("quote")} compact={compact}>
         <Icon>
           <path d="M6 17h3l1.5-4V7H5v6h2.5z" />
@@ -159,7 +156,6 @@ export function RichToolbar({
         </Icon>
       </TBtn>
 
-      {/* 6. Spacer → Switch to Markdown */}
       <button
         type="button"
         onMouseDown={(e) => e.preventDefault()}

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -10,11 +10,10 @@ import VoteControl from "@/components/Vote/VoteControl";
 
 export type ContentType = "POST" | "LINK";
 
-// Display kind → chip label + tone. The card's behavior still keys off `type`
-// (POST vs LINK); `kind` only drives the editorial chip.
-// Every chip uses the SAME shape (see chip <span> below) and an opaque token
-// wash background so none look offset/unanchored — only the color varies by
-// kind. Mirrored in components/ContentDetail/TypeBadge.tsx for consistency.
+// Display kind → chip label + tone. Behavior keys off `type` (POST vs LINK);
+// `kind` only drives the editorial chip. Every chip shares the same shape + an
+// opaque wash so none look offset — only the color varies. Mirrored in
+// components/ContentDetail/TypeBadge.tsx.
 const KIND: Record<string, { label: string; className: string }> = {
   POST: { label: "Article", className: "bg-accent/15 text-accent-soft" },
   ARTICLE: { label: "Article", className: "bg-accent/15 text-accent-soft" },
@@ -61,7 +60,6 @@ export interface UnifiedContentCardProps {
   tags?: string[];
 }
 
-// Get relative time string
 const getRelativeTime = (dateStr: string): string => {
   const now = new Date();
   const date = new Date(dateStr);
@@ -76,7 +74,6 @@ const getRelativeTime = (dateStr: string): string => {
   return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 };
 
-// Ensure image URL uses https
 const ensureHttps = (url: string | null | undefined): string | null => {
   if (!url) return null;
   if (url.startsWith("http://")) {
@@ -115,8 +112,7 @@ const UnifiedContentCard = ({
 
   const imageUrl = ensureHttps(rawImageUrl);
 
-  // Determine the URL for the card
-  // Priority: author (POST or user-created LINK) > source (aggregated LINK) > fallback
+  // URL priority: author (POST or user-created LINK) > source (aggregated LINK) > fallback.
   const cardUrl =
     author?.username && slug
       ? `/${author.username}/${slug}` // User-created content (POST or LINK)
@@ -215,11 +211,8 @@ const UnifiedContentCard = ({
       className="group rounded-lg border border-hairline bg-surface p-5 transition-colors duration-base ease-out hover:border-strong"
       data-testid="content-card"
     >
-      {/* Top row: [kind chip + author + title + excerpt] · preview image
-          (top-right, aligned with the header). */}
       <div className="flex gap-4">
         <div className="min-w-0 flex-1">
-          {/* Header: kind chip + author + @handle · time (· via source for links) */}
           <div className="flex flex-wrap items-center gap-2">
             <span
               className={`inline-flex items-center whitespace-nowrap rounded-sm px-2 py-0.5 font-mono text-xs ${chip.className}`}
@@ -312,15 +305,13 @@ const UnifiedContentCard = ({
         )}
       </div>
 
-      {/* Footer: mono #tags + reaction bar */}
       <div className="mt-3 flex flex-wrap items-center gap-3">
         {tags && tags.length > 0 && (
           <span className="min-w-0 truncate font-mono text-xs text-faint">
             {tags.map((t) => `#${t}`).join("  ")}
           </span>
         )}
         <div className="ml-auto flex items-center gap-3">
-          {/* Net-score vote pill */}
           <VoteControl
             base={
               votes.upvotes -