feat(relaunch): track onboarding wins + wire missing engagement awards

NiallJoeMaher · claude · NiallJoeMaher · commit 420e063cdea4 · 2026-06-08T08:21:05.000+01:00
- feed filters: drop the "·" separators, swap the ▾ triangle for a proper
  down-chevron SVG
- onboarding banner: real completion via engagement.onboardingWins (topics set /
  3 follows / first post) — done steps show a mint check + strikethrough +
  progress rail; banner hides once all three are done; steps open the topics/
  compose modals (work on mobile too)
- engagement gaps closed in content.* (the relaunch compose/vote path never
  awarded): upvote_received → post author (idempotent per voter), post_published
  on content.create (publish) and content.publish (first publish). daily_active
  (streaks), comment_created, referral already wired; checkBadges runs after each.

Co-Authored-By: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/components/Feed/Filters.tsx b/components/Feed/Filters.tsx
@@ -68,9 +68,20 @@ function FilterPill({
         }`}
       >
         {current.label}
-        <span className="text-[10px] text-faint" aria-hidden="true">
-          ▾
-        </span>
+        <svg
+          className="h-3.5 w-3.5 text-faint"
+          viewBox="0 0 20 20"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.75"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6 8l4 4 4-4"
+          />
+        </svg>
       </button>
       {open && (
         <ul
@@ -160,12 +171,6 @@ const sortOptions: Option[] = [
 
 const ALL_TOPICS = "all";
 
-const Divider = () => (
-  <span className="text-faint" aria-hidden="true">
-    ·
-  </span>
-);
-
 const FeedFilters = ({
   sort,
   type,
@@ -189,10 +194,7 @@ const FeedFilters = ({
     typeValue !== "all" || sort !== "recent" || tagValue !== ALL_TOPICS;
 
   return (
-    <div
-      className="flex items-center gap-1"
-      data-testid="feed-filters"
-    >
+    <div className="flex items-center gap-2" data-testid="feed-filters">
       {isDirty && (
         <button
           type="button"
@@ -204,22 +206,19 @@ const FeedFilters = ({
       )}
 
       {showTypeFilter && onTypeChange && (
-        <>
-          <FilterPill
-            testId="type-filter"
-            label="Filter by type"
-            value={typeValue}
-            options={typeOptions}
-            isDefault={typeValue === "all"}
-            align="right"
-            onChange={(next) =>
-              onTypeChange(
-                next === "all" ? null : (next.toUpperCase() as ContentType),
-              )
-            }
-          />
-          <Divider />
-        </>
+        <FilterPill
+          testId="type-filter"
+          label="Filter by type"
+          value={typeValue}
+          options={typeOptions}
+          isDefault={typeValue === "all"}
+          align="right"
+          onChange={(next) =>
+            onTypeChange(
+              next === "all" ? null : (next.toUpperCase() as ContentType),
+            )
+          }
+        />
       )}
 
       <FilterPill
@@ -233,19 +232,14 @@ const FeedFilters = ({
       />
 
       {topics.length > 0 && (
-        <>
-          <Divider />
-          <FilterPill
-            label="Filter by topic"
-            value={tagValue}
-            options={topicOptions}
-            isDefault={tagValue === ALL_TOPICS}
-            align="right"
-            onChange={(next) =>
-              onTagChange(next === ALL_TOPICS ? null : next)
-            }
-          />
-        </>
+        <FilterPill
+          label="Filter by topic"
+          value={tagValue}
+          options={topicOptions}
+          isDefault={tagValue === ALL_TOPICS}
+          align="right"
+          onChange={(next) => onTagChange(next === ALL_TOPICS ? null : next)}
+        />
       )}
     </div>
   );
diff --git a/components/Feed/OnboardingBanner.tsx b/components/Feed/OnboardingBanner.tsx
@@ -2,15 +2,11 @@
 
 import { useSyncExternalStore } from "react";
 import Link from "next/link";
+import { api } from "@/server/trpc/react";
+import { useShellActions } from "@/components/Create/ShellActionsProvider";
 
 const KEY = "codu.onboarding.dismissed";
 
-const STEPS = [
-  { label: "Pick your topics", href: "/feed" },
-  { label: "Follow 3 builders", href: "/discussions" },
-  { label: "Post your first tip", href: "/create?kind=til" },
-];
-
 // Tiny external store so dismissal is read without setState-in-effect and stays
 // SSR-safe (server snapshot = not dismissed → banner renders, client reads
 // localStorage on hydration).
@@ -23,18 +19,43 @@ const isDismissed = () =>
   typeof window !== "undefined" && localStorage.getItem(KEY) === "1";
 
 /**
- * First-run guidance: a dismissible "first win in 3 steps" banner. Onboarding is
- * the #1 retention lever, so we guide the first action. Mirrors
- * ui_kits/app/Feed.jsx → OnboardingBanner.
+ * First-run guidance: a dismissible "first win in 3 steps" banner. Steps reflect
+ * REAL completion (topics picked / 3 follows / first post) via
+ * engagement.onboardingWins — done steps show a mint check + strikethrough. The
+ * banner hides itself once all three are done. Mirrors ui_kits/app/Feed.jsx.
  */
 export function OnboardingBanner() {
-  const dismissed = useSyncExternalStore(
-    subscribe,
-    isDismissed,
-    () => false,
-  );
+  const dismissed = useSyncExternalStore(subscribe, isDismissed, () => false);
+  const { openTopics, openCompose } = useShellActions();
+  const { data: wins } = api.engagement.onboardingWins.useQuery();
+
+  // A step is { label, done, action }. Actions reuse the shell modals so they
+  // work even when the rail is hidden on mobile.
+  const steps = [
+    {
+      label: "Pick your topics",
+      done: !!wins?.pickedTopics,
+      onClick: openTopics,
+      href: undefined as string | undefined,
+    },
+    {
+      label: "Follow 3 builders",
+      done: !!wins?.followedThree,
+      onClick: undefined,
+      href: "/discussions",
+    },
+    {
+      label: "Post your first tip",
+      done: !!wins?.posted,
+      onClick: () => openCompose("discussion"),
+      href: undefined as string | undefined,
+    },
+  ];
 
-  if (dismissed) return null;
+  const allDone = wins ? steps.every((s) => s.done) : false;
+  if (dismissed || allDone) return null;
+
+  const doneCount = steps.filter((s) => s.done).length;
 
   const dismiss = () => {
     localStorage.setItem(KEY, "1");
@@ -69,20 +90,63 @@ export function OnboardingBanner() {
             ✕
           </button>
         </div>
-        <div className="mt-4 grid gap-3 sm:grid-cols-2">
-          {STEPS.map((s, i) => (
-            <Link
-              key={s.label}
-              href={s.href}
-              className="flex items-center gap-3 rounded-md border border-hairline bg-elevated p-3 transition-colors hover:border-strong"
-            >
-              <span className="flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full border border-strong font-mono text-xs text-faint">
-                {i + 1}
-              </span>
-              <span className="text-sm font-medium text-fg">{s.label}</span>
-            </Link>
+
+        {/* progress rail */}
+        <div className="mt-4 flex gap-1.5">
+          {steps.map((s, i) => (
+            <span
+              key={i}
+              className={`h-1 flex-1 rounded-full ${
+                s.done ? "bg-accent" : "bg-elevated"
+              }`}
+            />
           ))}
         </div>
+
+        <div className="mt-4 grid gap-3 sm:grid-cols-2">
+          {steps.map((s) => {
+            const inner = (
+              <>
+                <span
+                  className={`flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full text-xs ${
+                    s.done
+                      ? "bg-accent font-bold text-on-accent"
+                      : "border border-strong text-faint"
+                  }`}
+                >
+                  {s.done ? "✓" : ""}
+                </span>
+                <span
+                  className={`text-sm font-medium ${
+                    s.done ? "text-muted line-through" : "text-fg"
+                  }`}
+                >
+                  {s.label}
+                </span>
+              </>
+            );
+            const className = `flex items-center gap-3 rounded-md border border-hairline p-3 text-left transition-colors ${
+              s.done ? "bg-transparent" : "bg-elevated hover:border-strong"
+            }`;
+            return s.href ? (
+              <Link key={s.label} href={s.href} className={className}>
+                {inner}
+              </Link>
+            ) : (
+              <button
+                key={s.label}
+                type="button"
+                onClick={s.onClick}
+                className={className}
+              >
+                {inner}
+              </button>
+            );
+          })}
+        </div>
+        <p className="mt-3 font-mono text-xs text-faint">
+          {doneCount}/3 done
+        </p>
       </div>
     </div>
   );
diff --git a/server/api/router/content.ts b/server/api/router/content.ts
@@ -49,6 +49,7 @@ import {
   notifyAdminOfReview,
 } from "@/server/lib/moderation";
 import { enforceRateLimit } from "@/server/lib/rateLimit";
+import { award } from "@/server/lib/engagement";
 import crypto from "crypto";
 
 // Helper to generate slug from title
@@ -649,6 +650,17 @@ export const contentRouter = createTRPCRouter({
         }
       }
 
+      // Engagement: award points + check badges when a post goes live directly
+      // (the quick-compose Discussion/Link path). Never throws.
+      if (newContent && input.published) {
+        await award({
+          userId,
+          action: "post_published",
+          sourceType: "post",
+          sourceId: newContent.id,
+        });
+      }
+
       return newContent;
     }),
 
@@ -790,6 +802,7 @@ export const contentRouter = createTRPCRouter({
       const contentItem = await ctx.db
         .select({
           id: posts.id,
+          authorId: posts.authorId,
           upvotes: posts.upvotesCount,
           downvotes: posts.downvotesCount,
         })
@@ -836,6 +849,22 @@ export const contentRouter = createTRPCRouter({
           .where(eq(post_votes.id, existingVote[0].id));
       }
 
+      // Award the author points for an upvote (idempotent per voter+post via
+      // the dedupe index; never self-award). Fire-and-forget — never throws.
+      if (
+        voteType === "up" &&
+        contentItem[0].authorId &&
+        contentItem[0].authorId !== userId
+      ) {
+        await award({
+          userId: contentItem[0].authorId,
+          action: "upvote_received",
+          sourceType: "post",
+          sourceId: contentId,
+          actorId: userId,
+        });
+      }
+
       return { success: true };
     }),
 
@@ -1297,6 +1326,17 @@ export const contentRouter = createTRPCRouter({
         .where(eq(posts.id, input.id))
         .returning();
 
+      // Award points the first time a post is published (draft → published;
+      // the moderation path awards on admin approval instead). Never throws.
+      if (input.published && existing[0].status === "draft") {
+        await award({
+          userId,
+          action: "post_published",
+          sourceType: "post",
+          sourceId: input.id,
+        });
+      }
+
       return updated;
     }),
 
diff --git a/server/api/router/engagement.ts b/server/api/router/engagement.ts
@@ -2,10 +2,37 @@ import { z } from "zod";
 import { nanoid } from "nanoid";
 import { and, desc, eq, gt, sql } from "drizzle-orm";
 import { createTRPCRouter, publicProcedure, protectedProcedure } from "../trpc";
-import { point_event, user, badge } from "@/server/db/schema";
+import { point_event, user, badge, follow, posts } from "@/server/db/schema";
 import { getStreak, getUserBadges } from "@/server/lib/engagement";
 
 export const engagementRouter = createTRPCRouter({
+  // "Get your first win in 3 steps" — real completion state for the feed banner:
+  // picked topics, followed 3 builders, published a first post.
+  onboardingWins: protectedProcedure.query(async ({ ctx }) => {
+    const uid = ctx.session.user.id;
+    const [u] = await ctx.db
+      .select({ topics: user.topics })
+      .from(user)
+      .where(eq(user.id, uid))
+      .limit(1);
+    const [followRow] = await ctx.db
+      .select({ c: sql<number>`count(*)` })
+      .from(follow)
+      .where(eq(follow.followerId, uid));
+    const [postRow] = await ctx.db
+      .select({ c: sql<number>`count(*)` })
+      .from(posts)
+      .where(eq(posts.authorId, uid));
+    const followCount = Number(followRow?.c ?? 0);
+    const postCount = Number(postRow?.c ?? 0);
+    return {
+      pickedTopics: (u?.topics?.length ?? 0) > 0,
+      followedThree: followCount >= 3,
+      posted: postCount > 0,
+      followCount,
+    };
+  }),
+
   // The signed-in user's streak + total points (personal, never empty-feeling).
   myStats: protectedProcedure.query(async ({ ctx }) => {
     const streak = await getStreak(ctx.session.user.id);
