feat: add feature UI components with useQuery hooks

- navigation: SiteHeader component + useHeader hook
- blog: ArticleCard, ArticleList, ArticleDetail + useArticleList,
  useArticleBySlug hooks
- marketing-pages: PageHero, PageContent + usePageBySlug,
  useSiteSettings hooks
- App pages now thin server wrappers that prefetch + hydrate;
  feature components own their data fetching via useSuspenseQuery

packages/blog/package.json

@@ -19,9 +19,13 @@
   },
   "dependencies": {
     "@repo/core-shared": "workspace:*",
+    "@repo/core-trpc": "workspace:^",
+    "@tanstack/react-query": "^5.66.0",
+    "@trpc/client": "^11.17.0",
     "@trpc/server": "^11.0.0",
     "inversify": "^6.2.0",
     "payload": "^3.14.0",
+    "react": "^19.0.0",
     "reflect-metadata": "^0.2.2",
     "zod": "^3.24.0"
   },
@@ -30,6 +34,7 @@
     "@repo/core-testing": "workspace:*",
     "@repo/core-typescript": "workspace:*",
     "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
     "@vitest/coverage-v8": "^3.2.4",
     "vitest": "^3.1.0"
   }

packages/blog/src/ui/components/article-card.tsx

@@ -0,0 +1,23 @@
+import type { Article } from "../../entities/models/article";
+
+export type ArticleCardProps = {
+  article: Article;
+};
+
+export function ArticleCard({ article }: ArticleCardProps) {
+  return (
+    <article className="rounded-lg border border-border bg-card p-4 transition-colors hover:bg-accent/50">
+      <a href={`/blog/${article.slug}`}>
+        <h3 className="text-lg font-semibold text-card-foreground">
+          {article.title}
+        </h3>
+      </a>
+      <time
+        className="text-sm text-muted-foreground"
+        dateTime={article.createdAt.toISOString()}
+      >
+        {article.createdAt.toLocaleDateString()}
+      </time>
+    </article>
+  );
+}

packages/blog/src/ui/components/article-detail.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useArticleBySlug } from "../hooks/use-article-by-slug";
+
+export type ArticleDetailProps = {
+  slug: string;
+};
+
+export function ArticleDetail({ slug }: ArticleDetailProps) {
+  const { data: article } = useArticleBySlug(slug);
+
+  if (!article) return null;
+
+  return (
+    <article className="mx-auto max-w-3xl">
+      <header className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground">{article.title}</h1>
+        {article.createdAt ? (
+          <time
+            className="mt-2 block text-sm text-muted-foreground"
+            dateTime={article.createdAt.toISOString()}
+          >
+            {article.createdAt.toLocaleDateString()}
+          </time>
+        ) : null}
+      </header>
+      <div className="prose text-foreground">
+        <pre className="whitespace-pre-wrap text-sm">
+          {JSON.stringify(article.content, null, 2)}
+        </pre>
+      </div>
+    </article>
+  );
+}

packages/blog/src/ui/components/article-list.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useArticleList } from "../hooks/use-article-list";
+import { ArticleCard } from "./article-card";
+
+export function ArticleList() {
+  const { data: articles } = useArticleList();
+
+  if (articles.length === 0) {
+    return <p className="text-muted-foreground">No published articles yet.</p>;
+  }
+
+  return (
+    <div className="grid gap-4">
+      {articles.map((article) => (
+        <ArticleCard key={article.id} article={article} />
+      ))}
+    </div>
+  );
+}

packages/blog/src/ui/hooks/use-article-by-slug.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useTRPC } from "@repo/core-trpc";
+import type { Article } from "../../entities/models/article";
+
+export function useArticleBySlug(slug: string) {
+  const trpc = useTRPC();
+  return useSuspenseQuery(trpc.blog.articleBySlug.queryOptions({ slug })) as {
+    data: Article | null;
+  };
+}

packages/blog/src/ui/hooks/use-article-list.ts

@@ -0,0 +1,18 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useTRPC } from "@repo/core-trpc";
+import type { Article } from "../../entities/models/article";
+
+export function useArticleList(options?: {
+  status?: "draft" | "published";
+  limit?: number;
+}) {
+  const trpc = useTRPC();
+  return useSuspenseQuery(
+    trpc.blog.listArticles.queryOptions({
+      status: options?.status ?? "published",
+      limit: options?.limit ?? 20,
+    }),
+  ) as { data: Article[] };
+}

packages/blog/src/ui/index.ts

@@ -1 +1,9 @@
 export { articleBySlugQuery, listArticlesQuery } from "./query";
+export { useArticleList } from "./hooks/use-article-list";
+export { useArticleBySlug } from "./hooks/use-article-by-slug";
+export { ArticleCard, type ArticleCardProps } from "./components/article-card";
+export { ArticleList } from "./components/article-list";
+export {
+  ArticleDetail,
+  type ArticleDetailProps,
+} from "./components/article-detail";

packages/marketing-pages/package.json

@@ -24,9 +24,13 @@
   "dependencies": {
     "@repo/auth": "workspace:*",
     "@repo/core-shared": "workspace:*",
+    "@repo/core-trpc": "workspace:^",
+    "@tanstack/react-query": "^5.66.0",
+    "@trpc/client": "^11.17.0",
     "@trpc/server": "^11.0.0",
     "inversify": "^6.2.0",
     "payload": "^3.14.0",
+    "react": "^19.0.0",
     "reflect-metadata": "^0.2.2",
     "zod": "^3.24.0"
   },
