Feature/shadcn refactor

frontend/package.json

@@ -11,9 +11,11 @@
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "test": "vitest",
-    "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage",
+    "test": "vitest --project=unit",
+    "test:run": "vitest run --project=unit",
+    "test:coverage": "vitest run --project=unit --coverage",
+    "test:all": "vitest run",
+    "test:storybook": "vitest run --project=storybook",
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build"
   },

frontend/src/app/(home)/_components/ContentFeed/index.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+
+import { compactDocsParameters } from "@/lib/storybook-docs"
+import { createContent } from "@/lib/storybook-fixtures"
+
+import { ContentFeed } from "."
+
+const content = createContent({
+  is_reference: true,
+  newsletter_promotion_at: "2026-04-28T11:00:00Z",
+  newsletter_promotion_theme: 14,
+})
+
+const meta = {
+  title: "Pages/Home/Components/ContentFeed",
+  component: ContentFeed,
+  tags: ["autodocs"],
+  parameters: {
+    docs: compactDocsParameters,
+  },
+  args: {
+    projectId: 1,
+    filteredContents: [content],
+    contentClusterLookup: new Map([
+      [content.id, { clusterId: 5, label: "Platform Signals", velocityScore: 0.81 }],
+    ]),
+  },
+} satisfies Meta<typeof ContentFeed>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Empty: Story = {
+  args: {
+    filteredContents: [],
+    contentClusterLookup: new Map(),
+  },
+}

