create-fate 0.0.0 → 1.0.0

package/templates/fate/prisma/client/pages/login.tsx

@@ -0,0 +1,107 @@
+import Stack, { VStack } from '@nkzw/stack';
+import { useRouter } from '@void/react';
+import { fbs } from 'fbtee';
+import { ExternalLinkIcon } from 'lucide-react';
+import { useActionState, useEffect, useState } from 'react';
+import { AsyncButton } from '../src/ui/Button.tsx';
+import Card from '../src/ui/Card.tsx';
+import H2 from '../src/ui/H2.tsx';
+import Input from '../src/ui/Input.tsx';
+import Section from '../src/ui/Section.tsx';
+import AuthClient from '../src/user/AuthClient.tsx';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const router = useRouter();
+  const { data: session } = AuthClient.useSession();
+
+  const [, signInAction] = useActionState(async () => {
+    await AuthClient.signIn.email(
+      {
+        email,
+        password,
+      },
+      {
+        onError: () => {},
+        onRequest: () => {},
+        onSuccess: () => {
+          router.flushAll();
+          void router.visit('/', { replace: true });
+        },
+      },
+    );
+
+    return null;
+  }, null);
+
+  useEffect(() => {
+    if (session) {
+      router.flushAll();
+      void router.visit('/', { replace: true });
+    }
+  }, [router, session]);
+
+  if (session) {
+    return null;
+  }
+
+  return (
+    <Section>
+      <VStack center gap={16}>
+        <H2 className="pl-5">
+          <fbt desc="Sign In headline">Sign In</fbt>
+        </H2>
+        <Stack gap={32} wrap>
+          <Card className="w-84">
+            <Stack gap vertical>
+              <VStack action={signInAction} as="form" gap={12}>
+                <Input
+                  className="w-48"
+                  name="email"
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder={fbs('email', 'Email placeholder')}
+                  type="email"
+                  value={email}
+                />
+                <Input
+                  className="w-48"
+                  name="password"
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder={fbs('password', 'Password placeholder')}
+                  type="password"
+                  value={password}
+                />
+                <div>
+                  <AsyncButton type="submit" variant="outline">
+                    <fbt desc="Sign in button">Sign In</fbt>
+                  </AsyncButton>
+                </div>
+              </VStack>
+            </Stack>
+          </Card>
+          <Card className="w-84">
+            <p>
+              <fbt desc="Login details">
+                Try one of the
+                <Stack
+                  alignCenter
+                  as="a"
+                  className="inline-flex! px-1 underline hover:no-underline"
+                  gap={4}
+                  href="https://github.com/nkzw-tech/fate/blob/main/packages/create-fate/templates/fate/prisma/server/src/prisma/seedData.ts#L1"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  Example Accounts
+                  <ExternalLinkIcon className="h-4 w-4" />
+                </Stack>{' '}
+                in the seed data.
+              </fbt>
+            </p>
+          </Card>
+        </Stack>
+      </VStack>
+    </Section>
+  );
+}

package/templates/fate/prisma/client/pages/post/[id].tsx

@@ -0,0 +1,22 @@
+import { useParams } from '@void/react';
+import { useRequest } from 'react-fate';
+import { PostCard, PostView } from '../../src/ui/PostCard.tsx';
+import Section from '../../src/ui/Section.tsx';
+
+export default function PostPage() {
+  const { id } = useParams<{ id: string }>();
+
+  if (!id) {
+    throw new Error('fate: Post ID is required.');
+  }
+
+  const { post } = useRequest({
+    post: { id, view: PostView },
+  });
+
+  return (
+    <Section>
+      <PostCard detail post={post} />
+    </Section>
+  );
+}

package/templates/fate/prisma/client/pages/search.tsx

