From a28de6884c1395db576b0dcaf7c1a0f4fe169c68 Mon Sep 17 00:00:00 2001
From: danijel-lf <danijel.martinek@layerfinance.com>
Date: Tue, 26 May 2026 14:12:29 +0200
Subject: [PATCH] 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
---
 apps/web-next/src/app/about/page.tsx          | 34 ++++++-----
 apps/web-next/src/app/blog/[slug]/page.tsx    | 30 +++++-----
 apps/web-next/src/app/page.tsx                | 56 ++++++++-----------
 packages/blog/package.json                    |  5 ++
 .../blog/src/ui/components/article-card.tsx   | 23 ++++++++
 .../blog/src/ui/components/article-detail.tsx | 34 +++++++++++
 .../blog/src/ui/components/article-list.tsx   | 20 +++++++
 .../blog/src/ui/hooks/use-article-by-slug.ts  | 12 ++++
 .../blog/src/ui/hooks/use-article-list.ts     | 18 ++++++
 packages/blog/src/ui/index.ts                 |  8 +++
 packages/marketing-pages/package.json         |  5 ++
 .../src/ui/components/page-content.tsx        | 25 +++++++++
 .../src/ui/components/page-hero.tsx           | 16 ++++++
 .../src/ui/hooks/use-page-by-slug.ts          | 12 ++++
 .../src/ui/hooks/use-site-settings.ts         | 12 ++++
 packages/marketing-pages/src/ui/index.ts      |  4 ++
 packages/navigation/package.json              |  5 ++
 .../src/ui/components/site-header.tsx         | 46 +++++++++++++++
 .../navigation/src/ui/hooks/use-header.ts     | 15 +++++
 packages/navigation/src/ui/index.ts           |  2 +
 20 files changed, 320 insertions(+), 62 deletions(-)
 create mode 100644 packages/blog/src/ui/components/article-card.tsx
 create mode 100644 packages/blog/src/ui/components/article-detail.tsx
 create mode 100644 packages/blog/src/ui/components/article-list.tsx
 create mode 100644 packages/blog/src/ui/hooks/use-article-by-slug.ts
 create mode 100644 packages/blog/src/ui/hooks/use-article-list.ts
 create mode 100644 packages/marketing-pages/src/ui/components/page-content.tsx
 create mode 100644 packages/marketing-pages/src/ui/components/page-hero.tsx
 create mode 100644 packages/marketing-pages/src/ui/hooks/use-page-by-slug.ts
 create mode 100644 packages/marketing-pages/src/ui/hooks/use-site-settings.ts
 create mode 100644 packages/navigation/src/ui/components/site-header.tsx
 create mode 100644 packages/navigation/src/ui/hooks/use-header.ts

diff --git a/apps/web-next/src/app/about/page.tsx b/apps/web-next/src/app/about/page.tsx
index d9438b6..9c25016 100644
--- a/apps/web-next/src/app/about/page.tsx
+++ b/apps/web-next/src/app/about/page.tsx
@@ -1,31 +1,37 @@
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { appRouter } from "@repo/core-api";
+import { getQueryClient } from "@repo/core-trpc";
+import { PageContent } from "@repo/marketing-pages/ui";
 import { bindAll } from "../../server/bind-production";
 
 export default async function AboutPage() {
   await bindAll();
   const caller = appRouter.createCaller({});
+  const queryClient = getQueryClient();
+
   const page = await caller.marketingPages.pageBySlug({ slug: "about" });
 
+  queryClient.setQueryData(
+    ["marketingPages", "pageBySlug", { input: { slug: "about" } }],
+    page,
+  );
+
   if (!page) {
     return (
-      <main>
-        <h1>About</h1>
-        <p>This page hasn't been published yet.</p>
+      <main className="mx-auto max-w-3xl px-6 py-8">
+        <h1 className="text-3xl font-bold text-foreground">About</h1>
+        <p className="mt-2 text-muted-foreground">
+          This page hasn&apos;t been published yet.
+        </p>
       </main>
     );
   }
 
   return (
-    <main>
-      <article>
-        <header>
-          <h1>{page.hero.heading}</h1>
-          {page.hero.subheading ? <p>{page.hero.subheading}</p> : null}
-        </header>
-        <pre style={{ whiteSpace: "pre-wrap" }}>
-          {JSON.stringify(page.layout, null, 2)}
-        </pre>
-      </article>
-    </main>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <main className="px-6 py-8">
+        <PageContent slug="about" />
+      </main>
+    </HydrationBoundary>
   );
 }
