refactor: split feature UI into .server/.client component pairs

Server components (.server.tsx) resolve controllers from DI, prefetch
data, and wrap client components in HydrationBoundary. Client components
(.client.tsx) use hooks for hydration + background refetch. Barrel
exports server components under clean names — consumers never see the
server/client split.

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

@@ -0,0 +1,24 @@
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { getQueryClient } from "@repo/core-trpc";
+import { blogContainer } from "../../di/container";
+import { BLOG_SYMBOLS } from "../../di/symbols";
+import type { IGetArticleBySlugController } from "../../interface-adapters/controllers/get-article-by-slug.controller";
+import { ArticleDetail as ArticleDetailClient } from "./article-detail.client";
+
+export async function ArticleDetail({ slug }: { slug: string }) {
+  const controller = blogContainer.get<IGetArticleBySlugController>(
+    BLOG_SYMBOLS.IGetArticleBySlugController,
+  );
+  const article = await controller({ slug });
+  const queryClient = getQueryClient();
+  queryClient.setQueryData(
+    ["blog", "articleBySlug", { input: { slug } }],
+    article,
+  );
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ArticleDetailClient slug={slug} />
+    </HydrationBoundary>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { getQueryClient } from "@repo/core-trpc";
+import { blogContainer } from "../../di/container";
+import { BLOG_SYMBOLS } from "../../di/symbols";
+import type { IGetArticlesController } from "../../interface-adapters/controllers/get-articles.controller";
+import { ArticleList as ArticleListClient } from "./article-list.client";
+
+export async function ArticleList() {
+  const controller = blogContainer.get<IGetArticlesController>(
+    BLOG_SYMBOLS.IGetArticlesController,
+  );
+  const articles = await controller({ status: "published", limit: 20 });
+  const queryClient = getQueryClient();
+  queryClient.setQueryData(
+    ["blog", "listArticles", { input: { status: "published", limit: 20 } }],
+    articles,
+  );
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ArticleListClient />
+    </HydrationBoundary>
+  );
+}

packages/blog/src/ui/index.ts

@@ -2,8 +2,5 @@ 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";
+export { ArticleList } from "./components/article-list.server";
+export { ArticleDetail } from "./components/article-detail.server";