frontend/src/app/(home)/_components/ContentFeed/index.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+
+import { createContent } from "@/lib/storybook-fixtures"
+
+import { ContentFeed } from "."
+
+describe("ContentFeed", () => {
+  it("renders the empty state when no content matches", () => {
+    render(<ContentFeed contentClusterLookup={new Map()} filteredContents={[]} projectId={1} />)
+
+    expect(screen.getByText("No content matched the current filters.")).toBeInTheDocument()
+  })
+
+  it("renders content cards, trend badges, and quick actions", () => {
+    const content = createContent({
+      is_reference: true,
+      newsletter_promotion_at: "2026-04-28T11:00:00Z",
+      newsletter_promotion_theme: 14,
+    })
+
+    render(
+      <ContentFeed
+        contentClusterLookup={
+          new Map([
+            [
+              content.id,
+              { clusterId: 5, label: "Platform Signals", velocityScore: 0.81 },
+            ],
+          ])
+        }
+        filteredContents={[content]}
+        projectId={1}
+      />,
+    )
+
+    expect(screen.getByText(content.title)).toBeInTheDocument()
+    expect(screen.getByRole("link", { name: /Trend Platform Signals/i })).toHaveAttribute(
+      "href",
+      "/trends?project=1&cluster=5",
+    )
+    expect(screen.getByText("Base 84%")).toBeInTheDocument()
+    expect(screen.getByText("reference")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Upvote" })).toBeInTheDocument()
+  })
+})

frontend/src/app/(home)/_components/ContentFeed/index.tsx

@@ -0,0 +1,139 @@
+import Link from "next/link"
+
+import { StatusBadge } from "@/components/elements/StatusBadge"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import type { Content } from "@/lib/types"
+import { cn } from "@/lib/utils"
+import { formatDate, formatPercentScore, truncateText } from "@/lib/view-helpers"
+
+import type { ContentClusterBadge } from "../shared"
+
+type ContentFeedProps = {
+  projectId: number
+  filteredContents: Content[]
+  contentClusterLookup: Map<number, ContentClusterBadge>
+}
+
+/** Render the surfaced content cards and quick editorial actions. */
+export function ContentFeed({
+  projectId,
+  filteredContents,
+  contentClusterLookup,
+}: ContentFeedProps) {
+  return (
+    <div className="space-y-4">
+      {filteredContents.length === 0 ? (
+        <Alert className="rounded-panel border-border/10 bg-muted/60">
+          <AlertDescription>No content matched the current filters.</AlertDescription>
+        </Alert>
+      ) : null}
+      {filteredContents.map((content) => {
+        const trendCluster = contentClusterLookup.get(content.id)
+
+        return (
+          <Card
+            className="rounded-3xl border border-border/12 bg-card/85 shadow-panel backdrop-blur-xl"
+            key={content.id}
+          >
+            <CardContent className="grid gap-4 p-5">
+              <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+                <div className="space-y-3">
+                  <h3 className="font-display text-title-md font-bold">{content.title}</h3>
+                  <div className="flex flex-wrap gap-2 text-sm text-muted">
+                    <span>{formatDate(content.published_date)}</span>
+                    <span>{content.author || "Unknown author"}</span>
+                    <span>{content.source_plugin}</span>
+                  </div>
+                </div>
+                <StatusBadge
+                  tone={
+                    (content.authority_adjusted_score ?? content.relevance_score ?? 0) >= 0.7
+                      ? "positive"
+                      : "warning"
+                  }
+                >
+                  Adjusted {formatPercentScore(content.authority_adjusted_score ?? content.relevance_score)}
+                </StatusBadge>
+              </div>
+
+              <div className="flex flex-wrap gap-2">
+                {trendCluster ? (
+                  <Link
+                    className={cn(buttonVariants({ size: "sm", variant: "secondary" }), "rounded-full px-3")}
+                    href={`/trends?project=${projectId}&cluster=${trendCluster.clusterId}`}
+                  >
+                    Trend {trendCluster.label} · {formatPercentScore(trendCluster.velocityScore ?? null)}
+                  </Link>
+                ) : null}
+                {content.authority_adjusted_score !== null ? (
+                  <span className="inline-flex items-center rounded-full border border-primary/18 bg-primary/8 px-3 py-1 text-sm text-foreground">
+                    Base {formatPercentScore(content.relevance_score)}
+                  </span>
+                ) : null}
+                <span className="inline-flex items-center rounded-full border border-border/12 bg-muted/55 px-3 py-1 text-sm text-foreground">
+                  {content.content_type || "unclassified"}
+                </span>
+                {content.duplicate_signal_count > 0 ? (
+                  <span className="inline-flex items-center rounded-full border border-border/12 bg-muted/55 px-3 py-1 text-sm text-foreground">
+                    Also seen in {content.duplicate_signal_count} source
+                    {content.duplicate_signal_count === 1 ? "" : "s"}
+                  </span>
+                ) : null}
+                {content.duplicate_of ? (
+                  <span className="inline-flex items-center rounded-full border border-border/12 bg-muted/55 px-3 py-1 text-sm text-foreground">
+                    Duplicate of #{content.duplicate_of}
+                  </span>
+                ) : null}
+                {content.is_reference ? (
+                  <span className="inline-flex items-center rounded-full border border-border/12 bg-muted/55 px-3 py-1 text-sm text-foreground">reference</span>
+                ) : null}
+                {!content.is_active ? (
+                  <span className="inline-flex items-center rounded-full border border-border/12 bg-muted/55 px-3 py-1 text-sm text-foreground">archived</span>
+                ) : null}
+                {content.newsletter_promotion_at ? (
+                  <Link
+                    className={cn(buttonVariants({ size: "sm", variant: "secondary" }), "rounded-full px-3")}
+                    href={content.newsletter_promotion_theme ? `/themes?project=${projectId}&theme=${content.newsletter_promotion_theme}` : `/themes?project=${projectId}`}
+                  >
+                    Promoted {formatDate(content.newsletter_promotion_at)}
+                  </Link>
+                ) : null}
+              </div>
+
+              <p className="text-sm leading-6 text-muted">{truncateText(content.content_text)}</p>
+
+              <div className="flex flex-wrap items-center gap-3">
+                <Link
+                  className={cn(buttonVariants({ size: "lg" }), "min-h-11 rounded-full px-4 py-3")}
+                  href={`/content/${content.id}?project=${projectId}`}
+                >
+                  Open detail
+                </Link>
+                <form action="/api/feedback" method="POST">
+                  <input name="projectId" type="hidden" value={projectId} />
+                  <input name="contentId" type="hidden" value={content.id} />
+                  <input name="feedbackType" type="hidden" value="upvote" />
+                  <input name="redirectTo" type="hidden" value={`/?project=${projectId}`} />
+                  <Button className="min-h-11 rounded-full px-4 py-3" size="lg" type="submit">
+                    Upvote
+                  </Button>
+                </form>
+                <form action="/api/feedback" method="POST">
+                  <input name="projectId" type="hidden" value={projectId} />
+                  <input name="contentId" type="hidden" value={content.id} />
+                  <input name="feedbackType" type="hidden" value="downvote" />
+                  <input name="redirectTo" type="hidden" value={`/?project=${projectId}`} />
+                  <Button className="min-h-11 rounded-full px-4 py-3" size="lg" type="submit" variant="outline">
+                    Downvote
+                  </Button>
+                </form>
+              </div>
+            </CardContent>
+          </Card>
+        )
+      })}
+    </div>
+  )
+}

frontend/src/app/(home)/_components/DashboardFilterToolbar/index.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+
+import { compactDocsParameters } from "@/lib/storybook-docs"
+
+import { DashboardFilterToolbar } from "."
+
+const meta = {
+  title: "Pages/Home/Components/DashboardFilterToolbar",
+  component: DashboardFilterToolbar,
+  tags: ["autodocs"],
+  parameters: {
+    docs: compactDocsParameters,
+  },
+  args: {
+    projectId: 1,
+    view: "content",
+    contentTypes: ["article", "tutorial"],
+    contentTypeFilter: "",
+    sources: ["rss", "reddit"],
+    sourceFilter: "",
+    daysFilter: 30,
+    duplicateStateFilter: "",
+  },
+} satisfies Meta<typeof DashboardFilterToolbar>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Filtered: Story = {
+  args: {
+    contentTypeFilter: "article",
+    sourceFilter: "rss",
+    duplicateStateFilter: "duplicate_related",
+  },
+}

frontend/src/app/(home)/_components/DashboardFilterToolbar/index.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+
+import { DashboardFilterToolbar } from "."
+
+describe("DashboardFilterToolbar", () => {
+  it("renders the dashboard filter form", () => {
+    const { container } = render(
+      <DashboardFilterToolbar
+        contentTypeFilter="article"
+        contentTypes={["article", "podcast"]}
+        daysFilter={30}
+        duplicateStateFilter="duplicate_related"
+        projectId={1}
+        sourceFilter="rss"
+        sources={["rss", "reddit"]}
+        view="content"
+      />,
+    )
+
+    expect(screen.getByRole("button", { name: "Apply filters" })).toBeInTheDocument()
+    expect(screen.getByRole("link", { name: "Reset" })).toHaveAttribute("href", "/?project=1")
+    expect(container.querySelector('input[name="project"]')).toHaveValue("1")
+    expect(container.querySelector('input[name="contentType"]')).toHaveValue("article")
+    expect(container.querySelector('input[name="source"]')).toHaveValue("rss")
+    expect(container.querySelector('input[name="days"]')).toHaveValue("30")
+  })
+})