@@ -35,6 +39,7 @@
     "@repo/core-testing": "workspace:*",
     "@repo/core-typescript": "workspace:*",
     "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
     "@vitest/coverage-v8": "^3.2.4",
     "vitest": "^3.1.0"
   }

packages/marketing-pages/src/ui/components/page-content.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { usePageBySlug } from "../hooks/use-page-by-slug";
+import { PageHero } from "./page-hero";
+
+export type PageContentProps = {
+  slug: string;
+};
+
+export function PageContent({ slug }: PageContentProps) {
+  const { data: page } = usePageBySlug(slug);
+
+  if (!page) return null;
+
+  return (
+    <article className="mx-auto max-w-3xl">
+      <PageHero hero={page.hero} />
+      <div className="prose text-foreground">
+        <pre className="whitespace-pre-wrap text-sm">
+          {JSON.stringify(page.layout, null, 2)}
+        </pre>
+      </div>
+    </article>
+  );
+}

packages/marketing-pages/src/ui/components/page-hero.tsx

@@ -0,0 +1,16 @@
+import type { Hero } from "../../entities/models/page";
+
+export type PageHeroProps = {
+  hero: Hero;
+};
+
+export function PageHero({ hero }: PageHeroProps) {
+  return (
+    <header className="mb-8">
+      <h1 className="text-3xl font-bold text-foreground">{hero.heading}</h1>
+      {hero.subheading ? (
+        <p className="mt-2 text-lg text-muted-foreground">{hero.subheading}</p>
+      ) : null}
+    </header>
+  );
+}

packages/marketing-pages/src/ui/hooks/use-page-by-slug.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useTRPC } from "@repo/core-trpc";
+import type { Page } from "../../entities/models/page";
+
+export function usePageBySlug(slug: string) {
+  const trpc = useTRPC();
+  return useSuspenseQuery(
+    trpc.marketingPages.pageBySlug.queryOptions({ slug }),
+  ) as { data: Page | null };
+}

packages/marketing-pages/src/ui/hooks/use-site-settings.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useTRPC } from "@repo/core-trpc";
+import type { SiteSettings } from "../../entities/models/site-settings";
+
+export function useSiteSettings() {
+  const trpc = useTRPC();
+  return useSuspenseQuery(
+    trpc.marketingPages.siteSettings.queryOptions({}),
+  ) as { data: SiteSettings };
+}

packages/marketing-pages/src/ui/index.ts

@@ -1 +1,5 @@
 export { pageBySlugQuery, siteSettingsQuery } from "./query";
+export { usePageBySlug } from "./hooks/use-page-by-slug";
+export { useSiteSettings } from "./hooks/use-site-settings";
+export { PageHero, type PageHeroProps } from "./components/page-hero";
+export { PageContent, type PageContentProps } from "./components/page-content";

packages/navigation/package.json

@@ -19,9 +19,13 @@
   },
   "dependencies": {
     "@repo/core-shared": "workspace:*",
+    "@repo/core-trpc": "workspace:^",
+    "@tanstack/react-query": "^5.66.0",
+    "@trpc/client": "^11.17.0",
     "@trpc/server": "^11.0.0",
     "inversify": "^6.2.0",
     "payload": "^3.14.0",
+    "react": "^19.0.0",
     "reflect-metadata": "^0.2.2",
     "zod": "^3.24.0"
   },
@@ -30,6 +34,7 @@
     "@repo/core-testing": "workspace:*",
     "@repo/core-typescript": "workspace:*",
     "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
     "@vitest/coverage-v8": "^3.2.4",
     "vitest": "^3.1.0"
   }

packages/navigation/src/ui/components/site-header.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useHeader } from "../hooks/use-header";
+
+export type SiteHeaderProps = {
+  siteName: string;
+  siteDescription?: string;
+};
+
+export function SiteHeader({ siteName, siteDescription }: SiteHeaderProps) {
+  const { data: header } = useHeader();
+
+  return (
+    <header className="border-b border-border bg-background px-6 py-4">
+      <div className="mx-auto flex max-w-5xl items-center justify-between">
+        <div>
+          <a href="/">
+            <span className="text-lg font-semibold text-foreground">
+              {siteName}
+            </span>
+          </a>
+          {siteDescription ? (
+            <p className="text-sm text-muted-foreground">{siteDescription}</p>
+          ) : null}
+        </div>
+        <nav>
+          <ul className="flex gap-4">
+            {header.items.map((item) => (
+              <li key={item.href}>
+                <a
+                  href={item.href}
+                  {...(item.external
+                    ? { target: "_blank", rel: "noopener noreferrer" }
+                    : {})}
+                  className="text-sm font-medium text-foreground hover:text-primary"
+                >
+                  {item.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}

packages/navigation/src/ui/hooks/use-header.ts

@@ -0,0 +1,15 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useTRPC } from "@repo/core-trpc";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function useHeader() {
+  const trpc = useTRPC();
+  return useSuspenseQuery(trpc.navigation.header.queryOptions({})) as {
+    data: {
+      items: { label: string; href: string; external: boolean }[];
+      logoId?: string;
+    };
+  };
+}

packages/navigation/src/ui/index.ts

@@ -1 +1,3 @@
 export { headerQuery } from "./query";
+export { useHeader } from "./hooks/use-header";
+export { SiteHeader, type SiteHeaderProps } from "./components/site-header";