create-fate 0.0.0 → 1.0.0

package/templates/fate/void/src/ui/EventCard.tsx

@@ -0,0 +1,152 @@
+import Stack, { VStack } from '@nkzw/stack';
+import { ArrowUpRight, CalendarDays, MapPin, Users } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useView, view, ViewRef } from 'react-fate';
+import type { Event, EventAttendee } from '../fate/views.ts';
+import formatLabel from '../lib/formatLabel.tsx';
+import { Badge } from '../ui/Badge.tsx';
+import Card from '../ui/Card.tsx';
+import { UserView } from '../ui/UserCard.tsx';
+
+const EventAttendeeView = view<EventAttendee>()({
+  id: true,
+  notes: true,
+  status: true,
+  user: UserView,
+});
+
+export const EventView = view<Event>()({
+  attendees: {
+    items: {
+      node: EventAttendeeView,
+    },
+  },
+  attendingCount: true,
+  capacity: true,
+  description: true,
+  endAt: true,
+  host: UserView,
+  id: true,
+  livestreamUrl: true,
+  location: true,
+  name: true,
+  startAt: true,
+  topics: true,
+  type: true,
+});
+
+const EventAttendeeChip = ({ attendee: attendeeRef }: { attendee: ViewRef<'EventAttendee'> }) => {
+  const attendee = useView(EventAttendeeView, attendeeRef);
+  const user = useView(UserView, attendee.user);
+
+  return (
+    <Badge className="text-nowrap" key={attendee.id} variant="outline">
+      {user?.name ?? 'Guest'} · {formatLabel(attendee.status)}
+    </Badge>
+  );
+};
+
+const hydrationSafeDateTimeFormatter = new Intl.DateTimeFormat('en-US', {
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  month: 'short',
+  timeZone: 'UTC',
+});
+
+const localDateTimeFormatter = new Intl.DateTimeFormat(undefined, {
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  month: 'short',
+});
+
+const formatDateTime = (date: string, local: boolean) =>
+  (local ? localDateTimeFormatter : hydrationSafeDateTimeFormatter).format(new Date(date));
+
+const EventDateTime = ({ endAt, startAt }: { endAt: string; startAt: string }) => {
+  const [local, setLocal] = useState(false);
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setLocal(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
+  return (
+    <>
+      {formatDateTime(startAt, local)} → {formatDateTime(endAt, local)}
+    </>
+  );
+};
+
+export default function EventCard({ event: eventRef }: { event: ViewRef<'Event'> }) {
+  const event = useView(EventView, eventRef);
+  const host = useView(UserView, event.host);
+  const attendees = event.attendees?.items ?? [];
+  const topics = event.topics ?? [];
+
+  return (
+    <Card key={event.id}>
+      <VStack gap={12}>
+        <Stack alignCenter between gap={12}>
+          <div>
+            <h4 className="text-base font-semibold text-foreground">{event.name}</h4>
+            <p className="text-sm text-muted-foreground">{event.description}</p>
+          </div>
+          <Badge className="text-nowrap" variant="secondary">
+            {formatLabel(event.type)}
+          </Badge>
+        </Stack>
+        <Stack alignCenter gap>
+          <CalendarDays className="text-muted-foreground" size={14} />
+          <span className="text-sm text-foreground/80">
+            <EventDateTime endAt={event.endAt} startAt={event.startAt} />
+          </span>
+        </Stack>
+        <Stack alignCenter gap>
+          <MapPin className="text-muted-foreground" size={14} />
+          <span className="text-sm text-foreground/80">{event.location}</span>
+        </Stack>
+        <Stack alignCenter gap>
+          <Users className="text-muted-foreground" size={14} />
+          <span className="text-sm text-foreground/80">
+            {event.attendingCount ?? attendees.length} attending · capacity {event.capacity}
+          </span>
+        </Stack>
+        <Stack alignCenter gap>
+          <ArrowUpRight className="text-muted-foreground" size={14} />
+          <span className="text-sm text-foreground/80">Hosted by {host?.name ?? 'Unknown'}</span>
+        </Stack>
+        {topics.length ? (
+          <Stack gap wrap>
+            {topics.map((topic) => (
+              <Badge className="text-nowrap" key={topic} variant="outline">
+                {topic}
+              </Badge>
+            ))}
+          </Stack>
+        ) : null}
+        {attendees.length ? (
+          <VStack gap>
+            <span className="text-xs text-muted-foreground">Community RSVPs</span>
+            <Stack gap wrap>
+              {attendees.slice(0, 4).map(({ node }) => (
+                <EventAttendeeChip attendee={node} key={node.id} />
+              ))}
+            </Stack>
+          </VStack>
+        ) : null}
+        {event.livestreamUrl ? (
+          <a
+            className="text-primary text-sm font-medium hover:underline"
+            href={event.livestreamUrl}
+            rel="noreferrer"
+            target="_blank"
+          >
+            Join livestream
+          </a>
+        ) : null}
+      </VStack>
+    </Card>
+  );
+}

package/templates/fate/void/src/ui/H2.tsx

@@ -0,0 +1,15 @@
+import cx from '../lib/cx.tsx';
+
+export default function H2({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <h2 className={cx('text-2xl font-semibold text-gray-900 dark:text-gray-50', className)}>
+      {children}
+    </h2>
+  );
+}

package/templates/fate/void/src/ui/H3.tsx

@@ -0,0 +1,20 @@
+import cx from '../lib/cx.tsx';
+
+export default function H2({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <h3
+      className={cx(
+        'bg-linear-to-r from-slate-900 to-slate-600 bg-clip-text text-lg font-semibold tracking-widest text-transparent uppercase opacity-100 transition duration-150 hover:opacity-70 active:translate-y-[1.5px] dark:from-white dark:to-slate-200',
+        className,
+      )}
+    >
+      {children}
+    </h3>
+  );
+}

package/templates/fate/void/src/ui/Header.tsx

@@ -0,0 +1,96 @@
+import Stack from '@nkzw/stack';
+import { useRouter, useShared } from '@void/react';
+import { ChevronLeft, LogIn, LogOut, Search } from 'lucide-react';
+import type { SharedData } from '../lib/shared.ts';
+import AuthClient from '../user/AuthClient.tsx';
+import { Button } from './Button.tsx';
+import Link from './Link.tsx';
+
+export default function Header() {
+  const router = useRouter();
+  const { auth } = useShared<SharedData>();
+  const pathname = router.path;
+  const session = auth.user;
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-white/60 bg-white/60 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/70">
+      <Stack
+        alignCenter
+        between
+        className="max-w-8xl relative container mx-auto h-16 px-6 lg:px-8"
+        gap={16}
+      >
+        <Link
+          href="/"
+          onClick={() =>
+            pathname !== '/' && history.state?.idx > 0 ? history.back() : router.visit('/')
+          }
+        >
+          <Stack alignCenter gap={12}>
+            <div className="squircle relative flex h-10 w-10 items-center justify-center bg-linear-to-br from-gray-100 to-gray-200 text-white shadow-lg shadow-gray-500/20 transition duration-250 hover:scale-110 active:scale-90">
+              {pathname === '/' ? (
+                <svg
+                  className="h-6 w-6 text-gray-500"
+                  preserveAspectRatio="xMidYMax"
+                  viewBox="0 0 160 160"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M108.301 17.465h.272c1.797-.005 3.563.177 5.331.496l.349.063c5.588 1.02 10.731 3.447 15.201 6.933l.347.267c1.579 1.26 3.083 2.684 4.386 4.227l.161.186c4.018 4.719 6.924 10.686 7.767 16.852l.033.239c.262 1.848.351 3.688.352 5.551l.001.307c-.001 1.623-.092 3.188-.386 4.788l-.05.292c-1.003 5.874-3.476 11.447-7.286 16.034l-.29.358c-1.422 1.721-3.011 3.382-4.797 4.729l-.444.354c-3.046 2.405-6.436 4.147-10.084 5.442l-.497.186c-1.766.627-3.615.974-5.465 1.266l-.364.058c-1.591.238-3.185.286-4.791.281h-.499l-1.339-.002h-1.408c-.886-.001-1.772-.001-2.656-.003-3.085-.001-6.163-.005-9.247-.008v-12.78l3.606-.006 2.282-.007c1.205-.006 2.407-.01 3.611-.011.878 0 1.754-.003 2.63-.007.462-.002.928-.005 1.389-.002 6.302.01 12.003-1.72 16.65-6.117l.291-.272c3.951-3.807 6.097-9.302 6.241-14.736.04-3.078-.476-6.048-1.68-8.892l-.104-.244c-2.382-5.559-6.98-9.439-12.504-11.675-2.204-.816-4.522-1.16-6.863-1.134-.301.004-.606.004-.909.001-1.677.003-3.304.127-4.924.591l-.331.098c-2.625.758-5.093 1.928-7.254 3.607l-.323.249c-1.046.817-2.031 1.682-2.873 2.71l-.154.179c-2.354 2.782-3.9 5.988-4.727 9.529l-.054.229c-.391 1.8-.423 3.633-.42 5.471l-.001.74c.002 1.4.001 2.801-.004 4.201l-.004 3.779c0 1.824-.001 3.649-.003 5.473l-.006 2.813-.005 6.076-.001.267-.008 8.614c-.001 2.023-.004 4.045-.006 6.066v.259l-.004 2.55-.006 5.46c0 1.331-.001 2.658-.003 3.985-.002.72-.002 1.438-.002 2.156 0 .658 0 1.317-.002 1.978v.708c.004 2.098-.07 4.214-.545 6.263l-.077.359-.161.716c-.071.302-.136.605-.199.909-.55 2.538-1.6 5.067-2.832 7.348l-.214.42c-.965 1.921-2.22 3.714-3.574 5.38l-.152.183c-.78.973-1.639 1.866-2.519 2.751l-.308.313a25.81 25.81 0 0 1-2.226 1.955l-.22.179c-3.698 2.953-7.975 5.044-12.538 6.262-.212.056-.422.115-.631.176-8.366 2.287-17.8.738-25.278-3.512-3.639-2.122-7.171-4.945-9.721-8.307-.121-.15-.241-.298-.356-.448a36.247 36.247 0 0 1-2.605-3.814l-.144-.234c-.889-1.466-1.562-3.034-2.222-4.617l-.11-.265c-3.253-7.791-2.911-17.367.184-25.133.865-2.069 1.869-4.089 3.123-5.951l.172-.261a31.91 31.91 0 0 1 2.547-3.29l.229-.263c.13-.152.266-.304.396-.452l.425-.493c1.216-1.389 2.593-2.615 4.068-3.723.208-.157.414-.315.62-.476 1.184-.901 2.437-1.665 3.729-2.4l.272-.159c1.586-.893 3.235-1.573 4.934-2.21l.253-.097c4.232-1.567 8.615-1.836 13.079-1.82 1.359 0 2.732.002 4.093.007 1.209.005 2.417.006 3.621.006 1.899.002 3.794.007 5.688.012v12.78l-3.612.013-2.282.011c-1.201.005-2.401.012-3.61.016-.876.003-1.751.005-2.629.013-.463.002-.924.005-1.387.006-4.322.005-8.193.592-12.033 2.662l-.217.114c-1.458.773-2.697 1.731-3.908 2.849-.206.185-.413.362-.63.535-.435.376-.794.788-1.16 1.232l-.153.18a21.18 21.18 0 0 0-4.474 8.651l-.094.342c-.42 1.682-.54 3.395-.536 5.127v.272c.019 5.672 2.392 10.671 6.206 14.769l.215.237c3.296 3.453 8.483 5.917 13.247 6.046.448.008.896.01 1.345.01.276 0 .553.003.835.005 4.917.019 9.864-1.73 13.577-4.995l.303-.267c.299-.263.592-.527.881-.799l.262-.247c.787-.756 1.451-1.599 2.104-2.474l.151-.201c1.929-2.606 3.117-5.723 3.635-8.909l.059-.362c.194-1.296.21-2.573.207-3.883l.003-.74v-2.02c0-.73 0-1.459.005-2.188v-3.782c0-1.827.004-3.654.007-5.481 0-.939 0-1.877.004-2.816l.003-6.082v-.268c.005-2.876.008-5.75.008-8.627l.013-8.883c.004-1.823.004-3.646.004-5.469 0-1.33.004-2.659.004-3.989.003-.721.003-1.442.003-2.159v-1.98c.005-.237.005-.473 0-.711-.011-8.523 3.072-17.023 8.941-23.268.244-.263.483-.531.717-.805.416-.48.861-.918 1.324-1.352l.252-.232a26.259 26.259 0 0 1 2.184-1.812l.46-.349c1.39-1.058 2.837-1.951 4.375-2.775l.318-.172c5.005-2.666 10.5-3.877 16.15-3.889Z"
+                    fill="currentColor"
+                    style={{ transformBox: 'fill-box', transformOrigin: '50% 50%' }}
+                    transform="rotate(-31 0 0)"
+                  />
+                </svg>
+              ) : (
+                <ChevronLeft className="h-6 w-6 text-gray-500" />
+              )}
+            </div>
+            <div className="opacity-100 transition-opacity duration-250 hover:opacity-70">
+              <span className="bg-linear-to-r from-gray-500 to-gray-900 bg-clip-text text-xl font-semibold text-transparent dark:from-gray-200 dark:to-white">
+                <span className="italic">fate</span>
+              </span>
+              <p className="hidden text-xs text-muted-foreground sm:block">
+                A modern data client for React.
+              </p>
+            </div>
+          </Stack>
+        </Link>
+        <Stack alignCenter>
+          <Button asChild size="sm" variant="ghost">
+            <Link href="/search">
+              <Search className="h-4 w-4" />
+              <span className="hidden sm:inline">Search</span>
+            </Link>
+          </Button>
+          {session ? (
+            <>
+              <Button asChild size="sm" variant="ghost">
+                <Stack
+                  alignCenter
+                  as="a"
+                  className="text-sm font-medium text-gray-700 transition hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
+                  gap={4}
+                  onClick={async () => {
+                    await AuthClient.signOut();
+                    router.flushAll();
+                    await router.refresh({ preserveState: false });
+                  }}
+                >
+                  <LogOut className="h-4 w-4" />
+                  <span className="hidden sm:inline">Logout</span>
+                </Stack>
+              </Button>
+            </>
+          ) : (
+            <Button asChild size="sm" variant="ghost">
+              <Link href="/login">
+                <LogIn className="h-4 w-4" /> Login
+              </Link>
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+    </header>
+  );
+}

package/templates/fate/void/src/ui/Input.tsx

@@ -0,0 +1,33 @@
+import { InputHTMLAttributes, Ref } from 'react';
+import cx from '../lib/cx.tsx';
+
+export default function Input({
+  className,
+  ...props
+}: InputHTMLAttributes<HTMLInputElement> & { ref?: Ref<HTMLInputElement> }) {
+  return (
+    <input
+      className={cx(
+        'border-input squircle flex w-32 border bg-background px-3 py-2 text-sm text-foreground shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:ring-offset-background focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900/40',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CheckBox({
+  className,
+  ...props
+}: InputHTMLAttributes<HTMLInputElement> & { ref?: Ref<HTMLInputElement> }) {
+  return (
+    <Input
+      className={cx(
+        "duration-150ms relative h-6 w-6 shrink-0 cursor-pointer appearance-none p-0 after:absolute after:inset-0.5 after:h-4.5 after:w-4.5 after:rounded-4xl after:bg-foreground/60 after:opacity-0 after:transition-opacity after:content-[''] after:[corner-shape:squircle] checked:border-foreground/50 checked:after:block checked:after:opacity-100 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      type="checkbox"
+      {...props}
+    />
+  );
+}

package/templates/fate/void/src/ui/Link.tsx

@@ -0,0 +1,11 @@
+import { Link as VoidLink } from '@void/react';
+import type { ComponentProps } from 'react';
+
+export type LinkProps = Omit<ComponentProps<typeof VoidLink>, 'href'> & {
+  href?: string;
+  to?: string;
+};
+
+export default function Link({ href, to, ...props }: LinkProps) {
+  return <VoidLink href={href ?? to ?? '/'} {...props} />;
+}

package/templates/fate/void/src/ui/Number.tsx

@@ -0,0 +1,5 @@
+const numberFormatter = new Intl.NumberFormat(undefined);
+
+export default function Number({ value }: { value: number }) {
+  return <>{numberFormatter.format(value)}</>;
+}

package/templates/fate/void/src/ui/PostCard.tsx

@@ -0,0 +1,294 @@
+import Stack, { VStack } from '@nkzw/stack';
+import { useShared } from '@void/react';
+import { cx } from 'class-variance-authority';
+import {
+  KeyboardEvent,
+  startTransition,
+  useActionState,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useFateClient, useLiveListView, useLiveView, useView, view, ViewRef } from 'react-fate';
+import type { Category, Comment as InlineComment, Post } from '../fate/server.ts';
+import type { SharedData } from '../lib/shared.ts';
+import { Button } from '../ui/Button.tsx';
+import Card from '../ui/Card.tsx';
+import TagBadge, { TagView } from '../ui/TagBadge.tsx';
+import { Badge } from './Badge.tsx';
+import CommentCard, { CommentView } from './CommentCard.tsx';
+import H3 from './H3.tsx';
+import Link from './Link.tsx';
+import { UserView } from './UserCard.tsx';
+
+const CategorySummaryView = view<Category>()({
+  id: true,
+  name: true,
+});
+
+const CommentConnectionView = {
+  args: { first: 3 },
+  items: {
+    node: CommentView,
+  },
+  live: {
+    append: 'visible',
+  },
+};
+
+export const PostView = view<Post>()({
+  author: UserView,
+  category: CategorySummaryView,
+  commentCount: true,
+  comments: CommentConnectionView,
+  content: true,
+  id: true,
+  likes: true,
+  tags: {
+    items: {
+      node: TagView,
+    },
+  },
+  title: true,
+});
+
+const CommentInput = ({
+  error,
+  post,
+}: {
+  error?: unknown;
+  post: { commentCount: number; id: string };
+}) => {
+  const fate = useFateClient();
+  const { auth } = useShared<SharedData>();
+  const user = auth.user;
+  const [commentText, setCommentText] = useState('');
+
+  const [result, addComment, isPending] = useActionState(async () => {
+    const content = commentText.trim();
+
+    if (!content) {
+      return;
+    }
+
+    const result = await fate.mutations.comment.add({
+      input: { content, postId: post.id },
+      optimistic: {
+        author: user ? { id: user.id, name: user.name } : null,
+        content,
+        id: `optimistic:${Date.now().toString(36)}`,
+        post: { commentCount: post.commentCount + 1, id: post.id },
+      },
+      view: view<InlineComment>()({
+        ...CommentView,
+        post: { commentCount: true },
+      }),
+    });
+
+    setCommentText('');
+
+    return result;
+  }, null);
+
+  const maybeSubmitComment = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+      startTransition(addComment);
+    }
+  };
+
+  const commentingIsDisabled = isPending || commentText.trim().length === 0;
+
+  const anyServerError = error || result?.error;
+
+  return (
+    <VStack action={addComment} as="form" gap>
+      <span className="text-sm font-medium text-foreground">Add a comment</span>
+      <textarea
+        className="squircle min-h-20 w-full border border-gray-200/80 bg-gray-100/50 p-3 text-sm placeholder-gray-500 transition outline-none focus:border-gray-500 focus:ring-2 focus:ring-gray-200 disabled:opacity-50 dark:border-neutral-800 dark:bg-neutral-900/40 dark:placeholder-gray-400"
+        disabled={isPending}
+        onChange={(event) => setCommentText(event.target.value)}
+        onKeyDown={maybeSubmitComment}
+        placeholder={user?.name ? `Share your thoughts, ${user.name}!` : 'Share your thoughts...'}
+        value={commentText}
+      />
+      {anyServerError ? (
+        <p className="text-sm text-destructive">
+          {anyServerError instanceof Error
+            ? anyServerError.message
+            : 'Something went wrong. Please try again.'}
+        </p>
+      ) : null}
+      <Stack end gap>
+        <Button disabled={commentingIsDisabled} size="sm" type="submit" variant="secondary">
+          Post comment
+        </Button>
+      </Stack>
+    </VStack>
+  );
+};
+
+export function PostCard({ detail, post: postRef }: { detail?: boolean; post: ViewRef<'Post'> }) {
+  const fate = useFateClient();
+  const post = useLiveView(PostView, postRef);
+  const author = useView(UserView, post.author);
+  const category = useView(CategorySummaryView, post.category);
+  const [comments, loadNext] = useLiveListView(CommentConnectionView, post.comments);
+  const tags = post.tags?.items ?? [];
+
+  const [likeResult, likeAction, likeIsPending] = useActionState(fate.actions.post.like, null);
+
+  const [, unlikeAction, unlikeIsPending] = useActionState(fate.actions.post.unlike, null);
+
+  useEffect(() => {
+    if (likeResult?.error) {
+      const timeout = setTimeout(() => startTransition(() => likeAction('reset')), 3000);
+      return () => clearTimeout(timeout);
+    }
+  }, [likeAction, likeResult]);
+
+  const handleLike = useCallback(
+    async (options?: { error?: 'boundary' | 'callSite'; slow?: boolean }) => {
+      likeAction({
+        input: { id: post.id, ...options },
+        optimistic: { likes: post.likes + 1 },
+        view: PostView,
+      });
+    },
+    [likeAction, post.id, post.likes],
+  );
+
+  const handleUnlike = useCallback(async () => {
+    unlikeAction({
+      input: { id: post.id },
+      optimistic: {
+        likes: Math.max(post.likes - 1, 0),
+      },
+      view: PostView,
+    });
+  }, [post.id, post.likes, unlikeAction]);
+
+  return (
+    <Card>
+      <VStack gap={16}>
+        <Stack alignStart between gap={16} wrap>
+          <VStack gap>
+            <Link href={`/post/${post.id}`}>
+              <H3>{post.title}</H3>
+            </Link>
+            <Stack alignCenter gap wrap>
+              {category ? (
+                <Link href={`/category/${category.id}`}>
+                  <Badge className="bg-blue-50 text-blue-600 transition hover:bg-blue-100 dark:bg-blue-950/50 dark:text-blue-200 dark:hover:bg-blue-900/60">
+                    {category.name}
+                  </Badge>
+                </Link>
+              ) : null}
+              {tags.length ? (
+                <Stack gap wrap>
+                  {tags.map(({ node }) => (
+                    <TagBadge key={node.id} tag={node} />
+                  ))}
+                </Stack>
+              ) : null}
+            </Stack>
+          </VStack>
+          <Stack alignCenter gap={12} wrap>
+            <Stack
+              alignCenter
+              className="squircle bg-slate-100 px-3 py-2 text-sm font-semibold text-slate-800 dark:bg-neutral-800 dark:text-white"
+              gap
+            >
+              <span>👍</span>
+              <span>
+                {post.likes} {post.likes === 1 ? 'like' : 'likes'}
+              </span>
+            </Stack>
+            <Button action={handleLike} disabled={likeIsPending} size="sm" variant="outline">
+              Like
+            </Button>
+            {detail && (
+              <Button
+                action={() => handleLike({ slow: true })}
+                disabled={likeIsPending}
+                size="sm"
+                variant="outline"
+              >
+                Like (Slow)
+              </Button>
+            )}
+            {detail && (
+              <Button
+                action={() => handleLike({ error: 'callSite' })}
+                className={cx(
+                  'w-32 transition-colors duration-150',
+                  likeResult?.error ? 'border-red-500 text-red-500 hover:text-red-500' : '',
+                )}
+                disabled={likeIsPending}
+                size="sm"
+                variant="outline"
+              >
+                {likeResult?.error ? 'Oops, try again!' : `Like (Error)`}
+              </Button>
+            )}
+            {detail && (
+              <Button
+                action={() => handleLike({ error: 'boundary' })}
+                disabled={likeIsPending}
+                size="sm"
+                variant="outline"
+              >
+                Like (Network Error)
+              </Button>
+            )}
+            {detail && (
+              <Button
+                onClick={() =>
+                  fate.mutations.post.like({
+                    input: { id: post.id },
+                    optimistic: { likes: post.likes + 1 },
+                    view: PostView,
+                  })
+                }
+                size="sm"
+                variant="outline"
+              >
+                Like (Many)
+              </Button>
+            )}
+            <Button
+              action={handleUnlike}
+              disabled={unlikeIsPending || post.likes === 0}
+              size="sm"
+              variant="outline"
+            >
+              Unlike
+            </Button>
+          </Stack>
+        </Stack>
+        <p className="text-sm leading-relaxed text-foreground/90 lg:text-base">{post.content}</p>
+        <p className="text-sm text-muted-foreground">- {author?.name ?? 'Unknown author'}</p>
+        <VStack gap={16}>
+          <h4 className="text-base font-semibold text-foreground">
+            {post.commentCount} {post.commentCount === 1 ? 'Comment' : 'Comments'}
+          </h4>
+          {comments.length > 0 ? (
+            <VStack gap={12}>
+              {comments.map(({ node }) => (
+                <CommentCard comment={node} key={node.id} post={post} />
+              ))}
+              {loadNext ? (
+                <Button onClick={loadNext} variant="ghost">
+                  Load more comments
+                </Button>
+              ) : null}
+            </VStack>
+          ) : null}
+          <ErrorBoundary fallbackRender={({ error }) => <CommentInput error={error} post={post} />}>
+            <CommentInput post={post} />
+          </ErrorBoundary>
+        </VStack>
+      </VStack>
+    </Card>
+  );
+}

package/templates/fate/void/src/ui/Section.tsx

@@ -0,0 +1,23 @@
+import { Gap, VStack } from '@nkzw/stack';
+import { ReactNode } from 'react';
+import cx from '../lib/cx.tsx';
+
+export default function Section({
+  children,
+  className,
+  gap,
+}: {
+  children: ReactNode;
+  className?: string;
+  gap?: Gap;
+}) {
+  return (
+    <VStack
+      as="section"
+      className={cx('max-w-8xl container mx-auto px-4 py-6 lg:px-8 lg:py-10', className)}
+      gap={gap}
+    >
+      {children}
+    </VStack>
+  );
+}

package/templates/fate/void/src/ui/TagBadge.tsx

@@ -0,0 +1,23 @@
+import { useView, view, ViewRef } from 'react-fate';
+import { Tag } from '../fate/server.ts';
+import { Badge } from './Badge.tsx';
+
+export const TagView = view<Tag>()({
+  description: true,
+  id: true,
+  name: true,
+});
+
+export default function TagBadge({ tag: tagRef }: { tag: ViewRef<'Tag'> }) {
+  const tag = useView(TagView, tagRef);
+
+  if (!tag) {
+    return null;
+  }
+
+  return (
+    <Badge className="bg-secondary/70 text-secondary-foreground" variant="secondary">
+      #{tag.name}
+    </Badge>
+  );
+}