@@ -0,0 +1,95 @@
+import type { Comment, Post } from '@app/server/src/trpc/views.ts';
+import Stack, { VStack } from '@nkzw/stack';
+import { fbs } from 'fbtee';
+import { Suspense, useDeferredValue, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useRequest, useView, view, ViewRef } from 'react-fate';
+import cx from '../src/lib/cx.tsx';
+import Card from '../src/ui/Card.tsx';
+import CommentCard, { CommentView } from '../src/ui/CommentCard.tsx';
+import Error from '../src/ui/Error.tsx';
+import Input from '../src/ui/Input.tsx';
+import Section from '../src/ui/Section.tsx';
+
+const CommentPostView = view<Post>()({
+  commentCount: true,
+  id: true,
+  title: true,
+});
+
+const CommentSearchView = view<Comment>()({
+  ...CommentView,
+  id: true,
+  post: CommentPostView,
+});
+
+const CommentResult = ({ comment: commentRef }: { comment: ViewRef<'Comment'> }) => {
+  const comment = useView(CommentSearchView, commentRef);
+  const post = useView(CommentPostView, comment.post);
+
+  return <CommentCard comment={comment} link post={post} />;
+};
+
+const SearchResults = ({ isStale, query }: { isStale: boolean; query: string }) => {
+  const { commentSearch } = useRequest({
+    commentSearch: { args: { query }, list: CommentSearchView },
+  });
+
+  if (commentSearch.length === 0) {
+    return (
+      <p>
+        <fbt desc="No matches text">
+          No matches for{' '}
+          <i>
+            &quot;<fbt:param name="query">{query}</fbt:param>&quot;
+          </i>
+        </fbt>
+      </p>
+    );
+  }
+
+  return (
+    <VStack className={cx(isStale && 'opacity-50')} gap={12}>
+      {commentSearch.map((comment) => (
+        <CommentResult comment={comment} key={comment.id} />
+      ))}
+    </VStack>
+  );
+};
+
+export default function SearchPage() {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+  const isStale = query !== deferredQuery;
+
+  return (
+    <Section>
+      <Card>
+        <Stack alignCenter between gap={16}>
+          <Input
+            className="w-64"
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={fbs('Search comments...', 'Search input placeholder')}
+            ref={(ref) => ref?.focus()}
+            value={query}
+          />
+          <div className="text-xs text-muted-foreground">
+            <fbt desc="Slowdown label explanation">500ms artificial slowdown</fbt>
+          </div>
+        </Stack>
+
+        <ErrorBoundary FallbackComponent={Error}>
+          <Suspense
+            fallback={
+              <h2>
+                <fbt desc="Text for thinking/loading screen">Thinking…</fbt>
+              </h2>
+            }
+          >
+            {query.trim().length > 0 ? <SearchResults isStale={isStale} query={query} /> : null}
+          </Suspense>
+        </ErrorBoundary>
+      </Card>
+    </Section>
+  );
+}

package/templates/fate/prisma/client/public/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax" viewBox="0 0 160 160"><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" style="transform-box:fill-box;transform-origin:50% 50%" transform="rotate(-31 0 0)"/></svg>

package/templates/fate/prisma/client/src/App.css

@@ -0,0 +1,153 @@
+@import 'tailwindcss';
+
+body {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
+
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+@theme {
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-border: hsl(var(--border));
+  --color-ring: hsl(var(--ring));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0 40%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: 0 0% 3.9%;
+      --foreground: 0 0% 98%;
+      --card: 0 0% 3.9%;
+      --card-foreground: 0 0% 98%;
+      --popover: 0 0% 3.9%;
+      --popover-foreground: 0 0% 98%;
+      --primary: 0 0% 98%;
+      --primary-foreground: 0 0% 9%;
+      --secondary: 0 0% 14.9%;
+      --secondary-foreground: 0 0% 98%;
+      --muted: 0 0% 14.9%;
+      --muted-foreground: 0 0% 63.9%;
+      --accent: 0 0% 14.9%;
+      --accent-foreground: 0 0% 98%;
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 0 0% 14.9%;
+      --input: 0 0% 14.9%;
+      --ring: 0 0% 83.1%;
+      --chart-1: 220 70% 50%;
+      --chart-2: 160 60% 45%;
+      --chart-3: 30 80% 55%;
+      --chart-4: 280 65% 60%;
+      --chart-5: 340 75% 55%;
+      --sidebar-background: 240 5.9% 10%;
+      --sidebar-foreground: 240 4.8% 95.9%;
+      --sidebar-primary: 224.3 76.3% 48%;
+      --sidebar-primary-foreground: 0 0% 100%;
+      --sidebar-accent: 240 3.7% 15.9%;
+      --sidebar-accent-foreground: 240 4.8% 95.9%;
+      --sidebar-border: 240 3.7% 15.9%;
+      --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+  }
+
+  * {
+    @apply border-border;
+  }
+}
+
+textarea {
+  resize: none;
+}
+
+.squircle {
+  border-radius: 32px;
+  corner-shape: squircle;
+}
+
+::backdrop {
+  backdrop-filter: blur(4px);
+}
+
+[popover] {
+  transition:
+    opacity 150ms ease-in-out,
+    display 150ms ease-out allow-discrete,
+    overlay 150ms ease-out allow-discrete;
+  opacity: 0;
+}
+
+[popover]:popover-open {
+  opacity: 1;
+  display: block;
+}
+
+@starting-style {
+  [popover]:popover-open {
+    opacity: 0;
+  }
+}