diff --git a/apps/web-next/src/app/blog/[slug]/page.tsx b/apps/web-next/src/app/blog/[slug]/page.tsx
index c044e33..2a99c33 100644
--- a/apps/web-next/src/app/blog/[slug]/page.tsx
+++ b/apps/web-next/src/app/blog/[slug]/page.tsx
@@ -1,5 +1,8 @@
 import { notFound } from "next/navigation";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { appRouter } from "@repo/core-api";
+import { getQueryClient } from "@repo/core-trpc";
+import { ArticleDetail } from "@repo/blog/ui";
 import { bindAll } from "../../../server/bind-production";
 
 type PageProps = {
@@ -10,25 +13,22 @@ export default async function BlogPostPage({ params }: PageProps) {
   await bindAll();
   const { slug } = await params;
   const caller = appRouter.createCaller({});
+  const queryClient = getQueryClient();
+
   const article = await caller.blog.articleBySlug({ slug });
 
   if (!article) notFound();
 
+  queryClient.setQueryData(
+    ["blog", "articleBySlug", { input: { slug } }],
+    article,
+  );
+
   return (
-    <main>
-      <article>
-        <header>
-          <h1>{article.title}</h1>
-          {article.createdAt ? (
-            <time dateTime={article.createdAt.toISOString()}>
-              {article.createdAt.toLocaleDateString()}
-            </time>
-          ) : null}
-        </header>
-        <pre style={{ whiteSpace: "pre-wrap" }}>
-          {JSON.stringify(article.content, null, 2)}
-        </pre>
-      </article>
-    </main>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <main className="px-6 py-8">
+        <ArticleDetail slug={slug} />
+      </main>
+    </HydrationBoundary>
   );
 }
diff --git a/apps/web-next/src/app/page.tsx b/apps/web-next/src/app/page.tsx
index df98af7..f025554 100644
--- a/apps/web-next/src/app/page.tsx
+++ b/apps/web-next/src/app/page.tsx
@@ -1,10 +1,14 @@
-import Link from "next/link";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { appRouter } from "@repo/core-api";
+import { getQueryClient } from "@repo/core-trpc";
+import { SiteHeader } from "@repo/navigation/ui";
+import { ArticleList } from "@repo/blog/ui";
 import { bindAll } from "../server/bind-production";
 
 export default async function Home() {
   await bindAll();
   const caller = appRouter.createCaller({});
+  const queryClient = getQueryClient();
 
   const [siteSettings, header, articles] = await Promise.all([
     caller.marketingPages.siteSettings({}),
@@ -12,38 +16,24 @@ export default async function Home() {
     caller.blog.listArticles({ status: "published", limit: 20 }),
   ]);
 
-  return (
-    <main>
-      <header>
-        <h1>{siteSettings.siteName}</h1>
-        {siteSettings.siteDescription ? (
-          <p>{siteSettings.siteDescription}</p>
-        ) : null}
-        <nav>
-          <ul>
-            {header.items.map((item) => (
-              <li key={item.href}>
-                <Link href={item.href}>{item.label}</Link>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      </header>
+  queryClient.setQueryData(["navigation", "header", { input: {} }], header);
+  queryClient.setQueryData(
+    ["blog", "listArticles", { input: { status: "published", limit: 20 } }],
+    articles,
+  );
 
-      <section>
-        <h2>Latest articles</h2>
-        {articles.length === 0 ? (
-          <p>No published articles yet.</p>
-        ) : (
-          <ul>
-            {articles.map((a) => (
-              <li key={a.id}>
-                <Link href={`/blog/${a.slug}`}>{a.title}</Link>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-    </main>
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <SiteHeader
+        siteName={siteSettings.siteName}
+        siteDescription={siteSettings.siteDescription}
+      />
+      <main className="mx-auto max-w-5xl px-6 py-8">
+        <h2 className="mb-4 text-2xl font-bold text-foreground">
+          Latest articles
+        </h2>
+        <ArticleList />
+      </main>
+    </HydrationBoundary>
   );
 }
diff --git a/packages/blog/package.json b/packages/blog/package.json
index e950062..19876f0 100644
--- a/packages/blog/package.json
+++ b/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"
   }
diff --git a/packages/blog/src/ui/components/article-card.tsx b/packages/blog/src/ui/components/article-card.tsx
new file mode 100644
index 0000000..5d3dbf0
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/blog/src/ui/components/article-detail.tsx b/packages/blog/src/ui/components/article-detail.tsx
new file mode 100644
index 0000000..f615066
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/blog/src/ui/components/article-list.tsx b/packages/blog/src/ui/components/article-list.tsx
new file mode 100644
index 0000000..b78dd28
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/blog/src/ui/hooks/use-article-by-slug.ts b/packages/blog/src/ui/hooks/use-article-by-slug.ts
new file mode 100644
index 0000000..7c688d0
--- /dev/null
+++ b/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;
+  };
+}
diff --git a/packages/blog/src/ui/hooks/use-article-list.ts b/packages/blog/src/ui/hooks/use-article-list.ts
new file mode 100644
index 0000000..2898ae9
--- /dev/null
+++ b/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[] };
+}
diff --git a/packages/blog/src/ui/index.ts b/packages/blog/src/ui/index.ts
index 8129565..a20f21e 100644
--- a/packages/blog/src/ui/index.ts
+++ b/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";
diff --git a/packages/marketing-pages/package.json b/packages/marketing-pages/package.json
index d328a85..3c5ca17 100644
--- a/packages/marketing-pages/package.json
+++ b/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"
   }
diff --git a/packages/marketing-pages/src/ui/components/page-content.tsx b/packages/marketing-pages/src/ui/components/page-content.tsx
new file mode 100644
index 0000000..0f539f8
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/marketing-pages/src/ui/components/page-hero.tsx b/packages/marketing-pages/src/ui/components/page-hero.tsx
new file mode 100644
index 0000000..6e9507d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/marketing-pages/src/ui/hooks/use-page-by-slug.ts b/packages/marketing-pages/src/ui/hooks/use-page-by-slug.ts
new file mode 100644
index 0000000..62787d5
--- /dev/null
+++ b/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 };
+}
diff --git a/packages/marketing-pages/src/ui/hooks/use-site-settings.ts b/packages/marketing-pages/src/ui/hooks/use-site-settings.ts
new file mode 100644
index 0000000..c0ed45e
--- /dev/null
+++ b/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 };
+}
diff --git a/packages/marketing-pages/src/ui/index.ts b/packages/marketing-pages/src/ui/index.ts
index 0a540ae..38dbca1 100644
--- a/packages/marketing-pages/src/ui/index.ts
+++ b/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";
diff --git a/packages/navigation/package.json b/packages/navigation/package.json
index 8a914f1..ecb97e9 100644
--- a/packages/navigation/package.json
+++ b/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"
   }
diff --git a/packages/navigation/src/ui/components/site-header.tsx b/packages/navigation/src/ui/components/site-header.tsx
new file mode 100644
index 0000000..14028f9
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/navigation/src/ui/hooks/use-header.ts b/packages/navigation/src/ui/hooks/use-header.ts
new file mode 100644
index 0000000..a9c618c
--- /dev/null
+++ b/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;
+    };
+  };
+}
diff --git a/packages/navigation/src/ui/index.ts b/packages/navigation/src/ui/index.ts
index ad7dc5f..75e6e9a 100644
--- a/packages/navigation/src/ui/index.ts
+++ b/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";