package/templates/fate/prisma/client/src/lib/AvailableLanguages.tsx

@@ -0,0 +1,5 @@
+export default new Map([
+  ['en_US', 'English'],
+  ['de_DE', 'Deutsch (German)'],
+  ['ja_JP', '日本語 (Japanese)'],
+]);

package/templates/fate/prisma/client/src/lib/cx.tsx

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export default function cx(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs));
+}

package/templates/fate/prisma/client/src/lib/env.tsx

@@ -0,0 +1,5 @@
+import defineEnv from '@nkzw/define-env';
+
+export default defineEnv(['SERVER_URL'], {
+  SERVER_URL: import.meta.env.VITE_SERVER_URL,
+});

package/templates/fate/prisma/client/src/ui/Badge.tsx

@@ -0,0 +1,31 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'react';
+import cx from '../lib/cx.tsx';
+
+const badgeVariants = cva(
+  'inline-flex items-center squircle border px-1.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      },
+    },
+  },
+);
+
+export interface BadgeProps
+  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cx(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/templates/fate/prisma/client/src/ui/Button.tsx

@@ -0,0 +1,108 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ButtonHTMLAttributes, type ReactNode, useOptimistic, useTransition } from 'react';
+import { useFormStatus } from 'react-dom';
+import cx from '../lib/cx.tsx';
+
+const buttonVariants = cva(
+  'inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap squircle text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-10 px-3 py-2 active:pt-[11px] active:pb-[9px]',
+        icon: 'h-10 w-10',
+        lg: 'h-11 squircle px-6 active:pt-[11px] active:pb-[9px]',
+        sm: 'h-9 squircle px-2 active:pt-[11px] active:pb-[9px]',
+      },
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      },
+    },
+  },
+);
+
+const Button = ({
+  action,
+  asChild = false,
+  className,
+  disabled,
+  onClick: initialOnClick,
+  size,
+  variant,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    action?: () => void;
+    asChild?: boolean;
+  }) => {
+  const Component = asChild ? Slot : 'button';
+
+  const [isPending, startTransition] = useTransition();
+
+  const onClick = initialOnClick || (action ? () => startTransition(action) : undefined);
+
+  return (
+    <Component
+      className={cx(buttonVariants({ className, size, variant }))}
+      disabled={disabled !== undefined ? disabled : isPending}
+      onClick={onClick}
+      {...props}
+    />
+  );
+};
+
+const AsyncButton = ({
+  action,
+  asChild = false,
+  children,
+  className,
+  disabled,
+  pendingPlaceholder = '...',
+  size,
+  variant,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    action?: () => Promise<unknown> | void;
+    asChild?: boolean;
+    pendingPlaceholder?: ReactNode;
+  }) => {
+  const Component = asChild ? Slot : 'button';
+
+  const [optimisticIsPending, setOptimisticIsPending] = useOptimistic(false);
+  const [transitionIsPending, startTransition] = useTransition();
+  const { pending: formIsPending } = useFormStatus();
+
+  const isPending = transitionIsPending || optimisticIsPending || formIsPending;
+
+  const onClick = action
+    ? () => {
+        startTransition(async () => {
+          setOptimisticIsPending(true);
+          await action();
+        });
+      }
+    : undefined;
+
+  return (
+    <Component
+      className={cx(buttonVariants({ className, size, variant }))}
+      disabled={disabled || isPending || undefined}
+      onClick={onClick}
+      {...props}
+    >
+      {isPending ? pendingPlaceholder : children}
+    </Component>
+  );
+};
+
+export { AsyncButton, Button, buttonVariants };

package/templates/fate/prisma/client/src/ui/Card.tsx

@@ -0,0 +1,32 @@
+import { VStack } from '@nkzw/stack';
+import { HTMLAttributes } from 'react';
+import cx from '../lib/cx.tsx';
+
+export default function Card({
+  children,
+  className,
+  ...props
+}: {
+  children: React.ReactNode;
+  className?: string;
+} & HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cx(
+        'relative overflow-hidden squircle border border-gray-200/70 bg-white/85 shadow-[0_16px_70px_-32px_rgba(15,23,42,0.45)] dark:border-neutral-800 dark:bg-neutral-900/80 transition duration-200 ease-out hover:shadow-[0_24px_80px_-38px_rgba(15,23,42,0.55)]',
+        className,
+      )}
+      {...props}
+    >
+      <div className="pointer-events-none absolute inset-0 bg-linear-to-br from-blue-500/10 via-transparent to-indigo-500/15 opacity-30 transition duration-200" />
+      <VStack
+        className="relative z-10 flex h-full w-full"
+        gap={16}
+        horizontalPadding={20}
+        verticalPadding={16}
+      >
+        {children}
+      </VStack>
+    </div>
+  );
+}

package/templates/fate/prisma/client/src/ui/CommentCard.tsx

@@ -0,0 +1,75 @@
+import type { Comment } from '@app/server/src/trpc/views.ts';
+import Stack from '@nkzw/stack';
+import { X } from 'lucide-react';
+import { useView, view, ViewRef } from 'react-fate';
+import { useFateClient } from 'react-fate';
+import { Button } from './Button.tsx';
+import Link from './Link.tsx';
+
+export const CommentView = view<Comment>()({
+  author: {
+    id: true,
+    name: true,
+    username: true,
+  },
+  content: true,
+  id: true,
+});
+
+export const CommentViewWithPostCount = view<Comment>()({
+  ...CommentView,
+  post: { commentCount: true },
+});
+
+export default function CommentCard({
+  comment: commentRef,
+  link,
+  post,
+}: {
+  comment: ViewRef<'Comment'>;
+  link?: boolean;
+  post: { commentCount: number; id: string; title: string };
+}) {
+  const fate = useFateClient();
+  const comment = useView(CommentView, commentRef);
+  const { author } = comment;
+
+  return (
+    <div
+      className="group squircle border border-gray-200/80 bg-gray-100/50 p-3 text-sm dark:border-neutral-800 dark:bg-neutral-900/40"
+      key={comment.id}
+    >
+      <Stack between gap={16}>
+        <p className="font-medium text-gray-900 dark:text-gray-200">
+          {author?.name ?? 'Anonymous'}
+        </p>
+        <Button
+          className="opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100"
+          onClick={async () => {
+            await fate.mutations.comment.delete({
+              delete: true,
+              input: { id: comment.id },
+              optimistic: {
+                post: { commentCount: post.commentCount - 1, id: post.id },
+              },
+              view: view<Comment>()({
+                id: true,
+                post: { commentCount: true },
+              }),
+            });
+          }}
+          size="sm"
+          variant="ghost"
+        >
+          <X size={14} />
+        </Button>
+      </Stack>
+      <p className="text-foreground/80">{comment.content}</p>
+      {link && (
+        <Link className="text-blue-500 underline hover:no-underline" to={`/post/${post.id}`}>
+          {post.title}
+        </Link>
+      )}
+    </div>
+  );
+}

package/templates/fate/prisma/client/src/ui/Error.tsx

@@ -0,0 +1,19 @@
+import { VStack } from '@nkzw/stack';
+
+export default function Error({ error: initialError }: { error: unknown }) {
+  const error = initialError instanceof Error ? (initialError as Error) : null;
+  return (
+    <VStack gap={12}>
+      <h3 className="text-xl font-semibold text-red-700">Error</h3>
+      <code>{error ? error.stack || `fate Error: ${error.message}` : String(initialError)}</code>
+      <div>
+        <a
+          className="cursor-pointer underline decoration-gray-300 hover:no-underline"
+          onClick={() => window.location.reload()}
+        >
+          <fbt desc="Try again button">Try again</fbt>
+        </a>
+      </div>
+    </VStack>
+  );
+}